代码校验及风格统一之二： typescrpt的校验方案

目前集成tslint大概有三种方案：

方案	优点	缺点
Eslint + Eslint-plugin-typescript	eslint生态繁华，兼容js项目，只需维护一份配置	缺少部分规则，需要特定的typescript版本
Eslint + Tslint	规则比较全	需要维护两份配置，elint和tslint有重叠的部分
Tslint + Tslint-eslint-rules	只需维护一份配置	不如eslint生态繁华，仍然会缺少一部分规则

最终方案： eslint + tslint

原因： 此方案最全，而且js和ts项目均可覆盖：js项目只使用eslint，ts项目使用tslint + tslint-eslint-rules。此方案对ts文件依然会缺少部分eslint规则。

tslint-eslint-rules的规则需要写出来，不写的话不会生效，参照airbnb风格。

之前我以为eslint可以兼容校验ts文件，其实是不行的，一些ts的写法eslint会报错。这种不好的地方就是需要维护两个配置文件。我个人更倾向于使用第一套方案，具体可以看这个我提的这个isuue.

而缺点解决方案是： tslint只校验ts文件，并禁用全部与eslint重复的规则。也就是说tslint只负责ts规则的校验，而js部分的校验使用eslint负责。

eslint和tslint规则

module.exports = {
  extends: ['airbnb', 'plugin:prettier/recommended'],
  parserOptions: {
    ecmaVersion: 2017,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  parser: 'babel-eslint',
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  plugins: ['react', 'jsx-a11y', 'import'],
  rules: {
    // https://stackoverflow.com/questions/44437203/how-do-i-resolve-eslint-import-no-named-as-default
    'import/no-named-as-default': "off",
    'react/jsx-filename-extension': [
      'error',
      {
        extensions: ['.js', '.jsx', 'ts', 'tsx'],
      },
    ],
    // 在写onClick事件时需要写role
    'import/no-unresolved': "off",
    'jsx-a11y/no-static-element-interactions': 'off',
    'jsx-a11y/click-events-have-key-events': 'off',
    // 除了for循环中，不能使用i++
    'no-plusplus': ['error', {allowForLoopAfterthoughts: true}],
    // 不能使用a && a()以及a ? b() : c()。
    'no-unused-expressions': [
      "error",
      {
        allowShortCircuit: true,
        allowTernary: true,
      },
    ],
    'no-void': "off", // 允许使用void
    // 除了单行的方法，其他需要加空行
    'lines-between-class-members': ["error", "always", {exceptAfterSingleLine: true}],
    "no-console": ["error", {allow: ["log"]}],
    "one-var":"off", // 不强制函数中的变量要么一起声明要么分开声明
    "no-new": "off", // 不禁止使用 new
    "radix": "off", // 不强制在parseInt()使用基数参数
    "no-bitwise": "off" // 可以使用按位运算符
  },
};
复制代码

tslint规则

{
  "extends": ["tslint:recommended", "tslint-config-prettier"],
  // 指定自己的目录
  "rulesDirectory": ["../node_modules/tslint-eslint-rules/dist/rules"],
  "rules": {
    // ts规则写在这里
    "no-any": false,
    "only-arrow-functions": false,
    "member-ordering": false,
    "ordered-imports": false,
    "no-namespace": false,
    "interface-name": [true, "never-prefix"],
    "object-literal-sort-keys": false,
    "no-var-requires": false,

    // tslint提供的js相关规则写在这里
    "no-console": [true, "warn", "error"],
    "no-shadowed-variable": false,
    "one-variable-per-declaration": false,
    "no-unused-expression": [true, "allow-fast-null-checks"],
    "radix": false,
    "no-bitwise": false,
    // tslint-eslint-rules插件补充的eslint规则,此规则参照airbnb风格
    "no-constant-condition": {
      "severity": "warning"
    },
    "no-control-regex": true,
    "no-duplicate-case": true,
    "no-empty-character-class": true,
    "no-ex-assign": true,
    "no-extra-boolean-cast": true,
    "no-extra-semi": true,
    "no-invalid-regexp": true,
    "no-regex-spaces": true,
    "no-unexpected-multiline": true,
    "valid-jsdoc": false,
    "valid-typeof": true,
    "ter-no-proto": true,
    "ter-no-script-url": true,
    "ter-no-self-compare": true,
    "handle-callback-err": false,
    "ter-arrow-body-style": [
      true,
      "as-needed",
      {
        "requireReturnForObjectLiteral": false
      }
    ],
    "ter-prefer-arrow-callback": [
      true,
      {
        "allowNamedFunctions": false,
        "allowUnboundThis": true
      }
    ]
  }
}
复制代码

注： tslint规则可以使用tslint-microsoft-contrib，具体配置就不贴了

package.json中的相关配置更新为：

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{tsx,ts}": [
      "prettier --config ./common/.prettierrc --write",
      "tslint  -c ./common/tslint.json",
      "git add"
    ],
    "src/**/*.{jsx,js,json,css}": [
      "prettier --config ./common/.prettierrc --write",
      "eslint  -c ./common/.eslintrc.js --fix",
      "git add"
    ]
  },
复制代码

需要安装的包

安装eslint

npm i -D eslint babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
复制代码

安装prettier

npm install -D prettier eslint-plugin-prettier eslint-config-prettier
复制代码

安装husky，lint-staged

npm i -D husky lint-staged pretty-quick
复制代码

安装tslint，tslint-config-prettier，tslint-eslint-rules

npm i -D tslint tslint-config-prettier tslint-eslint-rules
复制代码

• 先删除package.json中关于eslint，tslint有关的包
• prettier的配置参考第一篇