Vue + TypeScript 项目放弃 TSLint，拥抱 ESLint

背景

咱们的一些项目中用到了 TSLint 来规范咱们的 TypeScript 代码，甚至没有 Lint 工具来辅助开发，咱们这里但愿用 ESLint 来取代 TSLint，主要缘由是 TSLint 已经被官方放弃，因此咱们采用 ESLint，并结合 prettier 来规范咱们的代码和统一团队风格。

---

1、安装 ESLint，删除 TSLint

因为咱们的项目可能不大同样，有的项目是没有任何 lint 工具，有的是 vue-cli 自带安装的 ESLint 或者 TSLint，这里你们参考 package.json 文件，自行选择。我如今以我手头上的 shopintar 项目为例，仅有 TSLint。

• 一、首先删除 tslint.json 配置文件

• 二、安装相关依赖

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

  @typescript-eslint/parser: ESLint 专门解析 TypeScript 的解析器
  @typescript-eslint/eslint-plugin: 内置各类解析 TypeScript rules 插件
  

• 三、新建 .eslintrc.js 文件

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  parser: 'vue-eslint-parser',
  extends: [
    'plugin:vue/recommended',
    'plugin:prettier/recommended',
    'prettier/@typescript-eslint',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['vue', '@typescript-eslint'],
  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    ecmaVersion: 2018,
  },
  rules: {
    'prettier/prettier': 'error',
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'space-before-function-paren': [2, 'never'], // function 的圆括号以前是否使用空格
    'array-bracket-spacing': 2,
    'no-var': 2,
    'no-eval': 2,
    'arrow-spacing': 2,
    'block-spacing': 2,
    'key-spacing': 2,
    'brace-style': 2,
    camelcase: 2,
    'comma-dangle': [2, 'always-multiline'],
    eqeqeq: [2, 'always', { null: 'ignore' }],
    'object-curly-spacing': [2, 'always'],
    'nonblock-statement-body-position': 2, // if 语句后必须跟大括号
    
    // 设置typescript-eslint规则
    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin/docs/rules
    '@typescript-eslint/member-delimiter-style': [
      2,
      {
        multiline: {
          delimiter: 'none', // 'none' or 'semi' or 'comma'
          requireLast: true,
        },
        singleline: {
          delimiter: 'semi', // 'semi' or 'comma'
          requireLast: false,
        },
      },
    ],
    '@typescript-eslint/interface-name-prefix': [2, { prefixWithI: 'always' }],
    '@typescript-eslint/explicit-function-return-type': ['off'],
    '@typescript-eslint/no-explicit-any': ["off"] // 先忽略，可是尽可能少用 any
  },
}

复制代码

注意: parser: 'vue-eslint-parser'，这里要区分和 parserOptions.parser 的区别，vue-eslint-parser 是解析 .vue 文件，而 parserOptions.parser：@typescript-eslint/parser 是咱们自定义来解析 TypeScript 的，不然就没法正确的检验 TypeScript。相关解释

2、安装 prettier

prettier 用来作格式化工具配合咱们的 ESLint 能够更大的发挥做用，首先安装相关依赖：

npm i -g prettier eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier: 这个插件的做用是当 ESLint 和 prettier 配置冲突时优先 prettier
eslint-plugin-prettier: 将 prettier 做为 ESLint 规范来使用

接着按需配置 prettier，新建 .prettierrc 文件

{
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "trailingComma": "all",
  "printWidth": 120
}
复制代码

而后在 .eslintrc.js 文件中引入 prettier 配置，在 extends 数组中添加 prettier/@typescript-eslint 和 plugin:prettier/recommended，到这里 ESLint 和 prettier 相关配置已经完成，接下来咱们利用一些工具帮咱们在 git commit 阶段完成代码格式化和校验工做。

3、使用 husky & lint-staged 自动完成校验与格式化

• husky 是控制代码提交的钩子，在代码被提交到Git仓库以前，咱们能够在这里作一些预检查或者格式化工做。
• lint-staged是一个前端文件过滤的工具（仅仅是文件过滤器），能够对文件系统进行过滤，使得每次提交没必要对全部文件进行校验

1. 安装husky 和 lint-staged

npm install husky lint-staged -D
复制代码

2. 修改 package.json，增长配置：

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{ts,vue}": [
      "eslint --fix", "git add"
    ]
  }
复制代码

上面配置，每次它只会在你本地 commit 以前，校验你提交的内容是否符合你本地配置的 eslint规则，若是符合规则，则会提交成功。若是不符合它会自动执行 eslint —fix 尝试帮你自动修复，若是修复成功则会帮你把修复好的代码提交，若是失败，则会提示你错误，让你修好这个错误以后才能容许你提交代码。

拓展： 除了在package.json中配置，也能够在.lintstagedrc、lint-staged.config.js 文件中，lint-staged 的经常使用选项除了liners 以外，还有 ignore 、concurrent 等，具体参考文档：

{
  "lint-staged": {
    "linters": {
      "*.{js,scss}": ["some command", "git add"]
    },
    "ignore": ["**/dist/*.min.js"]
  }
}
复制代码

4、使用 Commitlint

Commitlint 能够对代码提交的信息进行规范和校验，方便 团队协做和快速定位问题

1. 安装

npm install --save-dev @commitlint/config-conventional @commitlint/cli

// 生成配置文件commitlint.config.js，固然也能够是 .commitlintrc.js
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

复制代码

2. 配置

在husky的配置加入CommitlIint配置，”commit-msg": "commitlint -e $HUSKY_GIT_PARAMS”

husky: {
    hooks: {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
    }
  },
复制代码

3. 定制提交规范

• build: 影响构建系统或外部依赖关系的更改（示例范围：gulp、broccoli、npm）
• ci: 对ci配置文件和脚本的更改（示例范围：Circle、BrowserStack、SauceLabs）
• docs: 仅文档更改
• feat: 新功能（feature）
• fix: 修补bug
• perf: 提升性能的代码更改
• refactor: 重构（既不修复错误也不添加功能的代码更改）
• style: 样式修改，不影响代码含义的更改
• test: 增长测试

例如：

git commit -m 'feat: 增长 xxx 功能'
git commit -m 'fix: 修复 xxx 功能'
复制代码

Subject

Subject是 commit 目的的简短描述，能够作一些配置，如最大长度限制。

commitlint.config.js文件配置

rule配置说明 : rule由name和配置数组组成，如：’name:[0, ‘always’, 72]’，数组中第一位为level，可选0,1,2，0为disable，1为warning，2为error，第二位为应用与否，可选always|never，第三位该rule的值。具体配置例子以下：

module.exports = {
  extends: [
    '@commitlint/config-conventional',
  ],
  rules: {
    'type-enum': [2, 'always', [
      'build', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'style', 'revert',
    ]],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72],
  },
}
复制代码

总结

经过以上几步咱们能够在 commit 以前自动帮咱们完成格式化和校验的工做，可是值得注意的是，这里的格式化和校验并非全局的，而是咱们当前提交的内容，若是咱们想要格式化全局代码或者校验全局代码，这里咱们能够在 package.json 中的 script 命令中写个脚本须要的时候手动执行一下，而不是把它放在 pre-commit 钩子上每次 commit 都执行，耗费时间。

"format": "prettier --write \"src/**/*.ts\" \"src/**/*.vue\"",

"lint": "eslint --fix \"src/**/*.ts\" \"src/**/*.vue\""
复制代码