vscode中添加eslint校验

半糖不甜
1,039 阅读7分钟

1. 使用 eslint + vetur + eslint-plugin-vue 自动格式化

最早之前使用的是这种方式配置的eslint校验

1.1 安装npm相关包

npm i -g eslint-plugin-vue

安装成功后可以在工程里的package.json中确认是否有eslint-plugin-vue的信息

image.png

1.2 vscode安装eslint和vetur插件

1.3 修改vscode的配置选项

注意： 可使用ctrl+shif+p调出命令面板，搜索default选择首选项打开默认设置，即defaultSettings.json

image.png

安装完成后需要配置一下eslint，打开eslint的配置文件（左下角有个设置,点开搜索settings.json)

加上下面的代码即可（原有的配置不要替换掉）。

"editor.formatOnSave": true, 
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"eslint.run": "onSave", 
"eslint.options": { 
    "extensions": [ ".js", 
    ".vue" ] 
 }, 
    "editor.codeActionsOnSave": { "source.fixAll.eslint": true },

每次保存都会自动修复eslint

注意： eslint错误保存自动fix

第一种配置方式:

"eslint.autoFixOnSave": false, // 已废弃，被第二种方式替代

第二种配置方式：(官方推荐使用)

"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
}

第三种配置方式：

"eslint.format.enable": true,
"editor.formatOnSave": true

以上这种配置方式有缺陷：这里直接修改vscode的settings.json文件，这样的修改是本地的，无法做到同步，如果有其他人也是用的vscode，那么你要告诉他改什么改什么，他在去改，麻烦。

2. 使用eslint + prettier统一代码风格

使用Eslint校验代码语法，prettier统一格式化代码，按下保存自动修复eslint错误，自动格式化代码

首先，需要安装 ESLint、Prettier插件，安装完重启下，防止插件不生效。

另外这里有个坑， Beautify插件会占用格式化代码的快捷键，因此会和prettier产生冲突，所以直接禁用掉。

image.png

image.png

在项目的根目录创建.vscode文件夹， 然后再在其下面创建settings.json文件，将这个文件夹同步到git，这样做vscode就会优先读取项目根目录下的配置文件了，就能解决刚才那个痛点

创建好文件后，添加下述配置：

{ 
    "[vue]": { 
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }, 
    "eslint.alwaysShowStatus": true, 
    "eslint.format.enable": true, 
    "eslint.packageManager": "yarn", 
    "eslint.run": "onSave",
    "prettier.packageManager": "yarn", 
    "eslint.validate": [ 
        "vue", 
        "javascript", 
        "javascriptreact" 
     ], 
     "editor.codeActionsOnSave": { 
         "source.fixAll.eslint": true 
     }, 
     "vetur.validation.template": false, 
     "editor.formatOnPaste": true, 
     "editor.formatOnType": true, 
     "editor.formatOnSave": true, 
     "files.eol": "\n" 
   }

注意：如果你启用了prettier，但是没有相关配置文件，editor.formatOnSave选项就要设置为false。不然会与vscode自身的保存起冲突

接下来，我们来配置prettier，同样的在项目根目录创建.prettierrc.json文件，添加下述配置：

    { 
        "tabWidth": 2,
        "useTabs": false, 
        "endOfLine": "auto", 
        "singleQuote": false, 
        "semi": true, 
        "trailingComma": "none",
        "bracketSpacing": true
    }

做完上述配置后(可根据实际需求配置)，vscode就已经可以按照我们的规范来进行相应的提示了，按ctrl+s保存代码时其也会按照我们自定义的的规范进行格式化。

解决eslint不生效问题：

点击右下角eslint禁用图标，然后会出现弹框界面，选择 Allow Everywhere

image.png

然后eslint就生效了，界面会出现如下：

image.png

3. Typescript + eslint配置

3.1 安装依赖

当使用TypeScript时，需要单独添加相关插件@typescript-eslint/eslint-plugin和@typescript-eslint/parser。 当使用React/Vue时，需要单独添加相对应插件eslint-plugin-react或eslint-plugin-vue。

按需安装，如果是Create-React-App创建的项目，下面大多数工具都已经存在，在package-lock.json中核实后再安装。

npm install eslint-plugin-import --save-dev
npm install eslint-import-resolver-alias --save-dev
npm install eslint-config-airbnb --save-dev
npm install eslint-config-airbnb-base --save-dev
npm install @typescript-eslint/parser --save-dev
npm install @typescript-eslint/eslint-plugin --save-dev

3.2 工具配置

eslint的配置文件是.eslintrc.js，可以根据需要进一步添加配置,详见Vue3版本的项目模板规则配置。

3.2.1 Vue + TypeScript配置

主要配置如下，具体配置详见startup-vue3-app/generator/template/_stylelintrc.js。

