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

疾速配置

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

   yarn create vite

2. 装置 Eslint 包

   cd vite-project
   yarn 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'},
+  },
})