Prettier 和 eslint 縮進不能一起工作

Question

我托盤設置了我的 vim 基於 typescript 的開發環境，但是縮進管理有問題。

可能 'eslint' 說： indent: Expected indentation of 2 spaces but found 4.在prettier的重新格式化后發現 4 個空格。

我的.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,
};

Answer 1

根據此 Kai Cataldo 對此GitHub 問題的評論：

ESLint 的縮進規則和 Prettier 的縮進樣式不匹配——它們是完全獨立的實現，是解決同一問題的兩種不同方法（“我們如何在項目中強制執行一致的縮進”）。

因此，在使用prettier時，最好禁用 eslint 的indent規則。 保證他們會發生沖突。

Answer 2

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

定義的參數

1. 新的 eslint 規則希望第一個參數是一個數字： Severity should be one of the following: 0 = off, 1 = warn, 2 = error 。

2. 縮進量

3. 該對象說明如何在此處的選項之后縮進switch和case語句。

Answer 3

這應該修復它https://github.com/prettier/eslint-config-prettier

它禁用 eslint 中與 prettier 沖突的規則

Answer 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標志。 這應該與此設置相關聯，因此請確保保持一致。

Answer 5

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

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

Answer 6

我遇到了同樣的問題。 問題是您可以手動覆蓋任何沖突規則。 就我而言，它是 ESLint 的prettier/prettier的插件，因此可以在所需插件下添加縮進規則來解決。

"rules": {
        // "indent":["error",10]
        "prettier/prettier":[  //or whatever plugin that is causing the clash
            "error",
            {
                "tabWidth":4
            }
        ]
    }

您可以像這樣覆蓋特定規則，以消除任何沖突。

Answer 7

1. eslint-config-prettier 將禁用所有可能與 Prettier 的規則沖突的 ESLint 格式化規則。
   
   npm i --save-dev eslint-config-prettier
2. eslint-plugin-prettier 是添加 Prettier 格式化規則的插件。
3. 讓我們告訴 ESLint 我們將使用 Prettier 推薦的配置：
   npm i --save-dev eslint-plugin-prettier

//eslintrc.js
{
  "eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:prettier/recommended"
  ]
}

Answer 8

在我看來，唯一的沖突是三元運算。 解決此問題的另一種選擇是使用以下 eslint 規則。

"indent": ["error", 2, { "offsetTernaryExpressions": true }],

這里有更多的選擇： https://eslint.org/docs/latest/rules/indent#offsetternaryexpressions

我發現 eslint 的縮進規則更易於配置，並且會在 prettier 上使用它們。

Answer 9

我遇到了這個問題，通過在設置菜單（ctrl + shift + P）中將 Prettier 更改為使用選項卡，它為我解決了這個問題。

Answer 10

就我而言，我只是在 VSCode 上將CRLF （回車，換行）更改為LF （換行）

Answer 11

如果您使用的是 VS-Code 並根據此處的其他答案配置了eslint和prettier設置，那么還要在 VS-Code 中選中此選項；）

改為將其更改為“Tab”。

Answer 12

在我的例子中，我所做的是從.eslintrc文件中刪除了縮進規則，並將useTabs: true添加到我的.prettierrc文件中。

重新加載 VS 代碼后，它與制表符大小縮進完美配合。

Answer 13

因此， npm i --save-dev eslint-config-prettier解決了Akshay指出的問題

Answer 14

有同樣的問題，不使用eslint，解決如下：

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

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

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