16

I have this vue app which I create using vue cli and the version I use is vue2 (with eslint and prettier).

I could run npm run serve and load my page. But in Visual Studio Code, I notice this error:

{
    "resource": "/c:/vue/app2/public/index.html",
    "owner": "eslint",
    "code": {
        "value": "prettier/prettier",
        "target": {
            "$mid": 1,
            "external": "https://github.com/prettier/eslint-plugin-prettier#options",
            "path": "/prettier/eslint-plugin-prettier",
            "scheme": "https",
            "authority": "github.com",
            "fragment": "options"
        }
    },
    "severity": 4,
    "message": "Parsing error: Unexpected token",
    "source": "eslint",
    "startLineNumber": 1,
    "startColumn": 2,
    "endLineNumber": 1,
    "endColumn": 2
}

and this is my .eslintrc.js which is auto generated when I create the app and I didn't make any changes to it since then.

module.exports = {  
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
  }
};

I notice that the error is actually referring to this line instead. Anyone knows what's wrong with this?

<!DOCTYPE html>

3 Answers 3

27

I've met a similar issue. It was caused by <!DOCTYPE html>.

The fix is quite easy, we need to specify a parser in prettierrc, although it is obvious:

overrides:
  - files: '*.html'
    options:
      parser: 'html'
  - files: '*.component.html'
    options:
      parser: 'angular'

After that prettier is able to format files with <!DOCTYPE html>.

Creds go to krave1986

4
  • Based off prettier docs, the Parser for html should be inferred automatically. Even after explicitly setting it though, I still get this error. Has there been a regression?
    – Andrew
    Apr 13, 2022 at 17:31
  • Which prettier version do you use?
    – satanTime
    Apr 13, 2022 at 17:34
  • 1
    2.6.2 is the version
    – Andrew
    Apr 13, 2022 at 17:37
  • I have the same issue with graphql queries. This answer solved my problem, I remember not needing to add the overrides to .prettierrc for different file formats to automatically work. Sep 22, 2022 at 0:57
0

I've met a similar problem. It was caused by in vue3.0 app.

we need a eslint plugin : eslint-plugin-html, add the plugin to your ESLint configuration.

plugins: ['html'],

and you want linting HMTL, use other plugins like @eslint-html

-2

Including in your .eslintrc.json file:

"ignorePatterns": [
    "projects/**/*",
    "**/index.html"
  ],

Good luck!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.