vue/cli eslint插件使用指南

步骤（适用于3.0，4.0，5.0）

• 使用 npm 安装 @vue/cli-service 版本对应的 @vue/cli-plugin-eslint
  • 例如："@vue/cli-service": "~4.5.0" 对应的是 "@vue/cli-plugin-eslint": "^4"
  • npm install -D @vue/cli-plugin-eslint@^4
• 通过命令 vue invoke eslint 运行插件
  • vue 命令是 @vue/cli 提供的
  • 运行插件应该可以使用任意版本的 @vue/cli 提供的命令都行，建议先升级到最新版
  • npm list -g --depth=0可以查看全局安装的 @vue/cli 版本
  • 运行插件会根据选中的选择项更新适用依赖和修改配置文件
    • 原有 .eslintrc.js 文件时，修改可能会保留两份 extends 配置项，需要手动合并
• eslint 插件运行时的可选项
  • Pick an ESLint config: 选择内置的eslint规则
    • Error prevention only 仅仅显示错误
    • Airbnb 爱彼迎的规则
    • Standard 标准的规则
    • Prettier Prettier的规则（建议选这个，eslint 默认只能对 js 进行检查和格式化，Prettier提供了对 html 和 css 的支持）
  • Pick additional lint features 选择特征，可多选
    • Lint on save 保存时进行检查，似乎没有作用
    • Lint and fix on commit 在提交代码时进行检查（建议勾选，强制提交的代码符合检查规则）
  • 运行插件后续钩子函数
    • 建议暂存已经更改的文件，插件后续钩子会进行格式化，改变所有文件。
    • 基于代码安全考虑，建议恢复被格式化的文件
    • 在需要修改到某个文件时才对文件进行格式化，让测试人员能够对格式化后的代码提供一层保障
• 配置编辑器保存时格式化
  • 安装的插件，会生成 git 暂存时执行的钩子，会用到 vue-cli-service lint 命令
    • 暂存钩子在不同的版本中保存在不同位置
    • 该命令会格式化提交的代码，并且容许警告（warning)类型的报错存在。
    • 使用 eslint 插件是为帮助开发人员发现问题，并统一格式，方便查看每次提交的修改地方。使用自动格式化将会削弱这种功能，建议关闭自动格式化功能，修改为保存时格式化
  • 为命令增加参数，修改为 vue-cli-service lint --no-fix --max-warnings=0用以关闭提交时自动格式化
    • --max-warnings=0用于禁止提交带有警告报错的代码，带有警告报错的代码是被允许的，视情况添加该参数
  • 为 vsocde 安装插件 eslint v2.2.2
    • 插件：eslint v2.2.2 用于检查正在编辑的文档，并为 vsocde 提供保存时格式化功能
    • 插件只是启动器，实际是运行 node_modules 中的 eslint 依赖作为处理程序
    • 插件在寻找配置文件时会从当前工作区的根目录查询起。建议以 .eslintrc.js 所在文件夹作为当前编辑器打开目录
  • 进行 vscode 的工作区配置，该配置可以随代码上传，被保存在 /.vscode/settings.json 中，内容如下

{
    "files.eol": "\n",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "vetur.format.enable": false
}

其他配置

• Delete ␍(eslintprettier/prettier)修复
  • vue/cli 推荐的行尾序列为 LF
  • 行尾序列有 CRLF 和 LF 两种，CRLF 是 window 系统历史遗留的换行符，LF目前更通用
  • 点 vsocde 右下角的 CRLF 标志可进行当前文件的行尾序列切换
  • git version 2.35.1.windows.2 在推送代码时会自动把行尾序列切换为 LF，当拉取代码到本地时会根据当前操作系统，自动把文件转换为 CRLF 或 LF。所以 windows 系统会出现 Delete ␍(eslintprettier/prettier) 无法修复的问题。
  • 添加 .gitattributes 配置文件，声明在拉取到本地时使用的行尾序列为 LF。并设置 vsocde 新建的文件默认以 LF 为行尾序列

// .gitattributes
*.vue text eol=lf
*.js text eol=lf
*.jsx text eol=lf
*.ts text eol=lf
*.tsx text eol=lf

// .vscode/settings.json
{
  "files.eol": "\n",
}

其他相关说明

• 为什么不使用vue add eslint安装插件
  • 使用 @vue/cli@5.0.4 为低版本创建的项目添加 eslint 插件时，会安装 "@vue/cli-plugin-eslint": "~5.0.0"
    • 虽然在 @vue/cli 初始化的项目中测试时没有错误，但是检查 @vue/cli-plugin-eslint 需要的 webpack 版本，就会发现它和 @vue/cli-service 需要的版本不一致，这应该会有潜藏的错误
  • 使用 @vue/cli-service 对应的 @vue/cli 版本提供的 vue 指令添加插件时
    • 使用 @vue/cli@3.12.1 为 "@vue/cli-service": "^3.12.0" 添加插件，会安装 "@vue/cli-plugin-eslint": "^5.0.4"，他们需要的 webpack 版本不一致，应该会潜藏错误
    • 使用 @vue/cli@4.5.17 为 "@vue/cli-service": "~4.5.17" 增加插件，会安装 "@vue/cli-plugin-eslint": "~4.5.17"，猜测 @vue/cli@^4 起该错误被修复
    • 所以建议采用如步骤中的操作
