Приведение машинописного текста с помощью синтаксического анализа babel eslint

Я получаю некоторые ошибки синтаксического анализа после введения ESLint в существующую кодовую базу Typescript.

Я исправил большинство ошибок с линтами, но 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']
};
Источник

2 ответа

Решение

У меня есть проект, использующий babel, eslint и typescript.

Я рекомендую вам прекратить использовать eslint-babel и использовать @typescript-eslint вместо/

typescript-eslint - это проект, который был запущен разработчиками Tslint (теперь не рекомендуется). Он отлично пишет машинописный код.

Вот пример моих пакетов npm, установленных в eslint:

"@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. Опубликуйте этот ответ, чтобы указать некоторые дополнительные ключевые моменты.

  1. @ babel / eslint-parser (ранее babel-eslint) может анализировать TS и позволить ESLint работать с TS.

@ babel / eslint-parser - это парсер, который позволяет ESLint работать с исходным кодом, преобразованным Babel.

  1. @ 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, вы также можете использовать

      {
  "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 может использовать некоторые экспериментальные функции (не очень)

Источник
Другие вопросы по тегам