带有 babel eslint 解析的打字稿转换

Question

在将 ESLint 引入现有的 Typescript 代码库后，我遇到了一些解析错误。

我已经修复了大多数 lint 错误，但babel-eslint作为解析器会抛出很多这样的错误：

23:32  error  Parsing error: Unexpected token, expected ","
21 |       return state.set(
22 |         'callsInProgress',
> 23 |         (state.callsInProgress as any).filter(i => i !== action.payload)
|                                ^
24 |       );
25 |     }
26 |     case actions.API_RESET: {

我认为这是因为babel不了解类型转换as any。

如何通过解析器获取此信息？

我的 babel 配置如下：

module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime', '@babel/plugin-transform-typescript']
};

Answer 1

我自己有一个使用babel、eslint和打字稿的项目。

我建议您停止使用eslint-babel，改用@typescript-eslint/

Typescript-eslint 是一个由 Tslint 的开发者启动的项目(现已弃用(。它完美地检查了打字稿代码。

这是我的eslint安装的npm包的示例：

"@typescript-eslint/eslint-plugin": "^2.34.0",
"@typescript-eslint/parser": "^2.34.0",
"eslint": "^5.16.0",
"eslint-plugin-import": "^2.21.2",
"eslint-plugin-jsx-a11y": "^6.3.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-react": "^7.20.0",

我的.eslintrc示例：

module.exports = {
root: true,
parser: '@typescript-eslint/parser',
plugins: [
'@typescript-eslint',
'eslint-plugin-node',
],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
],
parserOptions: {
"ecmaVersion": 2020
},
rules: {
"comma-dangle": ["error", {
"arrays": "always-multiline",
"objects": "always-multiline",
"imports": "always-multiline",
"exports": "always-multiline",
"functions": "always-multiline",
}],
},
env: {
es6: true,
browser: true,
node: true,
},
parserOptions: {
project: './tsconfig.json',
tsconfigRootDir: __dirname,
},
globals: {
"global": false,
"Promise": false,
},
};

---

注意：我不知道eslint-babel是否可以与@typescript-eslint兼容，也许可以，您可以同时使用两者。

Answer 2

在经历了从JavaScript到TypeScript的升级之后，我终于同意了公认的答案。 发布此答案以提供一些额外的关键点。

1. @babel/eslint-parser(以前称为babel-eslint(可以解析TS，并让ESLint在TS上工作。

@babel/eslint-parser 是一个允许 ESLint 在源代码上运行的解析器 由 Babel 转换的代码。

2. @babel/eslint-parser 不能也无法检查 TypeScript 上的类型问题

由于@typescript-eslint在引擎盖下使用TypeScript，因此其规则可以 成为类型感知者，这是 Babel 没有的能力 要做。 我认为这是 TS 上的必备功能。

查看文档：https://github.com/babel/babel/tree/main/eslint/babel-eslint-parser#typescript

所以基本上，如果你的项目是一个纯 TS 项目，只需使用@typescript-eslint

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

如果您的项目同时具有 TS 和 JS，您也可以使用@babel/eslint-parser

{
"parser": "@babel/eslint-parser",
"extends": ["airbnb", "plugin:prettier/recommended"],
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"jest": true
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
},
"rules": {
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
]
},
"overrides": [
{
"files": ["*.{ts,tsx}"],
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": ["plugin:@typescript-eslint/recommended"]
}
]
}

只要明白使用@babel/eslint-parser而不是默认的解析器esprima是因为 babel 可以在一些实验性功能上 lint (不多(