you have to config like this:
module.exports = tseslint.config(
{
files: ["**/*.ts"],
extends: [
eslint.configs.recommended,
...tseslint.configs.recommended,
...tseslint.configs.stylistic,
...angular.configs.tsRecommended,
eslintPluginPrettierRecommended
],
processor: angular.processInlineTemplates,
rules: {
"@angular-eslint/directive-selector": [
"error",
{
type: "attribute",
prefix: "your-own",
style: "camelCase",
},
],
"@angular-eslint/component-selector": [
"error",
{
type: "element",
prefix: "your-own",
style: "kebab-case",
},
],
},
},
{
files: ["**/*.html"],
extends: [
...angular.configs.templateRecommended,
...angular.configs.templateAccessibility,
eslintPluginPrettierRecommended
],
rules: {
"prettier/prettier": [
"error",
{
"parser": "angular"
},
]
},
}
);
Answer from Mojtaba Nejad Poor Esmaeili on Stack OverflowVideos
» npm install eslint-plugin-prettier
I created an angular project with NX 18 and that version unfortunately comes with flat eslint.js config which kind of makes my previous custom eslintrc.json configs obsolete.
(Since there is no eslint subreddit and I already asked on stackoverflow (https://stackoverflow.com/questions/79248446/converting-old-eslint-json-to-flat-eslint-js-for-custom-eslint-rules) I'm asking here now..)
It looks like this (with some custom eslint rules I added there, 4 extra rules for ts and 2 rules for html)
const nx = require('@nx/eslint-plugin');
module.exports = [
...nx.configs['flat/base'],
...nx.configs['flat/typescript'],
...nx.configs['flat/javascript'],
{
ignores: ['**/dist'],
},
{
files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
// Override or add rules here
rules: {},
},
...nx.configs['flat/angular'],
...nx.configs['flat/angular-template'],
{
files: ['**/*.ts'],
rules: {
'@angular-eslint/directive-selector': [
'error',
{
type: 'attribute',
prefix: 'app',
style: 'camelCase',
},
],
'@angular-eslint/component-selector': [
'error',
{
type: 'element',
prefix: 'app',
style: 'kebab-case',
},
],
'@typescript-eslint/member-ordering': 'error',
'@typescript-eslint/naming-convention': 'error',
'default-case': 'error',
'default-case-last': 'error',
},
},
{
files: ['**/*.html'],
// Override or add rules here
rules: {
'@angular-eslint/template/attributes-order': ['error'],
'@angular-eslint/template/no-duplicate-attributes': ['error'],
},
},
];How do I include prettier in there with the eslint-plugin-prettier library? (that apparently combines linter and formatter). I really can't find a solution anywhere! Like wtf, why enforce a new config out of nowhere when the doc is bad...
» npm install eslint-config-prettier
- Install eslint:
npm i --save-dev eslint - Init eslint:
For some options you need choose next:npx eslint --init- How would you like to use ESLint?
- To check syntax and find problems
- What format do you want your config file to be in?
- JavaScript
- Install prettier:
npm i --save-dev eslint-config-prettier eslint-plugin-prettier prettier - Create
.prettierrcconfig file:{ "printWidth": 80, "singleQuote": true, "trailingComma": "es5" }
At now you can check style with eslint and fix style with prettier from comand line.
For VSCode integration with eslint and prettier you need to install one of:
- esbenp.prettier-vscode.
- dbaeumer.vscode-eslint;
After that you need to set this extension as default formatter:
- Open command pallette
ctrl+shift+p; - Select
Format Document With...; - Select
Configure Document With...; - Select
Prettier - Code FormatterorESLintbased on your preferences.
Now, eslint will work as linter and prettier as formatter:
VSCode problem tab:

eslint output

If I save file all prettier problems will be fixed (Autoformat on save should be turned on)
Eslint plugin does not apply automatically changes in settings located in
.prettierrc. See issue on github. To fix this you can:
- move
.prettierrccontent in .eslint (not recommended because prettier plugins sometimes do not read this file);- run from command pallette in VSCode
ESLint: Restart ESLint serverafter edit .prettierrcfile.
in eslint config, change
extends: ["prettier"],
to
extends: ['plugin:prettier/recommended'],