[英]Linter: "Insert `··` eslint(prettier/prettier)" on React + TS + Styled Components
我在使用 TS 和 Styled Components 的 React 项目中遇到 Eslint 和 Prettier 之间规则冲突的问题。 VSCode 显示以下问题消息:
“插入
··
eslint(更漂亮/更漂亮)”
在用于样式的.ts
文件中。 每次我用预期的缩进保存文件时,linter 都会删除··
。
linter 如何识别
background-color: ${(props) => {
if (props.isSideOpen || props.isOverviewOpen)
return `rgba(${colors.white.rgba}, 1)`;
return `rgba(${colors.white.rgba}, 0.6)`;
}};
它应该如何识别
background-color: ${(props) => {
if (props.isSideOpen || props.isOverviewOpen)
return `rgba(${colors.white.rgba}, 1)`;
return `rgba(${colors.white.rgba}, 0.6)`;
}};
我尝试查看 Eslint 和 Prettier 规则,但找不到任何对我当前问题有意义的内容。
有小费吗?
.eslintrc
{
"env": {
"browser": true,
"node": true,
"es6": true
},
"extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 8,
"sourceType": "module",
"ecmaFeatures": {
"classes": true,
"jsx": true
}
},
"plugins": ["prettier", "react", "import"],
"rules": {
"arrow-body-style": "off",
"no-console": 2,
"no-empty": "off",
"no-empty-function": "off",
"prefer-arrow-callback": 2,
"prefer-const": 2,
"prefer-promise-reject-errors": 2,
"strict": [2, "global"],
"import/first": "error",
"import/named": "warn",
"import/newline-after-import": 1,
"prettier/prettier": ["error", { "endOfLine": "auto" }],
"react/prop-types": 0,
"react/react-in-jsx-scope": 0
},
"settings": {
"react": {
"version": "16.12.0"
},
"import/resolver": {
"alias": {
"map": [["@", "./src"]],
"extensions": [".ts", ".tsx", ".js", ".jsx", ".json"]
}
}
},
"overrides": [
{
"files": ["*.tsx"],
"rules": {
"no-undef": "off"
}
}
]
}
我认为你不需要扩展 prettier,你只需要将它放在插件数组中,然后在规则中配置选项:
{
"rules": {
"prettier/prettier": [
"error",
{
"trailingComma": "es5",
"semi": false,
"singleQuote": false,
"printWidth": 120
}
]
},
"plugins": ["@typescript-eslint", "prettier"]
}
(我只是从当前使用的 eslintrc im 中复制了有趣的部分,您可能想使用这些选项)
我的扩展看起来像这样
"extends": [
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint"
],
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.