@vue/cli eslint插件使用指南

使用步骤

• 使用 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 提供的 vue 命令
  • 运行插件会根据选择项更新适用依赖和修改配置文件
  • 这种修改会因为插件安装顺序不同而不同，可能潜在错误，下文提供了不同版本的配置文件，可比较后进行修改
• 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：在提交代码时进行检查（建议勾选，强制提交的代码符合检查规则）
• 插件后续钩子函数
  • 插件后续钩子会对所有文件根据 eslint 规则进行格式化
  • 基于代码安全考虑，建议恢复被格式化的文件
  • 在需要修改到某个文件时才对文件进行格式化，让测试人员能够对格式化后的代码提供一层保障
• 配置 vscode 保存时格式化代码
  • 插件会生成 git 暂存时格式化代码的钩子
    • 格式化程序由 eslint 提供，只能够对部分问题进行处理，且可能存在 bug
    • 它通过 package.json 中 gitHooks、lint-staged 配置项实现
    • 使用 eslint 插件是为帮助开发人员发现问题，并统一格式，方便查看每次提交的修改地方。
    • 使用暂存时格式化将会削弱这种功能，建议关闭暂存时格式化功能，修改为保存时格式化
  • 关闭暂存时格式化，只保留暂存强制检查
    • vue-cli-service lint修改为vue-cli-service lint --no-fix --max-warnings=0
    • --no-fix：声明 eslint 不进行格式化处理
    • --max-warnings=0：vue-cli-service lint默认允许 warning 类型错误存在，为了严格限制提交的代码都被格式化，建议设置为 0
  • 使 vscode 在保存时进行格式化
    • 为 vsocde 安装插件 eslint
    • 插件只是启动器，实际是运行 node_modules 中的 eslint 依赖作为处理程序
    • 进行 vscode 的工作区配置，该配置可以随代码上传，被保存在 /.vscode/settings.json 中，内容如下

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "vetur.format.enable": false,
    "typescript.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。
  • 但不建议这么做，实际运用中发现配置后 git 提交出现未修改得文件被识别为已修改，且无法提交
  • 建议不对行尾序列做限定

相关文件

3.0

• .eslintrc.js

module.exports = {
  /**
   * 标识当前配置文件为eslint的根配置文件，让其停止在父级目录中继续寻找。
   * eslintrc.js 默认会层叠使用所有找到的配置文件，越近的规则权限越高。
   */
  root: true,
  /**
   * 一个环境定义了一组预定义的全局变量
   * browser 浏览器环境中的全局变量
   * node
   * es6 启用了除 modules 以外的所有特性
   * amd 将 require() 和 define() 定义为像 amd 一样的全局变量
   * commonjs CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)
   * jquery
   * mongo MongoDB 全局变量
   * worker：Web Worker全局变量
   * serviceworker：Service Worker 全局变量
   */
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  /**
   * 解析器配置项
   * 传递给解析器使用，具体有哪些值由使用的解析器决定
   */
  parserOptions: {
    parser: "babel-eslint"
  }
};

• .package.json

...
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.12.0",
    "@vue/cli-service": "^3.12.0",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10",

    "@vue/cli-plugin-eslint": "^3.12.0",
    "eslint": "^5.16.0",
    "babel-eslint": "^10.0.1",
    "prettier": "^1.18.2",
    "lint-staged": "^8.1.5",

    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-vue": "^5.0.0",
    "@vue/eslint-config-prettier": "^5.0.0"
  },
...

4.0

• .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

• .package.json

...
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.19",
    "@vue/cli-plugin-router": "~4.5.19",
    "@vue/cli-plugin-vuex": "~4.5.19",
    "@vue/cli-service": "~4.5.19",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11",

    "@vue/cli-plugin-eslint": "~4.5.19",
    "eslint": "^6.7.2",
    "babel-eslint": "^10.1.0",
    "prettier": "^2.2.1",
    "lint-staged": "^9.5.0",

    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "@vue/eslint-config-prettier": "^6.0.0"
  },
...