Prettier 和 eslint 缩进不一起工作

Posted 2023-02-22

【中文标题】Prettier 和 eslint 缩进不一起工作

【英文标题】：Prettier and eslint indents not working together

【发布时间】：2019-10-13 16:26:45

【问题描述】：

我正在设置基于 vim 的打字稿开发环境，但在缩进管理方面存在问题。

可能'eslint' 说：indent: Expected indentation of 2 spaces but found 4. 在prettier 重新格式化之后。

我的.eslintrc.js：

module.exports =  
  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
  extends: [ 
    'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  parserOptions:  
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module', // Allows for the use of imports
    ecmaFeatures:  
      jsx: true, // Allows for the parsing of JSX
      tsx: true, // Allows for the parsing of TSX ???
    ,
  ,
  rules:  
    indent: ['error', 2],
    quotes: ['error', 'single'],
    semi: ['error', 'never'],
    'sort-keys': ['error', 'asc',  caseSensitive: true, natural: false ],
  ,

我的.prettierc：

 module.exports =  
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 80, 
  tabWidth: 2,
;

【问题讨论】：

同样的问题！所有的 linter 和自动格式化选项都相互冲突！我无法得到没有分号的代码被接受而没有错误...我不得不求助于仅使用 vs 代码的本机自动格式化????????

【参考方案1】：

根据 Kai Cataldo 对此GitHub issue 的评论：

ESLint 的缩进规则和 Prettier 的缩进样式不匹配 - 它们是完全独立的实现，是解决同一问题的两种不同方法（“我们如何在项目中强制执行一致的缩进”）。

因此，在使用prettier时，最好禁用eslint的indent规则。保证他们会发生冲突。

【参考方案2】：

在eslintrc 中添加indent: [2, 2, SwitchCase: 1]

定义的参数

新的 eslint 规则希望第一个参数是数字：Severity should be one of the following: 0 = off, 1 = warn, 2 = error。

缩进量

该对象说明如何在options here 之后缩进switch 和case 语句。

【讨论】：

知道这里发生了什么吗？

【参考方案3】：

这应该可以解决它https://github.com/prettier/eslint-config-prettier

它会禁用 eslint 中与 prettier 冲突的规则

【讨论】：

要添加到这个，请确保在扩展列表中添加这个 LAST，以便它覆盖其他 eslint 规则！

将plugins 移动到rules 下就可以了！

【参考方案4】：

关闭默认的 Visual Studio Code 解析器并只保留 eslint 解析器为我修复它。

只需转到设置Ctrl/Cmd + ,，选择User（全局设置）或Workspace（仅适用于工作回购），然后在右上角单击带有旋转箭头的纸张。这将打开 json 文件中声明的设置。使用以下设置，它应该适用于任何情况：

  // other settings
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": 
    "source.fixAll.eslint": true,
    "source.organizeImports": false
  ,
  // other settings

通常在 Visual Studio Code 窗口的底部有一个 Fix on save: X 标志。这应该与此设置相关联，因此请确保保持一致。

【讨论】：

这没有回答关于 vim 而不是 VSCode 的问题

这是我的问题。即使我在我的 eslint 配置中有 indent: 0 并且正在使用 eslint-config-prettier，但我在 JSX 中遇到了与三元运算符冲突的格式。我不知道 VS Code 在 eslint 之上有自己的解析器。

【参考方案5】：

最烦人的事情.. 如此固定：eslint-config-prettier

  "rules": 
    "no-tabs": ["error", "allowIndentationTabs": true]
  

【参考方案6】：

eslint-config-prettier 将禁用所有可能与 Prettier 的规则冲突的 ESLint 格式化规则。npm i --save-dev eslint-config-prettier eslint-plugin-prettier 是添加 Prettier 格式规则的插件。 让我们告诉 ESLint 我们将使用 Prettier 推荐的配置：npm i --save-dev eslint-plugin-prettier

//eslintrc.js

  "eslintConfig": 
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:prettier/recommended"
  ]

【参考方案7】：

我遇到了这个问题，通过在设置菜单中将 Prettier 更改为使用选项卡（ctrl + shift + P），它为我解决了这个问题。

【讨论】：

欢迎来到 StackExchange，感谢您发布答案。但是，如果您实际解释步骤会更好。你在这里的一句话不足以帮助我解决我的问题。我对你在说什么感到困惑。

这是一个简单的单一设置更改，只有一步。自从我在 StackExchange 上工作 8 年多以来，我觉得你的评论有点居高临下。

我很抱歉。我不是想居高临下。

【参考方案8】：

就我而言，我只是在 VSCode 上将 CRLF（回车，换行）更改为 LF（换行）

【参考方案9】：

有同样的问题，没有使用eslint，解决如下：

npm i tslint-config-prettier --save-dev

tslint.config：如果尚未添加，请添加：

"extends": ["tslint:recommended", "tslint-config-prettier"],