eslint

eslint基于eslint规则对js代码进行检查,来规范团队的代码书写。业界比较流行的js代码规范有airbnbJavaScript 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的配置都不生效(注意:是prettier相关设置不生效)。见官方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太严格了)


大白菜
36 声望3 粉丝