module.exports = {
  root: true,

  env: {
    node: true,
  },

  parserOptions: {
    ecmaVersion: 2020,
  },

  rules: {
    ...
  },

  settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@', './src'],
        ],
        extensions: ['.ts', 'json', 'less', '.vue'],
      },
    },
  },

  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)',
      ],
      env: {
        jest: true,
      },
    },
  ],

  extends: [
    'eslint:recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    'airbnb-base',
    'plugin:vue/recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
  ],
};

3.2.2 关键配置项

  1. ecmaVersion 用于指定ECMAScript版本，默认为5，可设置为6、7、8、9 或 10，也可设置为年份命名的版本号，比如2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）或2019（同 10）或2020。
  2. sourceType sourceType有两个值script（默认）和module。当代码使用ES6及以上的模块语法时，需要设置为module。
  3. ecmaFeatures ecmaFeatures是一个对象，用于表示你想使用的额外的语言特性：
  • globalReturn - 允许在全局作用域下使用 return 语句
  • impliedStrict - 启用全局strict mode(如果 ecmaVersion 是 5 或更高)
  • jsx - 启用 JSX
  • experimentalObjectRestSpread - 启用实验性的 object rest/spread properties 支持
  1. parser 解析器用于帮助ESLint确定什么是解析错误，默认为esprima。此外还有其它解析器：babel-eslint 用于解析babel代码，@typescript-eslint/parser 用于解析ts代码。
  2. env env用于设置当前项目运行的环境，ESLint能校验通过该环境对应的全局变量。
  • browser：浏览器环境中的全局变量。
  • node：Node.js 全局变量和 Node.js 作用域。
  • commonjs：CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
  • shared-node-browser：Node.js 和 Browser 通用全局变量。
  • es6：启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
  • worker：Web Workers 全局变量。
  • amd： 将 require() 和 define() 定义为像 amd 一样的全局变量。
  1. root 默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。为了将 ESLint 限制到一个特定的项目，在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件里的 eslintConfig 字段下设置 "root": true。ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。

3.2.3 忽略设置

eslint自动忽略node_modules和bower_modules，在项目中，添加.eslintignore来设置校验规则忽略的文件。

3.2.4 自动修复

在命令行中添加--fix可以自动修复部分js/ts代码。需要注意的是：手工执行自动修复，以确保变更是符合预期的，切忌大范围的不能Review的自动修复。

3.3 具体校验

3.3.1 质量保障全生产链条覆盖

@startuml
开发校验 -> 开发校验: 实时在编辑器中提供校验信息，即时完成错误修复
开发校验 --> 提交校验
提交校验 -> 提交校验: 提交时自动执行校验，拒绝不合规代码提交
提交校验 --> 合并校验
合并校验 -> 合并校验: 合并时自动执行校验，拒绝不合规代码合并
合并校验 --> 定时校验
定时校验 -> 定时校验: 定时任务独立执行校验，把不合规代码及时报警
@enduml

3.3.2 开发环节校验——eslint

安装eslint插件， 在VSCode中自动启动eslint的检查。

3.3.3 提交环节校验——husky & lint-staged

husky结合lint-staged可以在本地提交commit时进行相关校验。

pre-commit钩子由git commit触发，在进行提交之前被调用，但可以使用--no-verify选项绕过。它不接受任何参数，脚本中退出非零状态会在创建提交之前中止git commit命令。

1. 安装husky和lint-staged

npm install husky --save-dev 
npm install lint-staged --save-dev

2. 配置package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,tsx,js,jsx}": [
      "npm run lint"
    ],
    "*.{css,scss,sass,less}": [
      "npm run lint:style"
    ]
  }
}

这里需要注意一点，lint-staged中会对匹配的文件都执行后面的命令，所以key值不能为*而是*.{ts,tsx,js,jsx}，不然当匹配到a.json时，会执行命令npm run lint a.json对json进行校验。当然，如果一点需要使用*，可以考虑在.eslintignore中进行设置。

3. 结合Vue-Cli使用

youkiefork自husky，做了一些定制化的改动 ,使得钩子能从package.json的 "gitHooks"属性中读取，本着减少工具的原则，如果直接用vue的脚手架就可以不用安装husky。具体使用方法如下，和husky基本一致。

安装husky和lint-staged
npm install lint-staged --save-dev
配置package.json
{
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{ts,vue}": [
      "npm run lint"
    ],
    "*.{css,scss,sass,less,vue}": [
      "npm run lint:style"
    ]
  }
}

3.3. 4 合并环节校验——CI校验

pre-commit钩子可以通过--no-verify绕过，所以我们在gitlab中还需要添加pipelines用于自动校验，并将校验结果及时反馈。

Todo: 待整合到template中。

3.3.5 定时环节校验——Echo/Sonar校验

Todo: 细化Echo/Sonar校验细化规则规则。

avatar
文章
阅读
粉丝