更漂亮和 eslint 缩进不一起工作

Question

我正在设置基于 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,
};

Answer 1

根据 Kai Cataldo 对此GitHub 问题的评论：

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

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

Answer 2

我遇到了同样的问题。问题是你可以手动覆盖任何冲突的规则。就我而言，它是prettier/prettierESLint 的插件，因此可以在所需插件下添加缩进规则来解决。

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

您可以覆盖这样的特定规则，以消除任何冲突。

Answer 3

关闭默认的 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 4

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

Answer 5

这应该修复它https://github.com/prettier/eslint-config-prettier

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