• 为什么不使用 vue upgrade eslint 升级插件
  • 使用 vue upgrade eslint 单独升级插件，会无视匹配版本，直接升级为最新版，由于需要的 webpack 版本不一致，可能导致潜在错误
  • 使用 vue upgrade 升级所有插件，由于 webpack 大版本的更新，需要注意 vue.config.js 的配置是否兼容
  • 使用 vue upgrade 不会要求重选插件配置项

疑难问题

• 4.0 中 .eslintrc.js 无法被编辑器格式化，要提交该文件暂时只能删除 gitHooks

测试过程记录

环境

• 操作环境：
  • 先使用 @vue/cli@5.0.4 对所有目标环境安装 eslint 插件
  • 使用 @vue/cli@3.12.1 为 "@vue/cli-service": "^3.12.0" 增加插件时
  • 使用 @vue/cli@4.5.17 为 "@vue/cli-service": "~4.5.17" 增加插件时
  • 使用 @vue/cli@4.5.17 为 "@vue/cli-service": "^3.12.0" 增加插件时
  • 比较依赖和修改文件的区别
• 目标环境
  • "@vue/cli-service": "^3.12.0"
  • "@vue/cli-service": "~4.5.17"
  • "@vue/cli-service": "~5.0.0"

插件添加的依赖解析

• "@vue/cli-plugin-eslint": "~5.0.0" vue 的 eslint 插件
  • 注入vue-cli-service lint命令
  • 注入的 webpack 链规则
    • config.module.rule('eslint')
    • config.module.rule('eslint').use('eslint-loader')
  • 使用 @vue/cli@3.12.1 为 "@vue/cli-service": "^3.12.0" 增加插件时，该依赖会被替换为 "@vue/cli-plugin-eslint": "^5.0.4"
  • 使用 @vue/cli@4.5.17 为 "@vue/cli-service": "~4.5.17"、"@vue/cli-service": "^3.12.0" 增加插件时，该依赖会被替换为 "@vue/cli-plugin-eslint": "~4.5.17"
• "@babel/core": "^7.12.16" 使用 Bable 进行转码的核心
• "@babel/eslint-parser": "^7.12.16" eslint解析器，eslint不支持非标准语法，该解析器允许 eslint 检查被 babel 转码后的代码
• "eslint": "^7.32.0",
  • 使用 @vue/cli@4.5.17 为 "@vue/cli-service": "~4.5.17"、"@vue/cli-service": "^3.12.0" 增加插件时，该依赖会被替换为 "eslint": "^6.7.2"
• "eslint-config-prettier": "^8.3.0", eslint 规则，会关闭所有和 prettier 冲突的配置
• "eslint-plugin-prettier": "^4.0.0", 把 prettier 规则作为 eslint 规则
  • 使用 @vue/cli@4.5.17 为 "@vue/cli-service": "~4.5.17"、"@vue/cli-service": "^3.12.0" 增加插件时，该依赖会被替换为 "eslint-plugin-prettier": "^3.3.1"
• "eslint-plugin-vue": "^8.0.3", 为 .vue 编写的规则
  • 使用 @vue/cli@4.5.17 为 "@vue/cli-service": "~4.5.17"、"@vue/cli-service": "^3.12.0" 增加插件时，该依赖会被替换为 "eslint-plugin-vue": "^6.2.2"
• "lint-staged": "^11.1.2", git 提交钩子
  • 使用 @vue/cli@4.5.17 为 "@vue/cli-service": "~4.5.17"、"@vue/cli-service": "^3.12.0" 增加插件时，该依赖会被替换为 "lint-staged": "^9.5.0"
• "prettier": "^2.4.1"
  • 使用 @vue/cli@4.5.17 为 "@vue/cli-service": "~4.5.17"、"@vue/cli-service": "^3.12.0" 增加插件时，该依赖会被替换为 "prettier": "^2.2.1"
• 使用 @vue/cli@4.5.17 为 "@vue/cli-service": "~4.5.17"、"@vue/cli-service": "^3.12.0" 增加插件时，会安装 "@vue/eslint-config-prettier": "^6.0.0" 依赖
• 使用 @vue/cli@4.5.17 为 "@vue/cli-service": "~4.5.17"、"@vue/cli-service": "^3.12.0" 增加插件时，会安装 "babel-eslint": "^10.1.0" 依赖

插件修改的文件解析

• .eslintrc.js
  • root: true
  • env
    • node: true
  • extends
    • 'plugin:vue/essential' vue 规则
    • 'eslint:recommended' elint 提供，一个配置文件可以从基础配置中继承已启用的规则
    • 'plugin:prettier/recommended' 把 prettier 规则作为 eslint 规则，eslint 修复时使用 prettier进行格式化，应该是由 eslint-plugin-prettier 提供
      • 使用 @vue/cli@4.5.17 为 "@vue/cli-service": "~4.5.17"、"@vue/cli-service": "^3.12.0" 增加插件时，会使用 @vue/prettier 替换 plugin:prettier/recommended
  • parserOptions
    • parser: '@babel/eslint-parser' 解析器，使 eslint 能够解析经过 babel 转码后的代码，用来支持较新的语法
      • 使用 @vue/cli@4.5.17 为 "@vue/cli-service": "~4.5.17"、"@vue/cli-service": "^3.12.0" 增加插件时，会使用 babel-eslint 替换 @babel/eslint-parser
  • rules
    • 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
    • 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
• lint-staged.config.js
  • '*.{js,jsx,vue}': 'vue-cli-service lint' js,jsx,vue 文件提交时运行 vue-cli-service lint 检查