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>
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