[英]Prettier, eslint - classProperties parser plugin error
I'm struggling to make my prettier works correctly.我正在努力让我更漂亮的作品正常工作。 When I launch format-check
( prettier --check
on js,ts files) it gives me SyntaxError: This experimental syntax requires enabling the parser plugin: 'classProperties'
errors in many class files (even simple ones with one property and getter) despite below configuration.当我启动format-check
( prettier --check
on js,ts 文件)时,它给了我SyntaxError: This experimental syntax requires enabling the parser plugin: 'classProperties'
在许多 class 文件中的错误(即使是具有一个属性和吸气剂的简单文件)尽管下面的配置。 When I change parser from default into something else in .prettierrc.json
, then "@trivago/prettier-plugin-sort-imports"
plugin doesn't work.当我将解析器从默认更改为.prettierrc.json
中的其他内容时, "@trivago/prettier-plugin-sort-imports"
插件不起作用。 I want to have the configuration, that doesn't give me the mentioned error and allows sorting plugin to work.我想要配置,它不会给我提到的错误并允许排序插件工作。 Maybe I've got some conflicts on the eslint-prettier line?也许我在 eslint-prettier 线上有一些冲突?
part of package.json
in main directory 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
in main directory .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
in main directory .prettierrc.json
在主目录中
{
"semi": true,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 120,
"tabWidth": 2,
"arrowParens": "always",
"importOrder": ["^[a-zA-Z](.*)$", "^@[a-zA-Z](.*)$$", "^[./]"],
"importOrderSeparation": true
}
It appears to work correctly if the following is added to .prettierrc.json
to enable the required parser plugin:如果将以下内容添加到.prettierrc.json
以启用所需的解析器插件,它似乎可以正常工作:
"experimentalBabelParserPluginsList": ["classProperties", "jsx", "typescript"]
This was tested with prettier
2.3.2 and @trivago/prettier-plugin-sort-imports
2.0.4.这是用prettier
2.3.2 和@trivago/prettier-plugin-sort-imports
2.0.4 测试的。
Example of complete .prettierrc.json
:完整的.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"]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.