[英]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.