Skip to content

docs: add notice for eslint-plugin-prettier users for flat config #2364

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: add notice for eslint-plugin-prettier users for flat config #2364

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 80 additions & 0 deletions docs/CONFIGURING_FLAT_CONFIG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,86 @@ module.exports = tseslint.config(

By setting up our config in this way, we have complete control over what rules etc apply to what file types and our separate concerns remain clearer and easier to maintain. The schematics provided by angular-eslint will already configure your project in this way.

## Notes for `eslint-plugin-prettier` users

Prettier is an awesome code formatter which can be used entirely independently of linting.

Some folks, however, like to apply prettier by using it inside of ESLint, using `eslint-plugin-prettier`. If this applies to you then you will want to read this section on how to apply it correctly for HTML templates. Make sure you read and fully understand the information above on the importance of `"overrides"` before reading this section.

If you choose to use `eslint-plugin-prettier`, **please ensure that you are using version 5.1.0 or later**, and apply the following configuration to ESLint and prettier:

**.prettierrc**

```json
{
"overrides": [
{
"files": "*.html",
"options": {
"parser": "angular"
}
}
]
}
```

**eslint.config.js**

```js
// @ts-check

// Allows us to use the typed utility for our config
const tseslint = require('typescript-eslint');
const prettierRecommended = require('eslint-plugin-prettier/recommended');

// Require our workspace root level config and extend from it
const rootConfig = require('../../eslint.config.js');

module.exports = tseslint.config([
// Apply the root config first
...rootConfig,
{
// Any project level overrides or additional rules for TypeScript files can go here
// (we don't need to extend from any typescript-eslint or angular-eslint configs because
// we already applied the rootConfig above which has them)
files: ['**/*.ts'],
extends: [prettierRecommended], // here we inherit from the recommended setup from eslint-plugin-prettier for TS
rules: {
'@angular-eslint/directive-selector': [
'error',
{
type: 'attribute',
prefix: 'lib', // different to our root config, which was "app"
style: 'camelCase',
},
],
'@angular-eslint/component-selector': [
'error',
{
type: 'element',
prefix: 'lib', // different to our root config, which was "app"
style: 'kebab-case',
},
],
},
},
{
// Any project level overrides or additional rules for HTML files can go here
// (we don't need to extend from any angular-eslint configs because
// we already applied the rootConfig above which has them)
files: ['**/*.html'],
extends: [prettierRecommended], // here we inherit from the recommended setup from eslint-plugin-prettier for HTML
rules: {},
},
]);
```

With this setup, you have covered the following scenarios:

- ESLint + prettier together work on Components with external templates (and all other source TS files)
- ESLint + prettier together work on the external template HTML files themselves
- ESLint + prettier together work on Components with inline templates

## Premade configs provided by this project

We have several premade configs within this project which you can extend from (and indeed the configs generated by our schematics do just that). For more information about the configs, check out the README here:
Expand Down