漂亮的和附带的缩进不能一起使用

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

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

Answer 2

最烦人的事情..所以修复：eslint-config-prettier

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

Answer 3

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

它禁用eslint中与漂亮冲突的规则

Answer 4

根据Kai Kaialdo对GitHub issue的评论：

  

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

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

Answer 5

关闭默认的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代码窗口的底部，您有一个Fix on save: X标志。这应该与此设置相关联，因此请确保保持一致。

Answer 6

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

Answer 7

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

Answer 8

遇到了同样的问题，没有使用eslint，它的解决方法如下：

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

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

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