为什么 Prettier 在解构赋值之前要求 `;`？

Question

我的 Angular 组件中有 if 块：

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
}

Answer 1

已经收到关于此主题的 bunch of discussion，如果您有兴趣阅读原因

The reason why the prettier add semi-colon at the start, even if it isn't strictly required, is that it makes it easier to move lines of code around the file without accidentally introducing ASI issues. - azz

编辑： Prettier 也解释了 here

的原因

但基本上是因为

someCall()
[a] = obj

与

不一样

someCall();
[a] = obj

但是因为你要求prettier去掉分号，所以它把它放在了开头

someCall()
;[a] = obj

您还可以阅读 standardjs rules about the subject 上面写着

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

// ✗ avoid
[1, 2, 3].forEach(bar)

为什么 Prettier 在解构赋值之前要求 `;`？

Why does Prettier claim the `;` before destructuring assignment?

typescript

eslint

eslint-config-airbnb

angular

prettier