Config for New Angular Project

Some configuration steps I want to remember for setting up a new Angular project.

Create a new project:

ng new my-project --defaults

Omit the --defaults option to interactively choose some configuration options.

Prettier

Angular automatically adds an .editorconfig. Open it and add

max_line_length = 80

Install and configure prettier:

npm install --save-dev prettier prettier-plugin-organize-imports

Create .prettierrc in the project root and add:

{
  "plugins": ["prettier-plugin-organize-imports"]
}

Prettier will pick up the .editorconfig and thus formats everything with a maximum line length of 80 characters when applied, which is objectively how it should be.

Format everything with prettier:

npx prettier . --write

Open the IntelliJ IDEA settings, go to Langugages & Frameworks / JavaScript / Prettier (or just search for prettier) and activate Automatic Prettier configuration, so that the Prettier configuration from the project gets used for code formatting. Also, on the same settings page, add css and html to the file types in the Run for files input field.

ESLint

Install ESLint:

ng add @angular-eslint/schematics --skip-confirmation

And make IntelliJ IDEA aware of it by navigating to the settings at Languages & Frameworks / JavaScript / Code Quality Tools / ESLint and choosing Automatic ESLint configuration. Now ESLint errors get reported right in the editor.