I am facing an issue with the if block within my Angular component:
if (desc.length > 0) {
[this.errorMsg] = desc
}
The problem arises as Prettier suggests adding a ; at the start of the destructuring assignment:
if (desc.length > 0) {
;[this.errorMsg] = desc
}
I am trying to understand the reason behind this. Could this be due to some misconfiguration in my ESLint or Prettier settings? Or is there a specific rationale behind it?
ADDED
.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
}