使用Babel eslint解析进行打字稿转换 [英] Typescript casting with babel eslint parsing

问题描述

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

我已修复了大多数皮棉错误，但 babel-eslint 因为解析器会抛出很多这样的错误:

  23:32错误解析错误:意外的令牌，预期为，".21 |返回state.set(22 |"callsInProgress"，>23 |(state.callsInProgress为任意值).filter(i => i！== action.payload)|^24 |);25 |}26 |案例操作.API_RESET:{ 

我认为这是因为 babel 不能像任何那样理解的类型转换.

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

我的babel配置如下:

  module.exports = {预设:['@ babel/preset-env'，'@ babel/preset-react'，'@ babel/preset-typescript']，插件:['@ babel/plugin-proposal-class-properties'，'@ babel/plugin-transform-runtime'，'@ babel/plugin-transform-typescript']}; 

解决方案

我自己有一个正在使用 babel ， eslint 和 typescript 的项目

我建议您停止使用 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 = {根:正确，解析器:"@ typescript-eslint/parser"，插件:['@ typescript-eslint'，'eslint-plugin-node'，]，扩展:['eslint:recommended'，'插件:@ typescript-eslint/推荐'，]，parserOptions:{"ecmaVersion":2020}，规则:{逗号分隔":[错误"，{"arrays":"always-multiline"，"objects":"always-multiline"，"imports":"always-multiline"，"exports":"always-multiline"，"functions":"always-multiline"，}]，}，信封:{es6:是的，浏览器:是的，节点:true，}，parserOptions:{项目:"./tsconfig.json"，tsconfigRootDir:__dirname，}，全球人员:{"global":否，"Promise":否，}，}; 

---

注意:我不知道 eslint-babel 是否可以与 @ typescript-eslint 兼容，也许可以，并且您可以两者都使用.

I am getting some parsing errors after introducing ESLint into an existing Typescript codebase.

I have fixed most of the lint errors but babel-eslint as a parser throws quite a few errors like this:

  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.

How do i get this through the parser?

My babel config is as follows:

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.

I recommend you to stop using eslint-babel and use @typescript-eslint instead/

typescript-eslint is a project that has been started by the developpers of Tslint (now deprecated). It lint typescript code perfectly.

Here is an example of my eslint installed npm packages :

"@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 :

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.

这篇关于使用Babel eslint解析进行打字稿转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！