更漂亮，eslint - classProperties 解析器插件错误

Posted 2023-02-22

【中文标题】更漂亮，eslint - classProperties 解析器插件错误

【英文标题】：Prettier, eslint - classProperties parser plugin error

【发布时间】：2021-03-24 20:06:18

【问题描述】：

我正在努力让我的 prettier 正常工作。当我启动format-check（在js、ts 文件上prettier --check）时，尽管有以下配置，但在许多类文件（甚至是具有一个属性和getter 的简单文件）中都会出现SyntaxError: This experimental syntax requires enabling the parser plugin: 'classProperties' 错误。当我将解析器从默认值更改为.prettierrc.json 中的其他内容时，然后 "@trivago/prettier-plugin-sort-imports" 插件不起作用。我想要配置，它不会给我提到的错误并允许排序插件工作。也许我在 eslint-prettier 线路上有一些冲突？

主目录中package.json 的一部分

"devDependencies": 
    "@babel/plugin-proposal-class-properties": "7.12.1",
    "@types/react": "16.9.46",
    "@types/react-dom": "16.9.8",
    "@types/styled-components": "5.1.2",
    "@typescript-eslint/eslint-plugin": "2.34.0",
    "@typescript-eslint/parser": "2.34.0",
    "@trivago/prettier-plugin-sort-imports": "1.3.0",
    "eslint": "6.8.0",
    "eslint-config-airbnb": "18.2.0",
    "eslint-config-airbnb-base": "14.2.0",
    "eslint-config-prettier": "6.11.0",
    "eslint-plugin-eslint-comments": "3.2.0",
    "eslint-plugin-eslint-plugin": "2.3.0",
    "eslint-plugin-jest": "23.20.0",
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-prettier": "3.1.4",
    "eslint-plugin-react": "7.20.6",
    "eslint-plugin-react-hooks": "4.1.0",
    "jest-styled-components": "7.0.3",
    "lerna": "3.22.1",
    "prettier": "2.2.1"
  ,
  "scripts": 
    "format": "prettier  --write \"**/*.ts,tsx,js,jsx\"",
    "format-check": "prettier --check \"**/*.ts,tsx,js,jsx\"",
    ...
  ,
  "babel": 
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react",
      
        "plugins": [
          "@babel/plugin-proposal-class-properties",
          
            "loose": true
          
        ]
      
    ]
  

.eslintrc.js 在主目录中

module.exports = 
  root: true,
  env: 
    es6: true,
    node: true,
    jest: true,
  ,
  plugins: ['@typescript-eslint'],
  extends: [
    'airbnb',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:jsx-a11y/strict',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'react-app',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: 
    ecmaVersion: 2017, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module', // Allows for the use of imports
    ecmaFeatures: 
      jsx: true, // Allows for the parsing of JSX
    ,
    project: ['./projects/*/tsconfig.json'],
  ,
  settings: 
    react: 
      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
    ,
  ,
;

.prettierrc.json 在主目录中

  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 2,
  "arrowParens": "always",
  "importOrder": ["^[a-zA-Z](.*)$", "^@[a-zA-Z](.*)$$", "^[./]"],
  "importOrderSeparation": true

【问题讨论】：

我有类似的问题，但没有任何解决方案。如果你找到请分享一个

【参考方案1】：

如果将以下内容添加到.prettierrc.json 以启用所需的解析器插件，它似乎可以正常工作：

"experimentalBabelParserPluginsList": ["classProperties", "jsx", "typescript"]

这是使用prettier 2.3.2 和@trivago/prettier-plugin-sort-imports 2.0.4 测试的。

完整示例.prettierrc.json:

  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 2,
  "arrowParens": "always",
  "importOrder": ["^[a-zA-Z](.*)$", "^@[a-zA-Z](.*)$$", "^[./]"],
  "importOrderSeparation": true,
  "experimentalBabelParserPluginsList": ["classProperties", "jsx", "typescript"]