Почему Prettier требует `;` перед деструктурированием присваивания?

У меня есть блок if в компоненте Angular:

if (desc.length > 0) {
    [this.errorMsg] = desc
}

Однако Prettier это не нравится, и он рекомендует ставить ; в начале присваивания деструктуризации:

if (desc.length > 0) {
    ;[this.errorMsg] = desc
}

Я просто хочу узнать почему? Есть ли ошибка в моей конфигурации ESLint или Prettier? Или у него есть причины?

ДОБАВЛЕНО
.eslintrc.json:

{
  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": [
          "tsconfig.*?.json",
          "e2e/tsconfig.e2e.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        // AirBnB guide style
        "airbnb-typescript/base",
        // Prettier settings
        "prettier",
        "plugin:prettier/recommended"
      ],
      "rules": {
        /**
         * Any TypeScript source code (NOT TEMPLATE) related rules you wish to use/reconfigure over and above the
         * recommended set provided by the @angular-eslint project would go here.
         */
        "@angular-eslint/directive-selector": [
          "error",
          { "type": "attribute", "prefix": "app", "style": "camelCase" }
        ],
        "@angular-eslint/component-selector": [
          "error",
          { "type": "element", "prefix": "app", "style": "kebab-case" }
        ]
      }
    },
    // NOTE: WE ARE NOT APPLYING PRETTIER IN THIS OVERRIDE, ONLY @ANGULAR-ESLINT/TEMPLATE
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    },
    // NOTE: WE ARE NOT APPLYING @ANGULAR-ESLINT/TEMPLATE IN THIS OVERRIDE, ONLY PRETTIER
    {
      "files": ["*.html"],
      "excludedFiles": ["*inline-template-*.component.html"],
      "extends": ["plugin:prettier/recommended"],
      "rules": {
        // NOTE: WE ARE OVERRIDING THE DEFAULT CONFIG TO ALWAYS SET THE PARSER TO ANGULAR (SEE BELOW)
        "prettier/prettier": ["error", { "parser": "angular" }]
      }
    }
  ]
}

.prettierrc.json:

{
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 120,
  "semi": false
}

typescript angular eslint eslint-config-airbnb prettier
person Шах    schedule 24.03.2021    source источник
comment
Предупреждающее сообщение ESLint не дает никаких подсказок?   -  person meriton    schedule 24.03.2021
comment
@meriton, я получил сообщение Prettier, а не ESLint. я обновлю свой вопрос   -  person Шах    schedule 24.03.2021

Ответы (1)


arrow_upward
4
arrow_downward

Уже есть куча обсуждений по этому вопросу, если вам интересно прочитай почему

Причина, по которой лучше добавить точку с запятой в начале, даже если это не является строго обязательным, заключается в том, что это упрощает перемещение строк кода по файлу без случайного возникновения проблем с ASI. - azz

Изменить: Prettier также объясняет, почему здесь

Но в основном потому, что

someCall()
[a] = obj

не то же самое, что

someCall();
[a] = obj

но так как вы просите красивее убрать точку с запятой, то ее поставили в самом начале

someCall()
;[a] = obj

Вы также можете прочитать правила стандарта js по этому вопросу, в которых говорится

// ✓ ok
;[1, 2, 3].forEach(bar)

// ✗ avoid
[1, 2, 3].forEach(bar)
person Raphaël Balet    schedule 24.03.2021
comment
В гугле не нашел, спасибо за ответ! - person Шах; 24.03.2021
comment
Это также задокументировано в документации Prettier: prettier.io/docs/en/rationale.html# точки с запятой - person thorn0; 24.03.2021
comment
Спасибо @thorn̈ Я добавил эту информацию в ответ - person Raphaël Balet; 25.03.2021