vue3+vite快速配置eslint的踩坑

前言

本文强调快速配置eslint，所以不使用下载依赖包和配置的方式进行eslint配置；而是使用现有的eslint自动化构建的包进行快速配置；
无论是新项目要集成eslint还是已经开发了一段时间的项目中途要加入eslint都可以按文章中的步骤执行
如不想看前边啰嗦的踩坑则可以直接跳到文章尾部 从 正确的步骤 开始

eslint 官方构建命令

eslint其中一种构建方式

// 首先全局安装eslint
npm i eslint -g
// 初始化eslint 直接按提示操作 eslint会自动下载所需的包和所需的配置
eslint --init
1
2
3
4

结果

对于以上方式构建后在vscode中无法使用eslint插件对代码进行格式化；更不用说对vue支持

vite的方式构建vue项目并选中构建eslint

构建方式可以参考: https://vitejs.cn/guide/#scaffolding-your-first-vite-project

执行：npm init vite@latest my-vue-app -- --template vue (npm@7+)
按照步骤执行，中间有一个eslint的选项 选yes；所有步骤执行完毕后就可以得到一个有eslint的项目；
但是依然不能使用vscode的eslint插件，貌似只能执行命令进行格式化；而且对于一些明显的不规范写法也是没有报红，非常不友好

正确的步骤：

1. 执行 npm init vue@latest 可以使用vite创建项目 它自身可以选择使用带eslint 但是到vscode上实际上用不了，所以使用这个命令创建时不要使用它的eslint，遇到eslint选择No
2. 创建好项目下载完依赖后执行 vue add eslint 按照步骤配置eslint就行了
3. 但是这个默认的parser对vue3和ts的解析都有问题所以需要下载另外两个parser; npm i vue-eslint-parser @typescript-eslint/parser -D
4. 然后就是配置
   在 .eslintrc.js 文件中加入以下配置

module.exports = {
 parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
      tsx: true,
    },
  },
}
1
2
3
4
5
6
7
8
9
10
11
12

5. 此时已经可以使用vscode的eslint插件进行格式化了，找一个vue文件，右键选择使用...格式化文档，就可以看到eslint插件选项了，如果不行检查下是否开启了eslint插件格式化的功能（设置的地方就在插件的配置中，百度上一大堆），如果开启了还没有显示就重启vscode；（此方法本人已经测试了N次，没有问题）
6. 还有个小问题，就是框架生成的有一个lint命令，但是执行的时候会报错，报错是关于 @vue/cli-service 插件的报错，因为构建的时候并没有下载这个插件，但是命令中又需要，所以应该算是一个官方的疏漏；不过解决也简单，只是缺了这个包而已，执行 npm i @vue/cli-service -D;
7. lint 命令的作用就是将项目中所有符合格式化条件的文件进行格式化，适合已经开发一段时间的项目中途加入eslint时使用；
8. 特坑注意：使用 npm init vite@latest 生成的vue3项目无法使用 vue add eslint 命令；这个我也没有过多的去研究；反正使用以上的方法是可以生成一个完美带有eslint的项目

over ~~