Блог

Я уже некоторое время пытаюсь заставить @babel/plugin-proposal-class-properties плагин нормально работать с @babel/eslint-parser и eslint без успеха.

Это мой .eslintrc.js :

 ...
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaVersion": 11,
    "requireConfigFile": false,
  },
  "plugins": [
    "@babel",
  ],
...
  

И это связанные установленные пакеты:

  -- @babel/core@7.11.1
 -- @babel/eslint-parser@7.11.3
 -- @babel/eslint-plugin@7.11.3
 -- @babel/plugin-proposal-class-properties@7.10.4
 -- eslint@7.7.0
  

При такой конфигурации ошибка ESLint с этим сообщением:

 Parsing error: egexample.js: Support for the experimental syntax 'classPrivateProperties' isn't currently enabled (xx:yy): (Fatal)
  

Но если я добавлю @babel/plugin-proposal-class-properties в plugins в .eslintrc.js вот так:

   "plugins": [
    "@babel",
    "@babel/plugin-proposal-class-properties",
  ],
  

Я получаю эту ошибку:

 Error while running ESLint: Failed to load plugin '@babel/plugin-proposal-class-properties' declared in '.eslintrc.js': Cannot find module '@babel/eslint-plugin-plugin-proposal-class-properties'.
  

Похоже, что это неправильный способ объявления плагинов для @babel/eslint-parser в .eslintrc.js . Тем не менее, я подозреваю, что это возможно благодаря этой цитате здесь:

@babel/eslint-parser также поддерживается применение конфигурации Babel через вашу конфигурацию ESLint.

Итак, мой вопрос:

Действительно ли возможно объявить плагины babel в .eslintrc ? Если да, то как именно?

На самом деле это проще, чем я думал…

Итак, получается, что, поскольку @babel/plugin-proposal-class-properties это плагин babel, он должен быть объявлен в plugins свойстве конфигурации babel. Согласно документации @babel/eslint-parser , они могут быть переданы с babelOptions свойством.

Поэтому это действительно так просто, как это:

 ...
  "parserOptions": {
    ...
    "babelOptions": {
      "plugins": [
        "@babel/plugin-proposal-class-properties",
        ...
      ],
    },
  },
  "plugins": [
    "@babel",
  ],
...
  

При использовании @babel/eslint-parser в качестве eslintrc parser я тоже столкнулся с этим вопросом.

Точно так же, как этот вопрос.

Например, eslintrc используемый eslint node api в глобальном cli, и cli предоставляет команду A .

После перейдите в каталог B , выполнив команду A .Это process.cwd() каталог B , но @babel/xxx deps находится в node_modules командной строки. babel/core Не удается найти плагины в B .

 Parsing error: Cannot find module '@babel/plugin-proposal-decorators'nRequire stack:
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/core/lib/config/files/plugins.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/core/lib/config/files/index.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/core/lib/index.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/eslint-parser/lib/worker/babel-core.cjs
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/eslint-parser/lib/worker/handle-message.cjs
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/eslint-parser/lib/client.cjs
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@babel/eslint-parser/lib/index.cjs
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@eslint/eslintrc/lib/config-array-factory.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/@eslint/eslintrc/lib/index.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/eslint/lib/cli-engine/cli-engine.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/eslint/lib/cli-engine/index.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/eslint/lib/api.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/node_modules/test-a-es-checker/dist/index.js
- /Users/a1/.nvm/versions/node/v14.16.1/lib/node_modules/test-a-cli/dist/index.js

  

Я решил эту проблему, предоставив cwd для babelOption в eslintrc.

 module.exports = {
  ...
  parser: '@babel/eslint-parser',
  babelOptions: {
    cwd: __dirname, // The working directory that all paths in the programmatic options will be resolved relative to.
    presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
    plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      ['@babel/plugin-proposal-class-properties', { loose: true }],
    ],
  },
  ...
};