vue的vite项目配置eslint没有效果？

Question

启动vite后不提示vue/no-unused-vars和any类型。

// .eslintrc.js
module.exports = {
    extends: [
        'eslint:recommended',
 "plugin:vue/vue3-recommended",
 "prettier",
 "prettier/vue",
 ],
 rules: {
        'vue/no-unused-vars': 'error',
 "@typescript-eslint/no-explicit-any": "off"
 },
};

package.json

{
  "name": "vue3vitets",
 "version": "0.0.0",
 "scripts": {
    "dev": "vite",
 "build": "vite build"
 },
 "dependencies": {
    "axios": "^0.20.0",
 "typescript": "^4.0.3",
 "vue": "^3.0.0-rc.1",
 "vue-router": "^4.0.0-beta.13"
 },
 "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.4.1",
 "@typescript-eslint/parser": "^4.4.1",
 "@vue/compiler-sfc": "^3.0.0-rc.1",
 "eslint": "^7.11.0",
 "eslint-config-prettier": "^6.12.0",
 "eslint-plugin-vue": "^7.0.1",
 "prettier": "^2.1.2",
 "vite": "^1.0.0-rc.1"
 }
}

Answer 1

同问，vite好像用不了eslint

Answer 2

package.json

npm install @rollup/plugin-eslint --save-dev

vite.config.js

import eslint from '@rollup/plugin-eslint'

……
plugins: [eslint()]
……

https://www.npmjs.com/package...

Answer 3

resolve: {
        // 这样会导致eslint无效
        //alias: [
        //    {
        //        find: "@",
        //        replacement: path.resolve(projectRootDir, "src"),
        //    },
        //],
        alias: {
            "@": path.resolve(projectRootDir, "src"),
        },
        externals: {
            axios: "axios",
        },
    },

Answer 4

ESLint 的解析器使用的是 Espree 只能解析 js，把parser改为 vue-eslint-parser，就OK了。
参考官网 eslint-plugin-vue官网

- "parser": "@typescript-eslint/parser",
+ "parser": "vue-eslint-parser",
  "parserOptions": {
+     "parser": "@typescript-eslint/parser",
      "sourceType": "module"
  }