Linter：“在 React + TS + 样式化组件上插入 `··` eslint(prettier/prettier)”

Posted 2023-03-13

【中文标题】Linter：“在 React + TS + 样式化组件上插入 `··` eslint(prettier/prettier)”

【英文标题】：Linter: "Insert `··` eslint(prettier/prettier)" on React + TS + Styled Components

【发布时间】：2021-10-22 02:10:35

【问题描述】：

在使用 TS 和 Styled Components 的 React 项目中，我遇到了 Eslint 和 Prettier 之间冲突规则的问题。 VSCode 显示以下问题信息：

"插入··eslint(prettier/prettier)"

在用于样式的.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"
      
    
  ]

【参考方案1】：

我觉得你不需要扩展prettier，你只需要把它放在plugins数组中，然后在rules中配置选项：

"rules": 
  "prettier/prettier": [
  "error",
    
    "trailingComma": "es5",
    "semi": false,
    "singleQuote": false,
    "printWidth": 120
    
  ]
,
"plugins": ["@typescript-eslint", "prettier"]

（我只是从我当前使用的 eslintrc 中复制了一些有趣的部分，您可能想使用这些选项）

我的扩展看起来像这样

"extends": [
  "plugin:react/recommended",
  "plugin:@typescript-eslint/recommended",
  "prettier/@typescript-eslint"
],

【讨论】：

嗨@anton-bks，感谢您的回复。我尝试从 linter 配置中清理更漂亮的东西，但没有解决它：/

我认为 vscode 可能正在应用自己的默认 linting 规则。看看***.com/questions/50823743/disable-tslint-in-vscode/… 尝试禁用它可能