安装vite-plugin-eslint后eslint报错

Question

安装eslint和vite-plugin-eslint后，在viite.config.js引入vite-plugin-eslint开始出现报错。




------------------------------------分割线 ---------------------------------------
手动添加parserOptions:{parser:’@typescript-eslint/parser’}解析器后运行报错，如图

于是换成parserOptions:{project:[’./tsconfig.json’]}还是报错，如图

麻烦老师帮看一下

Answer 1

张轩 2022-12-09 10:07:44

同学你好

我使用你最新的代码，直接clone 下来，然后 npm install，然后 npm run dev，就成功启动了，没有任何的错误。请看截图：

所以只能猜测是 nodejs 版本问题或者系统问题了，提供一下我现在的版本：

  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.17.3 - ~/.yarn/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm

• 提问者 慕码人0782422 #1

  好的谢谢老师

Answer 2

张轩 2022-12-06 11:00:23

同学你好

请按照这样的步骤操作。

1 删除 node_modules 
2 重新安装 npm install
3 安装 vue-eslint-typescript 的官方包
npm install @vue/eslint-config-typescript --save-dev
https://www.npmjs.com/package/@vue/eslint-config-typescript
4 添加eslint配置： 原来的都不要了，先留两个
extends: [
    //vue 的规则
    'plugin:vue/vue3-essential',
    // vue ts 的规则
    '@vue/eslint-config-typescript'
],
5 启动成功

亲测有效～可用～

• 提问者 慕码人0782422 #1

  老师是用安装eslint-config-typescript来替代vite-plugin-eslint了吗？我去掉vite-plugin-eslint再按您说的做能启动啦

• 张轩 回复 提问者 慕码人0782422 #2

  同学你好 这两个插件是不同的功能 eslint-config-typescript 是添加 ts 的验证规则，vite 那个是添加 vite 关于 eslint 的验证，所以 eslint 验证的是两个方面：一个是编辑器中（这是 vscode 验证的），一个是脚手架运行时（也就是终端和浏览器里的错误，这个是 vite 验证的），你去掉了，自然终端报错就消失了～。但是如果你想要终端和浏览器的报错，应该是要加回来的。

• 提问者 慕码人0782422 回复 张轩 #3

  回复 张轩 我安装vite-plugin-eslint后浏览器报错提示：
  
  [plugin:vite-plugin-eslint] Error while loading rule '@typescript-eslint/dot-notation': 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.
  Occurred while linting /Users/mac/vite-vue/src/main.ts
  
  我在parserOptions里加上project: ['./tsconfig.json']后，于是vite.config.ts文件内的import有红色波浪线，提示：
  
  Parsing error: ESLint was configured to run on `<tsconfigRootDir>/vite.config.ts` using `parserOptions.project`: <tsconfigRootDir>/../../../users/mac/vite-vue/tsconfig.json
  However, that TSConfig does not include this file. Either:
  - Change ESLint's list of included files to not include this file
  - Change that TSConfig to include this file
  - Create a new TSConfig that includes this file and include it in your parserOptions.project
  
  老师安装vite-plugin-eslint也会有报错嘛您是怎么解决的呢？

点开查看后面2条评论

Answer 3

张轩 2022-12-02 09:41:17

同学你好

请提供一下你的代码库（git），我在本地帮你看下，谢谢。

• 提问者 慕码人0782422 #1

  https://gitee.com/lh576837179/vite-vue，请老师看看

• 张轩 回复 提问者 慕码人0782422 #2

  同学你好 你的 repo 是私有的呢。 我没法 clone，请公开一下吧。

• 提问者 慕码人0782422 回复 张轩 #3

  老师我已放开