【typescript】eslint代码风格工具入门配置

前言

• 我在网上翻到TSLint不维护了，eslint里这么写的：

The ESLint team will no longer be maintaining typescript-eslint-parser
The repository will be archived as of today
There will be no further releases of typescript-eslint-parser on npm
Anyone using typescript-eslint-parser should use @typescript-eslint/parser instead
Those interested in how TypeScript support is coming along should follow the typescript-eslint repository

• 所以ts需要去找typescript-eslint仓库。

官网

• typescript-eslint
• 这个官网的介绍说了，eslint和typescript的ast不兼容，造成的原因是这2个项目的时间与进度不一样。而以前的TSLint是基于typescript的ast写的，现在改成typescript-eslint就是基于eslint的ast写的。
• 网上配置乱七八糟啥都有，把我给坑死了，还好我配这玩意前git记录了下。本来以为这玩意不会影响代码，配不好把配置文件删了就完了。没想到开着自动修复然后逛一圈代码就把我代码给修崩了。。。。后来发现原来是大家系统不一样导致抄配置格式化成对应系统的字符给抄崩了。
• 所以怎么配最好还是按官方推荐来。
• typescript-eslint-plugin官网

配置

• 官方入门配置：官方入门配置来源。

module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    plugins: [
        '@typescript-eslint',
    ],
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:@typescript-eslint/recommended-requiring-type-checking'
    ],
    parserOptions: {
        tsconfigRootDir: 'src',
        project: ['../tsconfig.json'],
    },
    rules: {
    }
};

• 其中最下面那个推荐类型检查扩展说可能有点性能问题。但也推荐打开它。关于这个配置性能问题的官网来源。
• 但是，目前这个配置不支持JSX，其他文件使用React报错解释。
• 所以还需要安装eslint-plugin-react这个插件，配置这样：

module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    plugins: [
        '@typescript-eslint',
    ],
    extends: [
        'eslint:recommended',
        "plugin:react/recommended",
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:@typescript-eslint/recommended-requiring-type-checking'
    ],
    parserOptions: {
        tsconfigRootDir: 'src',
        project: ['../tsconfig.json'],
    },
    rules: {
        '@typescript-eslint/explicit-function-return-type': 'off',
        '@typescript-eslint/no-explicit-any': 'off',
        '@typescript-eslint/no-use-before-define': 'off',
        'react/display-name': 'off',
        'react/prop-types': 'off'
    }
};

• 下面的rules是不喜欢哪个规则就可以off掉，也有些别的配置，需要查专门那条规则。
• 另外还有些自己配的规则：

   "indent": ["error", 4],
   "max-lines": ["error", { "max": 300, "skipComments": true }]

• 根据喜好来，可以参照官网说明。
• 这样用起来就非常舒服了。
• 还有package.json命令，一般就直接执行就行。更多命令可以-h或者看官网

"eslint": "eslint --ext .tsx,.ts --fix ./src"

关于prettier联合使用的问题

• 官方不建议使用eslint-plugin-prettier插件，官方解释在这。意思是这样比较浪费时间，建议直接使用prettier命令--list-different来检测是否格式化过代码。

$ yarn prettier --list-different \"./**/*.{ts,js,json,md}\"

• 我个人觉得eslint就别管风格上的那些，代码好看教给prettier去做，配置个prettierrc，把怎么好看的配置放里面，在package.json里配置下脚本命令：

  "prettier": "prettier --config ./.prettierrc.js --write ./src/**/*.tsx"

• 具体配置可以参考官网。

• 如果实在想用插件这么配：

  module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    plugins: [
      '@typescript-eslint',
    ],
    extends: [
      'eslint:recommended',
      'plugin:@typescript-eslint/eslint-recommended',
      'plugin:@typescript-eslint/recommended',
+     'prettier/@typescript-eslint',
    ],
  };

• 这个配置是前面那个官方入门配置里抄来的。还建议最好使用eslint-config-prettier让这2者不冲突。

关于与vscode使用

• 我百度看别人还建个.vscode目录里面写配置什么的，虽然这个方法可行，但会与自己配置冲突。因为现在vscode根本不需要你专门建个目录写个配置文件了。
• 在vscode插件里安装eslint插件后，直接点eslint插件齿轮，把那些配置打开就完事了。
• 你正在编辑哪个文件就会自动把eslint报错地方显示出来。
• 如果未自动使用eslint的，建立.vscode文件夹，里面建个settings.json。输入以下配置：

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "typescriptreact",
            "autoFix": true
        }
    ]
}

关于是否有必要用eslint

• 我一开始觉得这玩意跟typescript类型检查好像有点像，后来感觉像是eslint又扩展了typescript的检查。很多报错是typescript检查不出来的。不管个人还是团队都建议用起来。