TypeScript中使用ESlint

发表于 | 更新于 | 分类于

TypeScript 已经不再维护 TSlint，转投 ESlint，所以代码检查也切到 ESlint。

安装依赖

1
yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

添加.eslintrc.js 配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
module.exports = {
  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
  extends: [
    // 'plugin:react/recommended',  // Uses the recommended rules from @eslint-plugin-react
    // 'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from @typescript-eslint/eslint-plugin
  ],
  parserOptions: {
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: "module", // Allows for the use of imports
    ecmaFeatures: {
      // 不允许 return 语句出现在 global 环境下
      globalReturn: false,
      // 开启全局 script 模式
      impliedStrict: true,
      jsx: true // Allows for the parsing of JSX
    }
  },
  env: {
    browser: true,
    node: true,
    commonjs: true,
    es6: true
  },
  // 以当前目录为根目录，不再向上查找 .eslintrc.js
  root: true,
  //指定你所要使用的全局变量，true代表允许重写、false代表不允许重写
  globals: {
    describe: false,
    it: false,
    expect: false
  },
  rules: {
    //   定义规则
  },
  settings: {
    react: {
      version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
    }
  }
};

启用保存时候自动修复（VScode）

1
2
3
4
5
6
7
"eslint.autoFixOnSave":  true,
"eslint.validate":  [
  "javascript",
  "javascriptreact",
  {"language":  "typescript",  "autoFix":  true  },
  {"language":  "typescriptreact",  "autoFix":  true  }
],

如果无效的时候，检查下是否安装eslint-plugin-html