ESLint Lint Indent Config for dropped lines

Question

So, with Angular 11 deprecating TSLint, I made the switch to ESLint (not too happy with it so far).
Right now I have this annoying spacing issue I'm trying to work out in the.eslintrc.js config.

Take these lines of code (this is what I have and what I want to keep):

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.";

You see that indent after the dropped line for the longer meesage? I want to keep that. But ESLint is removing it.
ESLint makes it look like this:

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.";

See? No indent. It's even more frustarting because (I use prettier for formatting) my formatter will add the space back.

I'm trying to find switch rule/config would add an indent when the line is dropped when it exceeds the width limit.
Any help would be appreciated!

My indent rule is: "@typescript-eslint/indent": ["error", 2],
And here's my whole.eslintrc.js config file:

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", 2],
    "@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", "always"],
    "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"]
        }
      }
    ]
  }
};

Answer 1

This is a conflict between the ESLint and Prettier formatting and is a well-known issue .

The solution is to let Prettier handle formatting, while ESLint takes care of code quality issues: https://prettier.io/docs/en/integrating-with-linters.html

The quickest and most comprehensive solution is this: eslint-config-prettier . What it does is, it turns off the formatting rules in ESLint, so that ESLint only takes care of code quality. And then you will have Prettier run on either on save, on a pre-commit hook (preferred), or on pre-push to reformat the codebase.