掉线的 ESLint Lint 缩进配置

问题描述

因此，随着 Angular 11 弃用 TSLint，我转而使用 ESLint（目前对此不太满意）。
现在我正在尝试在 .eslintrc.js 配置中解决这个烦人的间距问题。

采用这些代码行（这是我拥有的和我想保留的）：

readonly DELETE_DIALOG_MESSAGE = "This message doesn't exceed the width limit & is 1 line.";
readonly RETURN_TO_DRAFT_MESSAGE =
  "This message is supper long,like really loooong. So it exceeds my width limit and is dropped a line.";

你看到在更长的消息的掉线后面的缩进了吗？我想保留那个。但是 ESLint 正在删除它。
ESLint 使它看起来像这样：

readonly DELETE_DIALOG_MESSAGE = "This message doesn't exceed the width limit & is 1 line.";
readonly RETURN_TO_DRAFT_MESSAGE =
"This message is supper long,like really loooong. So it exceeds my width limit and is dropped a line.";

看到了吗？没有缩进。这更令人沮丧，因为（我使用更漂亮的格式）我的格式化程序会重新添加空间。

我试图找到切换规则/配置会在超过宽度限制时删除该行时添加缩进。
任何帮助将不胜感激！

我的缩进规则是："@typescript-eslint/indent": ["error",2],
这是我的整个 .eslintrc.js 配置文件：

module.exports = {
  env: {
    browser: true,es6: true,node: true
  },extends: ["prettier","prettier/@typescript-eslint"],parser: "@typescript-eslint/parser",parserOptions: {
    project: "tsconfig.json",sourceType: "module"
  },plugins: [
    "eslint-plugin-import","eslint-plugin-jsdoc","@angular-eslint/eslint-plugin",// "eslint-plugin-react","@typescript-eslint","@typescript-eslint/tslint"
  ],rules: {
    "@angular-eslint/component-class-suffix": "error","@angular-eslint/directive-class-suffix": "error","@angular-eslint/no-host-Metadata-property": "error","@angular-eslint/no-input-rename": "error","@angular-eslint/no-inputs-Metadata-property": "error","@angular-eslint/no-output-on-prefix": "error","@angular-eslint/no-output-rename": "error","@angular-eslint/no-outputs-Metadata-property": "error","@angular-eslint/use-lifecycle-interface": "error","@angular-eslint/use-pipe-transform-interface": "error","@typescript-eslint/consistent-type-deFinitions": "error","@typescript-eslint/dot-notation": "off","@typescript-eslint/explicit-member-accessibility": [
      "off",{
        accessibility: "explicit"
      }
    ],"@typescript-eslint/indent": ["error","@typescript-eslint/member-delimiter-style": [
      "error",{
        multiline: {
          delimiter: "semi",requireLast: true
        },singleline: {
          delimiter: "semi",requireLast: false
        }
      }
    ],"@typescript-eslint/member-ordering": "off","@typescript-eslint/naming-convention": "off","@typescript-eslint/no-empty-function": "off","@typescript-eslint/no-empty-interface": "error","@typescript-eslint/no-inferrable-types": [
      "error",{
        ignoreParameters: true
      }
    ],"@typescript-eslint/no-misused-new": "error","@typescript-eslint/no-non-null-assertion": "error","@typescript-eslint/prefer-function-type": "error","@typescript-eslint/quotes": "off","@typescript-eslint/semi": ["error","always"],"@typescript-eslint/type-annotation-spacing": "error","@typescript-eslint/unified-signatures": "error","arrow-body-style": ["off"],"arrow-parens": ["off","brace-style": ["error","1tbs"],"comma-dangle": "off","constructor-super": "error",curly: "error","eol-last": "error",eqeqeq: ["error","smart"],"guard-for-in": "error","id-blacklist": "off","id-match": "off","import/no-deprecated": "warn","jsdoc/no-types": "error","linebreak-style": "off","max-len": [
      "error",{
        code: 140
      }
    ],"new-parens": "off","newline-per-chained-call": "off","no-bitwise": "error","no-caller": "error","no-console": [
      "error",{
        allow: [
          "log","dirxml","warn","error","dir","timeLog","assert","clear","count","countReset","group","groupCollapsed","groupEnd","table","Console","markTimeline","profile","profileEnd","timeline","timelineEnd","timeStamp","context"
        ]
      }
    ],"no-debugger": "error","no-empty": "off","no-eval": "error","no-extra-semi": "off","no-fallthrough": "error","no-irregular-whitespace": "off","no-multiple-empty-lines": "off","no-new-wrappers": "error","no-restricted-imports": ["error","rxjs/Rx"],"no-shadow": [
      "off",{
        hoist: "all"
      }
    ],"@typescript-eslint/no-shadow": ["error"],"no-throw-literal": "error","no-trailing-spaces": "error","no-undef-init": "error","no-underscore-dangle": "off","no-unused-labels": "error","no-var": "error","prefer-const": "error","quote-props": "off",radix: "error","react/jsx-curly-spacing": "off","react/jsx-equals-spacing": "off","react/jsx-wrap-multilines": "off","space-before-function-paren": "off","space-before-blocks": "error","space-in-parens": ["off","never"],"spaced-comment": [
      "error","always",{
        markers: ["/"]
      }
    ],"@typescript-eslint/tslint/config": [
      "error",{
        rules: {
          "import-spacing": true,whitespace: [true,"check-branch","check-decl","check-operator","check-separator","check-type"]
        }
      }
    ]
  }
};

解决方法

这是 ESLint 和 Prettier 格式 and is a well-known issue 之间的冲突。

解决方案是让 Prettier 处理格式化，而 ESLint 负责代码质量问题：https://prettier.io/docs/en/integrating-with-linters.html

最快、最全面的解决方案是：eslint-config-prettier。它的作用是关闭 ESLint 中的格式化规则，让 ESLint 只关心代码质量。然后，您将在保存、预提交挂钩（首选）或预推送时运行 Prettier，以重新格式化代码库。

angular angular angular11 eslint eslint eslintrc prettier