疾速配置

  1. 应用vite的脚手架创立一个我的项目

    yarn create vite

  2. 装置Eslint包

    cd vite-projectyarn add yarn add eslint -D

  3. 配置eslint

    npx eslint --init

  4. 装置依赖包

    如果上一步中 Would you like to install them now with npm? 抉择的为yes 则可跳过以后步骤，否则，能够依据上一步骤的提醒对须要的包进行装置
yarn add -D eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^8.2.0 eslint-plugin-import@^2.25.2 @typescript-eslint/parser@latest
执行完以上的步骤根本的eslint配置就实现了，如果应用 vscode 的同学肯定要留神要重启 vscode 能力失效

深度定制配置

问题解决

问题1：
当我关上App.vue文件的时候发现上面的谬误，这个规定一看就是vue2 的规定阿

解决办法
vue是应用 eslint-plugin-vue 这个插件对vue的格局进行校验的咱们关上它的文档看一下

能够看进去 vue3 举荐的是 plugin:vue/vue3-recommended 这个规定，而咱们的 eslintrc.js 中应用的是 plugin:vue/essential 这个，咱们批改代码如下，从新关上 App.vue 问题修复。

module.exports = {  extends: [-    'plugin:vue/essential',+    'plugin:vue/vue3-recommended',     'airbnb-base',  ]}

问题2：
当我装置上 vue-router 在app上应用时，报文件无奈解析

解决办法
咱们看到第一个错是 import/no-unresolved查看文档 次要起因是因为咱们的文件名没有文件后缀所以文件不能被 require.resolve 办法所解析，通过增加一下代码，扩大解析器的解析后缀

module.exports = {+  settings: {+    'import/resolver': {+      node: {+        extensions: [+          '.js',+          '.jsx',+          '.ts',+        ],+      },+    },+  },}

另一个错是报的是 import/extension 短少文件后缀，通过查看文档咱们增加如下代码解决

module.exports = {+  'import/extensions': ['error', 'always', {+      js: 'never',+      mjs: 'never',+      jsx: 'never',+      ts: 'never',+      tsx: 'never',+   }],}
第一个参数为谬误等级error示意异样，第二个参数 always 代表必须应用扩大，第三个参数对特定类型的文件进行设置

配置 Alias

Eslint alias须要借助 eslint-import-resolver-alias 这个插件能力实现

yarn add eslint-import-resolver-alias -D

批改.eslintrc.js代码

module.exports = {  settings: {+    'import/resolver': {+      alias: {+        map: [+          ['@components', './src/components'],+        ],+         extensions: ['.ts', '.js', '.jsx', '.json'],+      },+    },  },}

为了让 vite 在构建的时候可能辨认Alias咱们须要在vite.config.ts中增加如下配置

export default defineConfig({+  resolve: {+    alias: { '@components': './src/components' },+  },})