javascript - 如果当前未启用，如何使 ESLint 支持实验性语法“jsx”？
问题描述
我正在尝试使用 Webpack 5 + Babel 7 + Eslint 7 为我的 React 应用程序设置工作流。
作为解析器，我正在使用"@babel/eslint-parser"
，并且在我的 index.js 中，当我渲染一个 React 组件时ESLInt 表示“当前未启用对实验语法 'jsx' 的支持”。
我尝试使用"eslint-plugin-jsx-a11y"和其他方法，但没有帮助......
这是我使用 ESLint 时的第一个项目，我开始阅读它的大量文档，关于怎么设置，接缝说我做的不错，但结果不行。
index.js 和 App.js 中的错误
Parsing error: /Users/Dima/Desktop/Add to Github/react-quotes-machine/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (17:17):
15 | const a = 'hello';
16 |
> 17 | ReactDOM.render(<App />,document.getElementById("root"));
| ^
18 |
19 |
20 | module.hot.accept();
webpack.common.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const ESLintPlugin = require("eslint-webpack-plugin");
const webpack = require("webpack");
module.exports = {
entry: ["@babel/polyfill", "./src/index.js"],
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
hash: true,
title: "Randome Quote Machine",
filename: "index.html",
template: "src/index.html",
inject: "head",
scriptLoading: "defer",
}),
new webpack.ProgressPlugin(),
new ESLintPlugin({
overrideConfigFile: path.resolve(__dirname, '.eslintrc.json'),
context: path.resolve(__dirname, '../src'),
files: ['**/*.js',"**/*.jsx"],
extensions: [".js", ".jsx"]
}),
],
output: {
path: path.resolve(__dirname, "./dist"),
filename: "[name].bundle.js",
},
};
webpack.dev.js
const path = require("path");
const {merge} = require("webpack-merge");
const common = require("./webpack.common.js");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = merge(common, {
mode: "development",
devtool: "eval-cheap-module-source-map",
target: "web",
plugins: [
new MiniCssExtractPlugin({
filename: "style.css",
chunkFilename: '[id].css'
}),
new webpack.HotModuleReplacementPlugin(),
],
devServer: {
index: "index.html",
contentBase: path.resolve(__dirname, "./dist"),
historyApiFallback: true,
hot: true,
compress: true,
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/i,
exclude: /node_modules/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader",
options: {importLoaders: 1, sourceMap: true},
},
{loader: "sass-loader", options: {sourceMap: true}},
],
},
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: [{loader: "babel-loader"}],
},
],
},
resolve: {
extensions: ["*", ".js", ".jsx"],
},
optimization: {
runtimeChunk: true,
},
});
webpack.prod.js
const {merge} = require("webpack-merge");
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const common = require("./webpack.common.js");
module.exports = merge(common, {
mode: "production",
devtool: "hidden-source-map",
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/i,
use: [
{loader: MiniCssExtractPlugin.loader},
{loader: "css-loader"},
{
loader: "postcss-loader",
options: {
postcssOptions: {
config: path.resolve(__dirname, "postcss.config.js"),
},
},
},
{loader: "sass-loader"},
],
},
],
},
plugins: [new MiniCssExtractPlugin({
filename: "style.[contenthash].css",
chunkFilename: '[id].[contenthash].css'
})],
optimization: {
moduleIds: "deterministic",
runtimeChunk: "single",
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all",
},
},
},
},
output: {
filename: "[name].[contenthash].js",
},
});
babel.config.json
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-transform-react-jsx"]
}
.eslintrc.json
{
"root": true,
"env": {
"browser": true,
"es2021": true,
"node": true,
"commonjs": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:import/errors",
"plugin:jsx-a11y/recommended"
],
"parser": "@babel/eslint-parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module",
"requireConfigFile": false
},
"plugins": ["@babel","react","import","jsx-a11y","react-hooks"],
"rules": {
"@babel/new-cap": "error",
"@babel/no-invalid-this": "error",
"@babel/no-unused-expressions": "error",
"@babel/object-curly-spacing": "error",
"@babel/semi": "error",
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"jsx-a11y/rule-name": 2,
"react/react-in-jsx-scope": 0
}
}
包.json
{
"name": "react-quotes-machine",
"version": "1.0.0",
"description": "Randome Quote Machine",
"private": true,
"scripts": {
"dev": "webpack --config webpack.dev.js",
"live": "webpack serve --config webpack.dev.js --open --client-log-level silent",
"prod": "webpack --config webpack.prod.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"browserslist": [
">0.1%",
"not dead",
"not op_mini all"
],
"repository": {
"type": "git",
"url": "git+https://github.com/DimaIpatii/react-quotes-machine.git"
},
"keywords": [
"randome-quote-machine"
],
"author": "Ipatii Dmytro",
"license": "ISC",
"bugs": {
"url": "https://github.com/DimaIpatii/react-quotes-machine/issues"
},
"homepage": "https://github.com/DimaIpatii/react-quotes-machine#readme",
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/eslint-parser": "^7.12.1",
"@babel/eslint-plugin": "^7.12.1",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-transform-react-jsx": "^7.12.12",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"autoprefixer": "^10.2.0",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"cssnano": "^4.1.10",
"eslint": "^7.17.0",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-webpack-plugin": "^2.4.1",
"html-webpack-plugin": "^4.5.1",
"mini-css-extract-plugin": "^1.3.3",
"node-css-mqpacker": "^8.0.1",
"node-sass": "^5.0.0",
"postcss": "^8.2.2",
"postcss-loader": "^4.1.0",
"sass-loader": "^10.1.0",
"webpack": "^5.11.1",
"webpack-cli": "^4.3.1",
"webpack-dev-server": "^3.11.1",
"webpack-merge": "^5.7.3"
},
"dependencies": {
"@babel/polyfill": "^7.12.1",
"normalize.css": "^8.0.1",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
解决方案
这对我有用，使用@babel/eslint-parser：
babel.config.json
{
"presets": ["next/babel"],
"plugins": ["@babel/plugin-syntax-jsx"]
}
eslintrc.json
"extends": [
"airbnb",
"prettier",
"plugin:prettier/recommended",
"next"
],
"parser": "@babel/eslint-parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 11,
"sourceType": "module"
},
"plugins": ["@babel", "react-hooks", "jsx-a11y", "import", "prettier"],
package.json
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/eslint-parser": "^7.14.7",
"@babel/eslint-plugin": "^7.14.5",
"@babel/plugin-syntax-jsx": "^7.14.5",
"eslint": "^7.29.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-next": "11.0.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.3.2"
}
顺便说一下，这是一个 Next js 应用程序。
推荐阅读
- python - 如何使用输入更改python中的操作？
- python-3.x - BatchGetItem 操作上的 DynamoDB 和 Boto3 错误：“提供的关键元素与架构不匹配”
- pyspark - pyspark OneHotEncoded 向量似乎缺少类别？
- php - php curl请求永远不会完成
- leaflet - 使用 gdal2tiles.py 应用样式
- c++ - C ++如何使虚函数返回任何类型的指针？
- javascript - 如何在不使用 POST 或 GET 的情况下向 MySQL 服务器输入用户名和密码输出
- python - Beautifulsoup 分开和；在 html 的标签内
- javascript - 如何使 SVG 在 DOM 中不占用空间？
- c# - .NET Core 2.1 - 构建时的 dotnet/exe，缺少包