[英]Typescript casting with babel eslint parsing
在將 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']
};
自己有一個使用babel 、 eslint和typescript的項目。
我建議你停止使用eslint-babel
並改用@typescript-eslint
/
typescript-eslint是一個由 Tslint (現已棄用)的開發者啟動的項目。 它完美地去除了 typescript 代碼。
這是我的 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
兼容,也許可以,您可以同時使用兩者。
在經歷了從 JavaScript 升級到 TypeScript 之后,我終於同意接受的答案。 發布此答案以提供一些額外的關鍵點。
@babel/eslint-parser 是一個解析器,它允許 ESLint 在由 Babel 轉換的源代碼上運行。
因為@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(不多)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.