#eslint #eslintrc #eslint-config-airbnb #prettier-eslint #babel-eslint
Вопрос:
Я пытаюсь использовать eslint в webstorm, но он не работает и выдает ошибку:ESLint: Ошибка синтаксического анализа: Для этого экспериментального синтаксиса требуется включить один из следующих плагинов синтаксического анализа: «jsx, поток, машинопись» (2:9). Вот мои настройки .eslintrc и package.json. Что я должен сделать для исправления ошибки? пакет.json
{
"name": "raonair-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"eslint-config-react-app": "^6.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prepare": "husky install"
},
"parser": "babel-eslint",
"eslintConfig": {
"extends": [
"react-app",
"airbnb",
"plugin:flowtype/recommended"
],
"plugins": [
"flowtype"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/eslint-parser": "^7.15.0",
"@babel/eslint-plugin": "^7.14.5",
"@babel/plugin-syntax-jsx": "^7.14.5",
"eslint": "^7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-flowtype": "^5.9.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": "^7.0.1",
"prettier": "^2.3.2"
}
}
.eslintrc
{
"env": {
"browser": true,
"node": true
},
"extends": [
"airbnb",
"airbnb/hooks",
"prettier"
],
"parser": "@babel/eslint-parser",
"parserOptions": {
"sourceType": "module",
"allowImportExportEveryWhere": false,
"ecmaFeatures": {
"globalReturn": false,
"jsx": true
},
"ecmaVersion": 2020,
"babelOptions": {
"configFile": "./babel.config.js"
}
},
"plugins": [
"jsx-a11y",
"react-hooks",
"@babel/",
"flowtype",
"import"
],
"rules": {
"import/no-anonymous-default-export": "off",
"import/no-extraneous-dependencies": "off",
"import/order": [
"error",
{
"groups": [
"builtin",
"external",
"internal",
"parent",
"sibling"
],
"newlines-between": "always",
"alphabetize": {
"order": "asc",
"caseInsensitive": false
}
}
],
"import/prefer-default-export": "off",
"indent": [
"error",
2,
{
"SwitchCase": 1
}
],
"jsx-a11y/anchor-is-valid": "off",
"no-console": "error",
"no-unused-vars": "error",
"react/jsx-props-no-spreading": "off",
"react/react-in-jsx-scope": "off"
},
"settings": {
"import/resolver": {
"typescript": {}
},
"insert_final_newline": true
}
}
Ответ №1:
Чтобы уточнить ответ Ceroy (источник):
- Установите зависимости, необходимые для правильного анализа babel jsx
yarn add @babel/preset-react -D
или
npm install --save-dev @babel/preset-react
- Настройка Вавилона
.babel.rc файл в корневом каталоге проекта:
{
"presets": [
"@babel/preset-react"
]
}
- Укажите синтаксический анализатор в
.eslintrc.json(чтобы ваша консоль и VSCode использовали один и тот же) — полный eslintrc показан здесь:
{
"parser": "@babel/eslint-parser",
"settings": {
"react": {
"version": "detect"
}
},
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"standard",
"plugin:react/jsx-runtime",
"plugin:testing-library/react",
"plugin:jest/all"
],
"parserOptions": {
"sourceType": "module"
},
"rules": {}
}
Примечание: .eslintrc.json также может быть создано с помощью eslint —init или с помощью расширения ESLint в VSCode. Инициализация предоставит вам больше возможностей на выбор (например, поддержка машинописи).
- Попробуйте это в консоли:
npx eslint --fix . - Проверьте VSCode (с расширением ESLint)
Бонус:
Настройки плагина ESLint для VSCode (автофиксация при сохранении, Jest aware, анализатор бабеля и т. Д. — в глобальных настройках VSCode.json):
...
"eslint.alwaysShowStatus": true,
"eslint.format.enable": true,
"eslint.lintTask.enable": true,
"eslint.options": {
"parser": "@babel/eslint-parser"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript"
]
...
Полный package.json :
{
"name": "okta-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^12.1.0",
"@testing-library/user-event": "^13.2.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/eslint-parser": "^7.15.7",
"@babel/preset-react": "^7.14.5",
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-jsx": "^0.1.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-react": "^7.26.0"
}
}
Ответ №2:
- Установите @babel-предустановка-реагируйте в зависимостях разработки.
- Добавьте это в файл .eslintrc
... "парсер": "@babel/eslint-парсер", "Синтаксический анализ": { ... "Вавилонские сказки": { "предустановки": ["@babel/предустановка-реагирует"] }, } ...