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.jsmodule.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.jsmodule.exports ={    ...    rules:{        'operator-linebreak':'off'    }}

  • 应用Prettier ESLint插件（举荐）

    • 间接应用prettier依照eslint规定进行格式化 官网

    • vscode装置后，批改格式化工具，即可

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

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