[英]Typescript casting with babel eslint parsing
I am getting some parsing errors after introducing ESLint into an existing Typescript codebase.在将 ESLint 引入现有的 Typescript 代码库后,我遇到了一些解析错误。
I have fixed most of the lint errors but babel-eslint
as a parser throws quite a few errors like this:我已经修复了大部分 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: {
I assume this is because babel
does not understand the typecasting as any
.我认为这是因为
babel
不理解类型转换as any
。
How do i get this through the parser?我如何通过解析器得到这个?
My babel config is as follows:我的 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']
};
Having a project that is using babel , eslint and typescript myself.自己有一个使用babel 、 eslint和typescript的项目。
I recommend you to stop using eslint-babel
and use @typescript-eslint
instead/我建议你停止使用
eslint-babel
并改用@typescript-eslint
/
typescript-eslint is a project that has been started by the developpers of Tslint (now deprecated) . typescript-eslint是一个由 Tslint (现已弃用)的开发者启动的项目。 It lint typescript code perfectly.
它完美地去除了 typescript 代码。
Here is an example of my eslint installed npm packages:这是我的 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",
Example of my .eslintrc
:我的
.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,
},
};
NOTE : I don't know if eslint-babel
could be compatible with @typescript-eslint
, maybe it does and you can use both.注意:我不知道
eslint-babel
是否可以与@typescript-eslint
兼容,也许可以,您可以同时使用两者。
I finally agree with the accepted answer, after experienced the upgrade from JavaScript to TypeScript.在经历了从 JavaScript 升级到 TypeScript 之后,我终于同意接受的答案。 Post this answer to provide some additional key point.
发布此答案以提供一些额外的关键点。
@babel/eslint-parser is a parser that allows ESLint to run on source code that is transformed by Babel.
@babel/eslint-parser 是一个解析器,它允许 ESLint 在由 Babel 转换的源代码上运行。
since @typescript-eslint uses TypeScript under the hood, its rules can be made type-aware, which is something Babel doesn't have the ability to do.
因为@typescript-eslint 在底层使用了 TypeScript,所以它的规则可以是类型感知的,这是 Babel 无法做到的。 This I think is a must-have feature on TS.
这个我觉得是TS必备的功能。
See doc: https://github.com/babel/babel/tree/main/eslint/babel-eslint-parser#typescript见文档: https://github.com/babel/babel/tree/main/eslint/babel-eslint-parser#typescript
So basically, if your project is a pure TS project, just use @typescript-eslint
所以基本上,如果你的项目是纯 TS 项目,只需使用
@typescript-eslint
{
"plugins": ["@typescript-eslint"],
"parser": "@typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
]
}
If your project has both TS and JS, you can use @babel/eslint-parser
as well如果你的项目既有 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"]
}
]
}
Just understand that using @babel/eslint-parser
instead of the default parser esprima
is because babel can lint on some experimental features (not much)只需了解使用
@babel/eslint-parser
而不是默认解析器esprima
是因为 babel 可以对一些实验性功能进行 lint(不多)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.