Javascript eslint“;分析错误:JSX中出现意外的标记{"
我会像那样安装软件包Javascript eslint“;分析错误:JSX中出现意外的标记{",javascript,reactjs,eslint,eslint-config-airbnb,eslintrc,Javascript,Reactjs,Eslint,Eslint Config Airbnb,Eslintrc,我会像那样安装软件包 const title = 'My Minimal React Webpack Babel Setups'; const App = () => (<div><b>{title}</b><img src={img} /></div>) module.exports = { "extends": "airbnb" }; 我认为ESLint可以读取JSX,因为标记“ESLint本身不够好。首先安装b
const title = 'My Minimal React Webpack Babel Setups';
const App = () => (<div><b>{title}</b><img src={img} /></div>)
module.exports = {
"extends": "airbnb"
};
我认为ESLint可以读取JSX,因为标记“ESLint本身不够好。首先安装
babel ESLint
:
"eslint": "^5.9.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
或用纱线:
npm install --save-dev babel-eslint
然后添加到.eslintrc
文件:
yarn add -D babel-eslint
您可能也想安装
eslint插件babel
,但我相信这是不需要的My.eslintr有这个额外的配置来启用JSX
"parser": "babel-eslint"
我在Next.js上遇到了相同的错误 这些步骤解决了我的问题: 1) 安装babel eslint:
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
}
"parser": "babel-eslint"
2) 将babel eslint作为解析器添加到eslint配置中
npm install --save-dev babel-eslint
我的eslint配置如下(.eslintrc):
但是代码中没有错误。它工作正常吗?@PraveenKumarPurushothaman是的。它工作完全正确。我可以使用babel编译我的代码,并且它在我的浏览器上工作正常。但是,ESLint说那个解析错误。你能看到是否有任何ESLint升级吗?@PraveenKumarPurushothaman我的ESLint版本是最新版本(5.9.0).I使用命令“npm更新”检查它"不幸的是,它的工作原理是一样的。谢谢你的评论。谢谢你的回答。所有的问题都已经解决了。我应该安装
babel eslint
,而我不使用babel
?你应该。你不需要使用babel来安装它。它只是帮助eslint解析代码@YouHoGeonI。我刚刚做到了这一点,它打破了很多其他的错误东西。这个答案可能已经过时了…@JamesBender不这么认为。你能对你的问题进行一点扩展吗?你可能还需要“解析器”:“babel eslint”
在你的.babelrc
中。
{
"env": {
"browser": true,
"es6": true,
"commonjs": true,
"node": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 9,
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"react/react-in-jsx-scope": 0,
"no-console": 1
}
}