Parsing error: Unexpected token prettier/prettier caused by ""

Question

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>

score 31 · Accepted Answer · answered Jan 24 '21 at 19:11

31

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

answered Jan 24 '21 at 19:11

satanTime

12,631
1
25
73

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 '22 at 17:31
Which prettier version do you use? – satanTime Apr 13 '22 at 17:34
1

2.6.2 is the version – Andrew Apr 13 '22 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. – Emerson Hsieh Sep 22 '22 at 00:57

score 0 · Answer 2 · answered Mar 18 '23 at 01:50

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

answered Mar 18 '23 at 01:50

George Wayne

160
1
5

score -2 · Answer 3 · answered Mar 01 '23 at 15:21

-2

Including in your .eslintrc.json file:

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

Good luck!

answered Mar 01 '23 at 15:21

Cherma Ramalho

373
3
7

Parsing error: Unexpected token prettier/prettier caused by ""

3 Answers3