代码commit前的检查&修复

前言

ESlint

eslint是一个按照规则执行代码检查的工具，它可以在编码阶段进行静态分析，给出检查报告。搭配一些插件，可以提前暴露问题，给出提示，并进行修复，大大减少执行过程中的bug。

Prettier

prettier是一个代码格式化（美化）工具，可以按照设定的规则配置进行代码格式化，统一风格；在团队开发过程中使用相同的规则，可以保证最终代码的一致性，避免代码冲突。

Husky

husky能够让你更简单的使用git hooks，可以阻止不合格的commit、push等操作，对git执行的一些命令，通过相应的hooks钩子触发，执行自定义的脚本程序。

配置

安装方式npm yarn pnpm均可，根据项目来。

1、安装eslint和eslint对.vue的支持

• 依赖

  npm i eslint eslint-plugin-vue -D
  

• 介绍

  • eslint：eslint插件
  • eslint-plugin-vue：官方提供的vue插件，可以检查 .vue文件中的语法错误

• 配置（.eslintrc.cjs）

  {
    // 使用vue3推荐规则
    extends: ["plugin:vue/vue3-recommended"]
  }
  

• 忽略文件

  • 根目录创建.eslintignore文件

    dist
    node_modules
    

• 注意

  • 在根目录创建eslint配置文件有三种方式：.eslintrc 、.eslintrc.js、.eslintrc.cjs

  • .eslintrc.js

    • 在package.json中配置了 type 为 module 时，所有js文件全部使用es模块化，module.exports这种commonjs模块化方式不可以用。
    • 解决：1、可以将 .eslintrc.js 改为 .eslintrc.cjs，意思就是使用commonjs模块化；2、type 改为 commonjs

    module.exports = {
      extends: ["plugin:vue/vue3-recommended"]
    }
    

  • .eslintrc.cjs

    • 开启了eslint之后，该配置文件报错，Delete ‘␍’ eslint(prettier/prettier) ，罪魁祸首是git的一个配置属性：core.autocrlf，由于历史原因，windows下和linux下的文本文件的换行符不一致。
    • 解决：1、.prettierrc.cjs文件配置endOfLine: "auto"，不检测换行符；2、使用.eslintrc

    module.exports = {
      extends: ["plugin:vue/vue3-recommended"]
    }
    

  • .eslintrc

    • 需要用json写法

    {
      "extends": ["plugin:vue/vue3-recommended"]
    }
    

2、安装prettier和eslint的prettier插件

• 依赖

  npm i prettier eslint-plugin-prettier -D
  

• 介绍

  • prettier：prettier插件
  • eslint-plugin-prettier：将prettier作为eslint插件

• 配置（.eslintrc.js）

  {
    // 使用vue3推荐规则，prettier推荐规则，后者替换前者。
    extends: [
      'plugin:vue/vue3-recommended',
      'plugin:prettier/recommended'
    ],
  }
  

3、解决eslint和prettier冲突的问题

• 痛点

  • 例如，eslint说要使用单引号，改为单引号后，prettier又说要使用双引号，出现了冲突。

• 依赖

  npm i eslint-config-prettier -D
  

• 介绍

  • eslint-config-prettier：禁用所有与格式相关的eslint规则，也就是说把所有格式相关的校验都交给 prettier 处理

• 配置

  • eslint（.eslintrc.cjs）

    module.exports = {
      root: true,
      env: {
        browser: true,
        node: true,
        es6: true
      },
      parserOptions: {
        sourceType: 'module'
      },
      extends: ['plugin:vue/vue3-recommended', 'plugin:prettier/recommended'],
      plugins: ['prettier'],
      rules: {
        'prettier/prettier': ['error']
      }
    }
    

  • preitter（.prettierrc.cjs）

    module.exports = {
      printWidth: 120, // 换行字符串阈值
      tabWidth: 2, // 水平缩进的空格数
      useTabs: false, // 使用tabs
      semi: false, // 句末是否加分号
      vueIndentScriptAndStyle: true,
      singleQuote: true, // 使用单引号
      trailingComma: "none", // 最后一个对象元素加逗号
      bracketSpacing: true, // 对象，数组加空格
      jsxBracketSameLine: true, // jsx > 是否另起一行
      arrowParens: "always", // (x) => {} 是否要有小括号
      requirePragma: false, // 不需要写文件开头的 @prettier
      insertPragma: false, // 不需要自动在文件开头插入 @prettier
      endOfLine: "auto", // 检测换行符
    }
    

4、安装lint-staged

• 依赖

  npm i lint-staged -D
  

• 用途

  • 文件过滤器，过滤出需要的文件，执行操作。
  • 注意，仅过滤文件，操作由其他插件支持。

• 配置（package.json）

   "scripts": {
    },
    "lint-staged": {
      "**/*.{js,jsx,ts,tsx}": "npm run xxx",
      "**/*.{js,jsx,tsx,ts,scss,md,json}": [
        "xxx"
      ]
    }
  

5、安装husky

• 依赖

  npx husky-init install
  

• 用途

  • 执行完后，会在根目录创建一个.husky的文件夹，在commit代码时，会在其之前触发pre-commit钩子，然后进行一些操作（代码检查、代码测试等等）

  

• 配置

  • pre-commit文件

    • 可以自定义指令将npm test 修改为 npm run lint-staged
    • 注意：自定义的指令，一定要加 run

  • package.json

    eslint：src（要验证的目标文件夹）、--fix（修复）、--ext（指定检测文件的后缀）

    {
      "scripts": {
        "prepare": "husky install",
        "lint-fix": "eslint src --fix",
        "lint-staged": "lint-staged --allow-empty",
        "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx,.vue"
      },
      "lint-staged": {
        "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
        "**/*.{js,jsx,tsx,ts,scss,md,json}": [
          "prettier --write"
        ]
      }
    }
    

6、补充eslint对ts的校验

• 依赖

  npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser -D
  

• 配置（.eslintrc.cjs）

  module.exports = {
    root: true,
    env: {
      browser: true,
      node: true,
      es6: true
    },
    parserOptions: {
      ecmaVersion: 2022,
      sourceType: 'module'
    },
    extends: ['plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
    plugins: ['prettier', '@typescript-eslint'],
    rules: {
      'prettier/prettier': ['error'],
      '@typescript-eslint/no-inferrable-types': 'off',
      '@typescript-eslint/no-explicit-any': 'off',
      'prefer-const': 'off'
    }
  }