config-angular-Eslint-Prettier.md

Install Angular ESLint

ng add angular-eslint

Install Prettier and Prettier-ESLint dependencies

npm i prettier prettier-eslint eslint-config-prettier eslint-plugin-prettier -D

ESLint configuration

Filename: .eslintrc.json

// @ts-check
const eslint = require('@eslint/js');
const tseslint = require('typescript-eslint');
const angular = require('angular-eslint');

module.exports = tseslint.config(
	{
		files: ['**/*.ts'],
		extends: [
			eslint.configs.recommended,
			...tseslint.configs.recommended,
			...tseslint.configs.stylistic,
			...angular.configs.tsRecommended,
		],
		processor: angular.processInlineTemplates,
		rules: {
			'@angular-eslint/component-class-suffix': [
				'error',
				{
					suffixes: ['Page', 'Component'],
				},
			],
			'@angular-eslint/directive-selector': [
				'error',
				{
					type: 'attribute',
					prefix: 'app',
					style: 'camelCase',
				},
			],
			'@angular-eslint/component-selector': [
				'error',
				{
					type: 'element',
					prefix: ['app', 'shared', 'common', 'auth', 'layout', 'sales'],
					style: 'kebab-case',
				},
			],
			'@angular-eslint/use-lifecycle-interface': ['error'],
			'@typescript-eslint/member-ordering': 0,
			'@typescript-eslint/naming-convention': 0,
		},
	},
	{
		files: ['**/*.html'],
		extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
	}
);

Prettier Configuration

Filename: .prettierrc

{
	"semi": true,
	"useTabs": true,
	"trailingComma": "es5",
	"singleQuote": true,
	"printWidth": 120,
	"tabWidth": 2,
	"endOfLine": "auto",
	"bracketSpacing": true,
	"overrides": [
		{
			"files": "*.scss",
			"options": {
				"singleQuote": false
			}
		},
		{
			"files": "*.html",
			"options": {
				"printWidth": 120
			}
		}
	]
}

Filename: .prettierignore

build
coverage
e2e
node_modules

VSCode extensions:

dbaeumer.vscode-eslint
esbenp.prettier-vscode

Add the following to your .vscode/settings.json file:

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  },
},
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.inlineSuggest.enabled": true

Add Fix Lint and Prettier errors command in package.json

"lint:fix": "ng lint --fix",
"format": "prettier --write \"**/*.{js,mjs,ts,mts,d.ts,html}\" --cache",
"lint:format": "ng lint --fix && npm run format"