乐趣区

关于javascript:VS-Code-使用Eslint

eslint

eslint 基于 eslint 规定对 js 代码进行查看,来标准团队的代码书写。业界比拟风行的 js 代码标准有 airbnb 和 JavaScript Standard Style,这里次要介绍 vue 我的项目中应用 Eslint+airbnb 来标准团队代码。

工程根目录下新建.vscode/settings.json,如下配置

  "editor.codeActionsOnSave": {"source.fixAll.eslint": true // 保留时修复 lint},

这里的 eslint 规定就是 vue-cli 生成的配置中的 airbnb 标准。

// .eslintrc.js
module.exports = {
    root: true,
    env: {node: true},
    extends: [
        'plugin:vue/essential',
        '@vue/airbnb',
        '@vue/typescript/recommended'
    ],
    parserOptions: {ecmaVersion: 2020},
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
    }
};

ok,到这里我的项目就按预期 airbnb 标准进行格式化了。不过到这一步还没完,它只对 script 标签内的代码失效,vue模板和 style 款式就无能为力了。咱们还须要标准其余类型的代码。

另外,当一行代码太长(超过 100),eslint 不能主动修复,见 stackoverflow,因而额定应用 prettier 来辅助格式化。

prettier

prettier 只是格式化书写,并不对文件内容进行校验。它不仅反对 js 格式化,还反对各种文件类型的格式化,如 json,css,scss,less,typescript,markdown 等。

先装置 prettier 插件。

能够在 vscode->File->Preferences->Settings 进行设置,如果想要用 json 形式配置,能够点击右上角关上 json 文件。

{
   // 对指定文件类型进行格式化
  "[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
  "editor.formatOnSave": true, // 保留时应用默认格式化插件格式化
  "prettier.tabWidth": 4, // 缩进字节数
}

而后 vue 文件就是 4 个空格了。

prettier 可选配置

优先级

常常发现我的项目中有多个中央配置了代码格式化,比方 .prettierrc.editorconfig.vscode/settings.json 和上文的编辑器全局配置,另外还有 prettier 插件默认的配置,那么它们同时存在时是如何体现的?

  • .prettierrc>editorconfig>.vscode/settings.json>User/settings.json>default.json
  • 如果 .prettierrc.editorconfig并存,那么他们将会进行合并,并且对于同一个属性,前者会笼罩后者。
  • 只有 .prettierrc.editorconfig都不存在时,vscode 的配置才会失效,反过来说,只有这 2 个其中一个存在,那么 vscode 的配置都不失效。见官网 Issues

tips:

在 prettier 格式化时,它会输入日志到 OUTPUT 中,此时能够看到起作用的 Prettier Options。

新的问题

回顾下 .vscode/settings.json 文件

{
  "editor.codeActionsOnSave": {"source.fixAll.eslint": true // 保留时修复 lint},
  "editor.formatOnSave": true, // 保留时应用默认格式化插件格式化
  // 对指定文件类型进行格式化
  "[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
}

咱们发现,格式化占了下风,airbnb 的标准被 eslint 主动修复后,又被 prettier 格式化了,导致一些问题:

  • 单引号变成双引号
  • Expected a line break before this closing brace.eslintobject-curly-newline
  • ‘&&’ should be placed at the beginning of the line.eslintoperator-linebreak 注:这个问题 18 年建 issue,至今未修复

因而有 2 个计划

  • 自行批改

    • prettier 更改单引号配置
    • 在 rules 中新增规定,笼罩 airbnb 的规定,比方逻辑运算符要在语句的后面还是前面,如

      // .eslintrc.js
      module.exports ={
          ...
          rules:{'operator-linebreak':'off'}
      }
  • 应用 Prettier ESLint 插件(举荐)

    • 间接应用 prettier 依照 eslint 规定进行格式化 官网
    • vscode 装置后,批改格式化工具,即可

      ...
        "[vue]": {"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"}
    • 此时设置 prettier 属性不失效

临时没有遇到更多问题,如果还爆红,倡议间接改 rules。。(airbnb 太严格了)

退出移动版