vue3 - alloyTeam的eslint规则在vue/cli 5.0.8版本中会报错？

Question

{  "name": "kk",  "version": "0.1.0",  "private": true,  "scripts": {    "serve": "vue-cli-service serve",    "build": "vue-cli-service build",    "lint": "vue-cli-service lint"  },  "dependencies": {    "core-js": "^3.32.2",    "register-service-worker": "^1.7.2",    "vue": "^3.3.4",    "vue-router": "^4.2.5",    "vuex": "^4.1.0"  },  "devDependencies": {    "@babel/core": "^7.22.20",    "@babel/eslint-parser": "^7.22.15",    "@typescript-eslint/eslint-plugin": "^6.7.2",    "@typescript-eslint/parser": "^6.7.2",    "@vue/cli-plugin-babel": "~5.0.8",    "@vue/cli-plugin-eslint": "~5.0.8",    "@vue/cli-plugin-pwa": "~5.0.8",    "@vue/cli-plugin-router": "~5.0.8",    "@vue/cli-plugin-typescript": "~5.0.8",    "@vue/cli-plugin-vuex": "~5.0.8",    "@vue/cli-service": "~5.0.8",    "@vue/eslint-config-typescript": "^12.0.0",    "eslint": "^8.49.0",    "eslint-config-alloy": "^5.1.2",    "eslint-plugin-vue": "^9.17.0",    "less": "^4.2.0",    "less-loader": "^8.1.1",    "typescript": "~5.2.2",    "vue-eslint-parser": "^9.3.1"  }}

eslintrc

module.exports = {  extends: ['alloy', 'alloy/vue', 'alloy/typescript'],  parser: 'vue-eslint-parser',  parserOptions: {    parser: {      js: '@babel/eslint-parser',      jsx: '@babel/eslint-parser',      ts: '@typescript-eslint/parser',      tsx: '@typescript-eslint/parser'      // Leave the template parser unspecified, so that it could be determined by `<script lang="...">`    }  },  env: {    // Your environments (which contains several predefined global variables)    //    // browser: true,    // node: true,    // mocha: true,    // jest: true,    // jquery: true  },  globals: {    // Your global variables (setting to false means it's not allowed to be reassigned)    //    // myGlobal: false  },  rules: {    // Customize your rules    //    // Please keep this rule off because it requiresTypeChecking    // https://github.com/vuejs/vue-eslint-parser/issues/104    // https://github.com/typescript-eslint/typescript-eslint/pull/5318    '@typescript-eslint/prefer-optional-chain': 'off'  }}

报错信息

ERROR in [eslint] Error while loading rule '@typescript-eslint/consistent-type-assertions': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

在网上查了一下，都是说在eslintrc的parserOptions下新建个project键，然后写上tsconfig.json的位置，但是配置后并没有生效。有哪位大佬知晓什么情况吗？

Answer 1

根据你提供的报错信息，问题出在 '@typescript-eslint/parser' 上，这个解析器需要为项目提供特定的配置。错误信息明确指出，你需要在 'parserOptions.project' 属性中指定一个值。

你的 'eslintrc' 配置文件中的解析器选项似乎已经按照 'alloyTeam' 的 eslint 规则配置了，但是 '@typescript-eslint/parser' 需要额外的配置。

尝试以下方法解决：

在你的 'eslintrc' 文件中，你的 parserOptions 可以修改成如下格式：

"parserOptions": {    "parser": "@typescript-eslint/parser",    "project": "tsconfig.json",    "sourceType": "module"},

其中，'project' 指向你的 'tsconfig.json' 文件，这是 TypeScript 项目的配置文件，其中包含了 TypeScript 编译器配置。

注意：你的 'tsconfig.json' 文件必须位于你的项目的根目录下，并且这个文件必须存在。在这个文件中，你可以配置你的 TypeScript 编译选项，例如 target, module, compilerOptions 等。

另外，如果你使用的是 Vue CLI 创建的项目，通常在 'vue.config.js' 文件中进行 eslint 配置，而不是直接在 'package.json' 中配置。如果上述修改后仍然没有解决问题，你可能需要检查你的 eslint 配置是否正确。你也可以考虑使用 '@vue/cli-plugin-eslint' 和 '@vue/cli-plugin-typescript' 插件创建的默认 eslint 和 typescript 配置，这通常会避免很多问题。

如果问题仍然存在，请尝试清空 node_modules 文件夹和 package-lock.json 文件，然后重新运行 npm install 来重新安装依赖。有时候依赖冲突或者版本不匹配也会导致这类问题。