Parsing error: Unexpected token prettier/prettier caused by "<!DOCTYPE html>"
Full error message
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>Solutionsource: stackoverflow \u2197
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
API access
Get this solution programmatically \u2014 free, no authentication.
curl https://depscope.dev/api/error/8007df0078563b35ac94f6eb5e125e0cfe15bc9698bc0c35cb4e1defd6ac1602hash \u00b7 8007df0078563b35ac94f6eb5e125e0cfe15bc9698bc0c35cb4e1defd6ac1602