Angular, Eslint, Prettier & Editors

Summary

• 1. Presentation
• 2. Prerequisites
  • 2.1. Install NVM or Node
  • 2.2. Install a global Angular CLI (optional)
• 3. Installation
• 4. StackBlitz
  • 4.1. Launching the project
  • 4.2. Avoid error with zone.js
• 5. Create your Angular project step by step
  • 5.1. Case 1: Generate a new Angular app using directly ESlint schematics & use Prettier
    • 5.1.1. Step #1: Remove the old Angular app
    • 5.1.2. Step #2: Generate an empty Angular workspace
    • 5.1.3. Step #3: Install ESLint
    • 5.1.4. Step #4: Generate a new Angular app in the workspace using ESLint
    • 5.1.5. Step #5: Install Prettier locally
    • 5.1.6. Step #6: Format all files with Prettier
    • 5.1.7. Script available
  • 5.2. Case 2: Create an original Angular app, convert TSLint to ESlint & use Prettier
    • 5.2.1. Step #1: Remove the old Angular app
    • 5.2.2. Step #2: Create an Angular app
    • 5.2.3. Step #3: Install ESLint
    • 5.2.4. Step #4: Convert TSLint to ESlint
    • 5.2.5. Step #5: Install Prettier locally
    • 5.2.6. Step #6: Format all files with Prettier
    • 5.2.7. Script available
• 6. Set up your editor
  • 6.1. PHPStorm
    • 6.1.1. Install PHPStorm
    • 6.1.2. Configure a local Node.js interpreter
    • 6.1.3. Configure ESLint
    • 6.1.4. Configure Prettier
    • 6.1.5. Reformat with Prettier: From the contextual menu
    • 6.1.6. Reformat with Prettier: On save
  • 6.2. VS Code
    • 6.2.1. Install VS Code
    • 6.2.2. Install ESLint
    • 6.2.3. Configure ESLint
    • 6.2.4. Install Prettier
    • 6.2.5. Reformat with Prettier: From the contextual menu
    • 6.2.6. Reformat with Prettier: On save
• 7. Semantic Versioning
• 8. Resources
  • 8.1. NVM & Node
  • 8.2. Angular, ESLint & Prettier
  • 8.3. PHPStorm
  • 8.4. VS Code
  • 8.5. StackBlitz
• 9. License

1. Presentation

Create a new Angular project with a minimal configuration of ESLint & Prettier, set up your editor (PHPStorm, VSCode) and launch the project in StackBlitz.

Versions used :

Label	Version
node	v18.13.0
npm	8.19.3
Angular	15.1.5
@angular-eslint/schematics	15.2.1
Prettier	2.7.1
PHPStorm	2022.3.2
VS Code	1.75.1

⬆ Back to top

2. Prerequisites

2.1. Install NVM or Node

To launch locally that project, you will need to install NVM (Node Version Manager) or Node.

📎	More information on: NVM: https://github.com/nvm-sh/nvm Node: https://nodejs.org/en/download

