eslint treats my *.ts files as javascript in a project that also has vue
P粉739706089
2023-09-02 19:59:50
<p>I am developing a web project using typescript and vue. After reading the documentation for typescript-eslint and eslint-plugin-vue, I've solved the following eslint configuration: </p>
<pre class="brush:php;toolbar:false;">module.exports = {
root: true,
env: {
browser: true,
es2021: true,
},
extends: [
"eslint:recommended",
"plugin:vue/vue3-essential",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"prettier",
],
parser: "vue-eslint-parser",
parserOptions: {
parser: "@typescript-eslint/parser",
project: ["./tsconfig.json"],
tsconfigRootDir: __dirname,
extraFileExtensions: [".vue"],
},
overrides: [],
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
},
plugins: ["vue", "@typescript-eslint"],
};</pre>
<p>My vue files are parsed correctly, but my ts files have unreasonable lint errors. It seems they are checked against javascript syntax. As shown below:</p>
<p>If I remove <code>parserOptions</code> and change the parser to <code>@typescript-eslint/parser</code>, the ts file lints correctly, but the lint of the vue file breaks . </p>
<p>Does anyone know? </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
As far as I know, you have two options:
Change
parser: "vue-eslint-parser"to@typescript-eslint/parserAdd overrides for .ts files and set the parser to
@typescript-eslint/parserI guess I'm too tired or too old, anyway, the problem is that there are two
parserOptionssections in the same lint file. This is the final working version:module.exports = { root: true, env: { browser: true, es2021: true, }, extends: [ "eslint:recommended", "plugin:vue/vue3-essential", "plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/recommended-requiring-type-checking", "prettier", ], parser: "vue-eslint-parser", parserOptions: { parser: "@typescript-eslint/parser", project: ["./tsconfig.json"], ecmaVersion: "latest", sourceType: "module", extraFileExtensions: [".vue"], }, // parserOptions: { // ecmaVersion: "latest", // sourceType: "module", // }, plugins: ["vue", "@typescript-eslint"], };