I know I'm missing something simple, but I have an Angular component with the following inline template:
template: `<ng-content></ng-content>`
ESLint is complaining because Prettier is saying there needs be a new line between the opening and closing tags, but if I do this, then Prettier just updates it to be as shown above.
I'm guessing the issue is a disparity between my ESLint setup, Prettier config and VS Code settings, so those are below. Can someone help me out? TIA.
.prettierrc
{
"singleQuote": true,
"printWidth": 140,
"editor.formatOnSave": true,
"proseWrap": "always",
"tabWidth": 4,
"requireConfig": false,
"useTabs": true,
"trailingComma": "none",
"bracketSpacing": true,
"bracketSameLine": true,
"jsxBracketSameLine": true,
"semi": true,
"arrowParens": "avoid",
"endOfLine": "auto",
"overrides": [
{
"files": "*.component.html",
"options": {
"parser": "angular"
}
},
{
"files": "*.html",
"options": {
"parser": "angular"
}
}
]
}
.eslintrc.json
{
"root": true,
"ignorePatterns": ["projects/**/*", "typings.d.ts"],
"overrides": [
{
"files": ["*.ts"],
"parserOptions": {
"project": ["tsconfig.json", "e2e/tsconfig.e2e.json"],
"createDefaultProgram": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@angular-eslint/recommended",
"plugin:@angular-eslint/ng-cli-compat",
"plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
"plugin:@angular-eslint/template/process-inline-templates",
"plugin:prettier/recommended"
],
"rules": {
"no-shadow": "off",
"no-extra-boolean-cast": "off",
"@typescript-eslint/no-shadow": ["error"],
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": ["app", "tmt"],
"style": "kebab-case"
}
],
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": ["app", "tmt"],
"style": "camelCase"
}
],
"@typescript-eslint/consistent-type-definitions": "error",
"@typescript-eslint/dot-notation": "off",
"@typescript-eslint/explicit-member-accessibility": [
"off",
{
"accessibility": "explicit"
}
],
"@typescript-eslint/naming-convention": [
"error",
{ "selector": "enumMember", "format": ["PascalCase"] },
{
"selector": "property",
"format": ["camelCase", "snake_case", "UPPER_CASE"],
"leadingUnderscore": "allow"
},
{
"selector": "variable",
"format": ["camelCase", "PascalCase", "UPPER_CASE"]
}
],
"@typescript-eslint/no-unused-vars": [
"error",
{
"varsIgnorePattern": "^_",
"argsIgnorePattern": "^_",
"caughtErrorsIgnorePattern": "^_"
}
],
"@typescript-eslint/explicit-module-boundary-types": [
"warn",
{ "allowArgumentsExplicitlyTypedAsAny": true }
],
"brace-style": ["error", "1tbs"],
"id-blacklist": "off",
"id-match": "off",
"max-len": [
"error",
{
"code": 250
}
],
"no-underscore-dangle": "off",
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
],
// NOTE: Remove when @angular-eslint/recommended--extra is available after Angular Upgrade
"no-restricted-imports": [
"error",
{
"paths": [
{
"name": "rxjs/Rx",
"message": "Please import directly from 'rxjs' instead"
}
]
}
],
"@typescript-eslint/member-ordering": [
"error",
{
"default": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
"no-restricted-syntax": [
"error",
{
"selector": "CallExpression[callee.object.name=\"console\"][callee.property.name=/^(debug|info|time|timeEnd|trace)$/]",
"message": "Unexpected property on console object was called"
}
],
"@typescript-eslint/no-inferrable-types": [
"error",
{ "ignoreParameters": true }
],
"@typescript-eslint/no-non-null-assertion": "error",
"no-fallthrough": "error"
}
},
{
"files": ["*.html"],
"extends": [
"plugin:@angular-eslint/template/recommended",
"plugin:prettier/recommended"
],
"rules": {}
}
]
}
VS Code Workspace Settings
{
"angular.enable-strict-mode-prompt": false,
"editor.insertSpaces": false,
"editor.detectIndentation": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"eslint.options": {
"extensions": [".ts", ".html"]
},
"eslint.probe": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"markdown"
],
"javascript.preferences.quoteStyle": "single",
"prettier.bracketSameLine": true,
"prettier.singleQuote": true,
"prettier.tabWidth": 4,
"prettier.useTabs": true,
"typescript.preferences.quoteStyle": "single",
"typescript.updateImportsOnFileMove.enabled": "always",
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.codeActionsOnSave": {
"source.organizeImports": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
"source.organizeImports": true
}
}
