[英]how to configure styled jsx in Eslint
I'm setting up an environment this way to work with a ReactJs/Next.js project that uses 'styled jsx', but eslint can't fix the css flaws in the middle of the code.我正在以这种方式设置环境来处理使用“样式化 jsx”的 ReactJs/Next.js 项目,但 eslint 无法修复代码中间的 css 缺陷。
How can I best configure eslint to work with the project I'm working on?我怎样才能最好地配置 eslint 来处理我正在处理的项目?
{
"parser": "@babel/eslint-parser",
"extends": [
"airbnb",
"plugin:react/recommended"
],
"env": {
"es6": true,
"browser": true,
"node": true,
"jest": true
},
"settings": {
"import/core-modules": ["styled-jsx", "styled-jsx/css"],
},
"plugins": [
"react",
"react-hooks"
],
"parserOptions": {
"sourceType": "module",
"allowImportExportEverywhere": true
},
"rules": {
// ..rules
}
}
Check this out:看一下这个:
https://github.com/vercel/styled-jsx#eslint https://github.com/vercel/styled-jsx#eslint
If you're using eslint-plugin-import
, the css import will generate errors, being that it's a "magic" import (not listed in package.json).如果您使用
eslint-plugin-import
,css 导入会产生错误,因为它是一个“魔法”导入(未在 package.json 中列出)。 To avoid these, simply add the following line to your eslint configuration:为了避免这些,只需将以下行添加到您的 eslint 配置中:
"settings": {"import/core-modules": ["styled-jsx/css"] }
This should remove any errors - but you won't get highlighting.这应该消除任何错误 - 但你不会得到突出显示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.