关于vite:使用vite脚手架创建vue3项目配置eslint

应用 vite 的脚手架创立一个我的项目
```
yarn create vite
```

装置 Eslint 包

cd vite-project
yarn add 
yarn add eslint -D

配置 eslint
```
npx eslint --init
```
装置依赖包

如果上一步中 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 代表必须应用扩大，第三个参数对特定类型的文件进行设置

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'},
+  },
})

关于vite:使用vite脚手架创建vue3项目配置eslint

疾速配置

深度定制配置

问题解决

配置 Alias