VScode下使用ESLint检查typescript代码_plugin:@typescript-eslint/recommended

初始化项目：

npm init --y

全局或本地安装typescript：

npm install typescript -g

创建tsconfig.json文件：

tsc --init

本地安装eslint：

npm install eslint --save-dev

安装eslint之后，新建并配置.eslintrc.json（不是.eslintrc.js）文件。recommonded表示使用默认推荐的检查规则。

{
    "extends": [
        "eslint:recommended"
    ]
}

安装@typescript-eslint/parser，自定义的解析器，用于替代ESLint默认的解析器，结合了typescript-estree，帮助eslint检查typescript代码。

npm install @typescript-eslint/parser --save-dev

此处需要考虑typescript-eslint/parser与typescript版本的兼容性。

在eslintrc.文件中添加parser属性声明：

{
    "parser": "@typescript-eslint/parser",
    "extends": [
        "eslint:recommended"
    ]
}

安装@typescript-eslint/eslint-plugin，帮助应用typescript的检查规则

npm i @typescript-eslint/eslint-plugin --save-dev

在eslintrc.文件中添加plugins属性声明以及extends中添加plugin的两项属性值

{
    "parser": "@typescript-eslint/parser",
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "plugins": ["@typescript-eslint"]
}

最后补充其他需要的配置声明。

parserOptions用于指定你想要支持的 JavaScript 语言选项，比如ECMAScript的版本，文件类型等等。env包含了代码中可以使用的全局变量，例如包含了browser才可以使用console。rules是最基本的功能，可以添加或者修改检查规则。

{
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint"],
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "env": {
        "node": true,
        "browser": true,
        "commonjs": true,
        "es6": true,
        "jquery": true
    },
    "rules": {
        "linebreak-style": ["error", "windows"],
        "no-console": 0
    }
}

VScode配置文件中添加对.ts文件的自动检测：

{
      "language": "typescript",
      "autoFix": true
}

一定要注意各版本兼容性，package.json：

{
  "name": "ts-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.19.0",
    "@typescript-eslint/parser": "^2.19.0",
    "eslint": "^6.8.0",
    "typescript": "^2.9.2"
  }
}

修改.eslintrc.json中的“outDir”后一定要在后面添加：

"include": [
    "src/**/*"
],
"exclude": [
    "node_modules"
]

否则会报错！