In my case, I used Node in KDE Neon (see https://github.com/nodejs/snap).

⬆ Back to top

2.2. Install a global Angular CLI (optional)

If you want to regenerate step by step a new Angular project, you will need to install/update a global Angular CLI:

$ npm install -g @angular/cli

📎	More information on https://angular.io/cli

⬆ Back to top

3. Installation

1. $ git clone git@github.com:jprivet-dev/angular-eslint-prettier.git

2. $ cd angular-eslint-prettier/app

3. $ npm install

4. $ ng serve

5. Open your browser on http://localhost:4200/

After installation, you can Set up your editor.

⬆ Back to top

4. StackBlitz

4.1. Launching the project

📎	More information on https://developer.stackblitz.com/guides/integration/open-from-github

⬆ Back to top

4.2. Avoid error with zone.js

Angular CLI locally generates by default the main.ts file without zone.js:

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Which creates an error (NG0908) when I launch the project in StackBlitz:

Error: NG0908: In this configuration Angular requires Zone.js

At this stage, locally everything works fine with $ ng serve.

So to solve the problem in StackBlitz, I have to import zone.js in main.ts:

main.ts

import 'zone.js/dist/zone'; // Avoid error in StackBlitz
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

After that, everything worked perfectly on StackBlitz:

But triggers a warning locally with $ ng serve:

Warning: .../angular-stackblitz/src/main.ts depends on 'zone.js/dist/zone'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

⚠️	I created an issue on StackBlitz: stackblitz/core#2366. I am looking for a single solution without zone.js, to make everything works, without errors and alerts, in StackBlitz and locally with $ ng serve. Still searching…​

📎	See manfredsteyer/ngx-build-plus#4 (comment)

⬆ Back to top

5. Create your Angular project step by step

💡	It is possible to create the content of the angular-eslint-prettier/app folder, from scratch. To do this, just remove angular-eslint-prettier/app folder and generate a new Angular projet in angular-eslint-prettier : the /app folder will be regenerated by Angular CLI.

5.1. Case 1: Generate a new Angular app using directly ESlint schematics & use Prettier

5.1.1. Step #1: Remove the old Angular app

$ [[ -d app ]] && rm -rf app

⬆ Back to top

5.1.2. Step #2: Generate an empty Angular workspace

📎	Prerequisites: Install a global Angular CLI (optional)

$ ng new app --create-application false --defaults
$ cd app

⬆ Back to top

5.1.3. Step #3: Install ESLint

$ ng add @angular-eslint/schematics

💡

If you have that error: ✔ Packages successfully installed. NOT SUPPORTED: keyword "id", use "$id" for schema ID Execute the following command (the next tag is used by some projects to identify the upcoming version): $ ng add @angular-eslint/schematics@next More information on: angular-eslint/angular-eslint#790 (comment). https://docs.npmjs.com/cli/v9/commands/npm-dist-tag#purpose

At the end of the process, you will get a confirmation message:

...
CREATE .eslintrc.json (984 bytes)
UPDATE package.json (1451 bytes)
UPDATE angular.json (3456 bytes)
✔ Packages installed successfully.

⬆ Back to top

5.1.4. Step #4: Generate a new Angular app in the workspace using ESLint

$ ng generate @angular-eslint/schematics:application app --project-root --routing --style scss --defaults --strict

⬆ Back to top

5.1.5. Step #5: Install Prettier locally

$ npm install --save-dev --save-exact prettier
$ echo {} >.prettierrc.json
$ cp .gitignore .prettierignore

💡	Base your .prettierignore on .gitignore and .eslintignore (if you have one).

📎	More information on https://prettier.io/docs/en/install.html.

⬆ Back to top

5.1.6. Step #6: Format all files with Prettier

$ npx prettier --write .

5.1.7. Script available

Automatically execute all the above commands, in the angular-eslint-prettier folder, with the following script:

$ . scripts/generate-app.sh

⬆ Back to top

5.2. Case 2: Create an original Angular app, convert TSLint to ESlint & use Prettier

5.2.1. Step #1: Remove the old Angular app

$ [[ -d app ]] && rm -rf app

5.2.2. Step #2: Create an Angular app

📎	Prerequisites: Install a global Angular CLI (optional)

$ ng new app --skip-git true --routing --style scss --defaults --strict
$ cd app

5.2.3. Step #3: Install ESLint

$ ng add @angular-eslint/schematics

💡

If you have that error: ✔ Packages successfully installed. NOT SUPPORTED: keyword "id", use "$id" for schema ID Execute the following command (the next tag is used by some projects to identify the upcoming version): $ ng add @angular-eslint/schematics@next More information on: angular-eslint/angular-eslint#790 (comment). https://docs.npmjs.com/cli/v9/commands/npm-dist-tag#purpose

At the end of the process, you will get a confirmation message:

...
CREATE .eslintrc.json (984 bytes)
UPDATE package.json (1451 bytes)
UPDATE angular.json (3456 bytes)
✔ Packages installed successfully.

⬆ Back to top

5.2.4. Step #4: Convert TSLint to ESlint

# Avoid error: Path "/tslint.json" does not exist.
$ echo {} >tslint.json

$ ng g @angular-eslint/schematics:convert-tslint-to-eslint

At the end of the process, you will get a confirmation message:

...
DELETE tslint.json
UPDATE angular.json (3456 bytes)
UPDATE package.json (1451 bytes)
✔ Packages installed successfully.

⬆ Back to top

5.2.5. Step #5: Install Prettier locally

$ npm install --save-dev --save-exact prettier
$ echo {} >.prettierrc.json
$ cp .gitignore .prettierignore

💡	Base your .prettierignore on .gitignore and .eslintignore (if you have one).

📎	More information on https://prettier.io/docs/en/install.html

⬆ Back to top

5.2.6. Step #6: Format all files with Prettier

$ npx prettier --write .

⬆ Back to top

5.2.7. Script available

Automatically execute all the above commands, in the angular-eslint-prettier folder, with the following script:

$ . scripts/convert-app.sh

⬆ Back to top

6. Set up your editor

6.1. PHPStorm

6.1.1. Install PHPStorm

PhpStorm is a cross-platform IDE that provides consistent experience on the Windows, macOS, and Linux operating systems.

📎	More information on https://www.jetbrains.com/help/phpstorm/installation-guide.html

⬆ Back to top

6.1.2. Configure a local Node.js interpreter

💡	In my case I use Node.

Configure in Settings > Languages & Frameworks > Node.js. PHPStorm automatically finds Node and NPM:

If you use NVM, you can have (for example):

• Node interpreter: ~/.nvm/versions/node/v16.15.1/bin/node

• Package manager: npm ~/.nvm/versions/node/v16.15.1/bin/npm

📎	More information on https://www.jetbrains.com/help/phpstorm/developing-node-js-applications.html#ws_node_configure_local_node_interpreter.

⬆ Back to top

6.1.3. Configure ESLint

🔥	Before you start: Configure a local Node.js interpreter.

Configure in Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint :

After the configuration, you can see the ESLint alerts in your code. For example:

📎	More information on https://www.jetbrains.com/help/phpstorm/eslint.html

⬆ Back to top

6.1.4. Configure Prettier

🔥	Before you start: Configure a local Node.js interpreter.

Configure in Settings > Languages & Frameworks > JavaScript > Prettier :

📎	More information on https://www.jetbrains.com/help/phpstorm/prettier.html

⬆ Back to top

6.1.5. Reformat with Prettier: From the contextual menu

After the configuration, you can reformat your code :

• With the shortcut Ctrl+Alt+Maj+P.

• From the contextual menu (Right click > Reformat with Prettier).

6.1.6. Reformat with Prettier: On save

To reformat on save, Go in Settings > Languages & Frameworks > JavaScript > Prettier, and check On save option:

If you click on All actions on save…​, you will see the list of all activated actions:

💡	I also use the Optimize import option. This removes unused imports and organizes import statements in the current file. See https://www.jetbrains.com/help/phpstorm/creating-and-optimizing-imports.html#optimize-imports.

⬆ Back to top

6.2. VS Code

6.2.1. Install VS Code

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

📎	More information on https://code.visualstudio.com/

6.2.2. Install ESLint

Install the ESLint extension of Microsoft: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint.

6.2.3. Configure ESLint

After the installation, you can immediately see the ESLint alerts in your code. For example:

⬆ Back to top

6.2.4. Install Prettier

Install the Prettier - Code formatter extension: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode.

⬆ Back to top

6.2.5. Reformat with Prettier: From the contextual menu

After the installation, you can reformat your code :

• With the shortcut Ctrl+Alt+I.

• From the contextual menu (Right click > Format Document).

If you have an alert Configure Default Formatter:

Click on the button Configure…​ and select Prettier - Code formatter:

6.2.6. Reformat with Prettier: On save

To reformat on save, go on File > Preferences > Settings [Ctrl+,], and choose Text Editor > Formatting. Check Format On Paste and Format On Save:

From now on, whenever you paste code or save, the code will be reformatted.

Before:

After (on paste code or save):

⬆ Back to top

7. Semantic Versioning

📎	Based on https://semver.org/

v[MAJOR].[ANGULAR_VERSION].[MINOR].[PATCH]

With [ANGULAR_VERSION] = [ANGULAR MAJOR + ANGULAR MINOR]

Example, with v1 of this repository with Angular 15.1.6:

v1.1501.0.0

⬆ Back to top

8. Resources

8.1. NVM & Node

• https://github.com/nvm-sh/nvm

• https://nodejs.org/en/download

8.2. Angular, ESLint & Prettier

• https://blog.ninja-squad.com/2021/03/31/migrating-from-tslint-to-eslint/

• https://github.com/typescript-eslint/tslint-to-eslint-config

• https://github.com/angular-eslint/angular-eslint#migrating-an-angular-cli-project-from-codelyzer-and-tslint

• https://www.npmjs.com/package/@angular-eslint/schematics

• angular-eslint/angular-eslint#790 (comment)

8.3. PHPStorm

• https://www.jetbrains.com/help/phpstorm/developing-node-js-applications.html#ws_node_configure_local_node_interpreter

• https://www.jetbrains.com/help/phpstorm/eslint.html

• https://www.jetbrains.com/help/phpstorm/prettier.html

• https://www.jetbrains.com/help/phpstorm/creating-and-optimizing-imports.html#optimize-imports

8.4. VS Code

• https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

• https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

• https://khalilstemmler.com/blogs/tooling/prettier/

8.5. StackBlitz

• https://developer.stackblitz.com/guides/integration/open-from-github

⬆ Back to top

9. License

This repository is released under the MIT License

---

⬆ Back to top