TypeScript实战-25-ESLint代码检测

一,前言

使用Vue和React开发时,通常使用ESLint做代码检测
TypeScript有自己的检查工具TSLint
但由于ESLint在Vue和React的影响及更好的性能
TypeScript也决定使用ESLint做TS的代码检测工具

---

二,ESLint

TypeScript + ESLint:

TypeScript编译器主要做两件事,即类型检查和语言转换
	1,类型检查
	2,语言转换
	也会对语法错误做一些检查
而ESLint除了检查语法,还能够保持代码风格统一

问题:ESLint不能直接检查TS语法

ESLint不能直接检查TS语法,因为TypeScript和ESLint两种语法树AST是不兼容的
(之前的TSLint是基于TS抽象语法树工作的,不会有兼容性问题,但不能被重用)

解决:typescript-eslint插件

引入typescript-eslint插件解决兼容性问题
为ESLint提供解析TS代码的编译器
将TS语法树转换为ESLint语法树

---

三,ESLint配置

package.json:

"scripts": {
	...
    "lint": "eslint src --ext .js,.ts" // 自动检查js,ts
    ...
},
"devDependencies": {
	...
    "@typescript-eslint/eslint-plugin": "^1.10.2",// 识别TS语法
    "@typescript-eslint/parser": "^1.10.2",	// TS解析器
    "eslint": "^5.16.0",	// eslint
    ...
  },

.eslintrc.json:

{
  "parser": "@typescript-eslint/parser",	// 指定解析器
  "plugins": ["@typescript-eslint"],	// 指定插件
  "parserOptions": {
      "project": "./tsconfig.json"	// 类型信息
  },
  "extends": [
    "plugin:@typescript-eslint/recommended"	// 官方推荐规则
  ],
  "rules": {
    "@typescript-eslint/no-inferrable-types": "off" // 关闭类型推断
  }
}

执行:

npm run lint

---

四,使用ESLint插件

setting.json:

{
    "files.autoSave": "onWindowChange",
    "editor.quickSuggestions": {
        "strings": true
    },
    "window.zoomLevel": 0,
    "typescript.updateImportsOnFileMove.enabled": "never",
    "typescript.locale": "zh-CN",
    // add...
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ]
}

---

五,babel-eslint

babel-eslint与typescript-eslint区别:

由于Babel抛弃了TypeScript,所以Babel-eslint不支持类型检查,支持TS没有的额外语法检查

typescript-eslint基于typescript-eslint的AST,支持创建基于类型信息的规则(tsconfig.json)

如果使用Babel体系建议使用babel-eslint,否则可以使用typescript-eslint