TS+Eslint+prettier+husky代码提交自动格式化及修复

一、本文目标：TS+Eslint+prettier+husky代码提交自动格式化及修复的实现

• 上篇文章介绍了Vue项目提交时的自动修复，现在好多项目都是 typescript 开发，TS官方也已转而使用 Eslint，该篇介绍下 TS 项目使用 Eslint 的基本配置

二、准备工作：基本的 TS 项目环境搭建、代码修复检测工具的安装及配置

• typescript 开发环境搭建可参考 webpack 官网文档 typescript配置指南 【默认你可以自己搭建 TS 开发环境】
• 安装需要的依赖包：
  @typescript-eslint/eslint-plugin：包含定义好的检测 TS 代码规范的 Eslint 插件
  @typescript-eslint/parser：Eslint 解析器，检查和规范 TS 代码
  eslint-config-prettier：解决 Eslint 样式规范与 prettier 的冲突，以 prettier 为准
  eslint-plugin-typescript：将 prettier 作为 Eslint 规范来使用
  husky：提供 git 代码提交时的 hooks 钩子
  lint-staged：配置需要检查的路径方式等
  prettier：检测工具
  eslint：检测及修复工具

  yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-typescript husky lint-staged prettier
  或
  npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-typescript husky lint-staged prettier
  

• typescript-eslint 详细文档介绍地址【typescript-eslint 详细介绍】
• typescript-prettier 配合使用的文档地址【typescript-prettier 文档介绍】

三、具体配置：配置文件为 packaeg.json、.eslintrc.js、.prettierrc

• package.json 文件进行 husky、lint-staged 配置

  // package.json 配置
  {
      ...
      "husky": {
          "hooks": {
            "pre-commit": "lint-staged"
          }
      },
      "lint-staged": {
          "src/**": [
            "prettier --write",
            "eslint --fix",
            "git add"
          ]
      }
  }
  

• .eslintrc.js 配置代码检测的规则

  // .eslintrc.js 配置文件
  module.exports = {
    root: true,
    env: {
      node: true,
      browser: true,
      es6: true
    },
    extends: [
      "plugin:@typescript-eslint/recommended", 
      "prettier/@typescript-eslint", // 样式规范以 prettier 为准
      "plugin:prettier/recommended" // 样式规范以 prettier 为准
    ],
    rules: {
      "no-dupe-keys": "error",
      "no-duplicate-case": "error",
      "no-empty": ["error", { "allowEmptyCatch": true }],
      "no-ex-assign": "error",
      "no-extra-boolean-cast": "error",
      "curly": "error",
    },
    parserOptions: {
      parser: "@typescript-eslint/parser"
    }
  }
  

• .prettierrc 规则配置，具体规则文档【prettier 文档配置查询】

  // .prettierrc 或者 .prettierrc.js 文件
  {
      "printWidth": 200,
      "tabWidth": 2,
      "useTabs": true,
      "semi": false,
      "singleQuote": true,
      "bracketSpacing": true,
      "arrowParens": "avoid"
  }
  或
  module.exports = {
      "printWidth": 200,
      "tabWidth": 2,
      "useTabs": true,
      "semi": false,
      "singleQuote": true,
      "bracketSpacing": true,
      "arrowParens": "avoid"
  }
  

• 以上时基本配置的大概思路，具体细节需结合项目，具体进行组织配置

四、验证配置：通过 git 代码提交验证配置结果

• 开发时的项目代码如下：

• 通过 git commit 自动格式化代码过后，如下：

五、总结：

• 以上为基本配置的一个思路方向，应用在具体项目需要更精确的配置一些规则
• Vue-cli 项目的配置方式：【Eslint+prettier 实现代码 git 提交时自动格式化及修复】