@sr/ui-linter-config-angular

SmartRecruiters’ linting and formatting configs for Angular.

• Linting & formatting configuration for Angular
  • ESLint compatibility
  • Installation & configuration
  • Hints
    • Automatic fix
    • Disable unwanted rule
    • Change rule violation from error to warning
    • Limit warnings
    • Ignore specific files and directories
  • Configuration for Intellij IDEA
    • eslint
    • stylelint
  • Configuration for VSCode
  • Husky - git hooks (optional)
• References
  • License

Linting & formatting configuration for Angular

ESLint compatibility

Current version is designed to work with eslint@^7.

Installation & configuration

Step 1. Install the latest @sr/ui-linter-config-angular, @sr/ui-linter-config-prettier, @sr/ui-linter-config-styles as devDependency (-D) in your project:

$ npm i @sr/ui-linter-config-angular @sr/ui-linter-config-prettier @sr/ui-linter-config-styles -D

Step 2. Install libraries, plugins and extensions required by configs as devDependencies:

$ npx install-peerdeps --dev @sr/ui-linter-config-angular

Step 3. Configure eslint in your project:

In root directory of your project, create .eslintrc.yaml with following content:

extends: '@sr/ui-linter-config-angular'

Step 4. Configure prettier in your project:

In root directory of your client-app and server-app, create .prettierrc.js with following content:

module.exports = {
  ...require("@sr/ui-linter-config-prettier")
};

Step 5. Configure stylelint in your project:

In root directory of your client-app create stylelint.config.js with following content:

module.exports = {
  "extends": require('@sr/ui-linter-config-styles')
};

Step 6. Update script section in your package.json:

{
  "scripts": {
    "lint": "eslint './src/**/*.{ts,html}' && stylelint '**/*.scss'"
  }
}

Step 7. Configure your IDE (VSCode configuration , IntelliJ IDEA configuration).

Step 8. Run linter

To run linter, just type:

$ npm run lint

Step 9. (optional) Configure husky to run linter on pre-commit/pre-push .

Hints

When you first apply linting in your legacy project, you may find many violations. Don't worry, there are some easy ways to handle this:

Automatic fix

Many rules have ability to fix your code. After you configured eslint in your project in a way described above, just run:

npm run lint -- --fix

It is done in such way because if you want to pass params into your custom npm script, you need to do that after --, so in fact what this command does is:

node_modules/.bin/eslint . --fix

Disable unwanted rule

You can easily override eslint configuration. For example, if you really want to use console.log function, you can globally disable no-console rule by changing .eslintrc.yaml:

extends: '@sr/ui-linter-config-angular'
rules:
  no-console: off

or disable this rule in a particular file or in a part of it: Disabling Rules with Inline Comments

Change rule violation from error to warning

Similarly, if you really want to use console.log, but you also want to be somehow warned about it's usage, you can change no-console rule violations severity from error to warning by changing .eslintrc.yaml:

extends: '@sr/ui-linter-config-angular'
rules:
  no-console: warn

or you can change severity of rule in a particular file: Configuring Rules

Limit warnings

And if you decide to change some errors to warnings, you can limit possible warning count to make sure no more lint violations are introduced:

npm run lint -- --max-warnings Int

where Int is a number of maximum number of warnings allowed.

Same, what this command does is actually:

node_modules/.bin/eslint . --max-warnings Int

Ignore specific files and directories

Use .eslintignore file to disable eslint in files and directories: Ignoring Files and Directories

Configuration for Intellij IDEA

eslint

It is very handy to have enabled automatic linting in your IDE:

1. Intellij IDEA -> Preferences
2. Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint
3. Tick Enable
4. Specify ESLint package: <path_to_your_project>/node_modules/eslint
5. Tick Automatic search
6. Tick "Run eslint --fix on save"

If you use Angular config and want to leverage eslint --fix on save while working on component templates:

1. Intellij IDEA -> Preferences
2. Plugins -> Marketplace -> Install File Watchers (by Jetbrains)
3. Go to File Watchers in Preferences
4. Add following custom config:

Name: ESLint Template Fix on Save
File type: HTML
Scope: All places
Program: path to client-app's eslint in node_modules
Arguments: --fix $FilePath$
Output paths to refresh: $FileDir$

5. Mark config as Enabled

stylelint

1. Intellij IDEA -> Preferences -> Stylelint
2. Tick "Enable"
3. Provide path to node
4. Provide path to stylelint package in node_modules

Configuration for VSCode

Visit the extensions section of VSCode (cmd + shift + x for MacOS / ctrl + shift + x for windows) and search for Eslint, Stylelint and Prettier — Code formatter and install it.

Now configure VSCode settings for ESlint to work on autosave. Follow the below-mentioned steps:

• Go to File > Preferences> Settings
• On your right-hand side, there is an icon to Open Settings in JSON format. Click on that icon.
• Add below JSON code there

    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "eslint.format.enable": true,
    "eslint.lintTask.enable": true,
    "eslint.alwaysShowStatus": true,
    "eslint.validate": [
        "javascript",
        "html"
    ],
    "stylelint.enable": true,
	"css.validate": false,
	"less.validate": false,
	"scss.validate": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },

As with projects in a mono repository tha contain client-app and server-app with separate configs, it requires that you tell the VS Code ESLint extension what the current working directories are. Use the eslint.workingDirectories setting to do so. For this repository the working directory setup looks as follows:

"eslint.workingDirectories": [ "./client", "./server" ]

Husky - git hooks (optional)

There is a possibility to run linter/formatter on pre-commit or pre-push. That way you can be sure that each time when somebody will try to commit/push to repo code will be formatted with declared ESlint rules. To do that install husky and lint-staged:

npm i husky -D
npm i lint-staged -D

and then in package.json you can use husky to run eslint on files with declared extensions before each commit. Eslint will try to fix issues (if there are any). Then fixed files will be added to commit:

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,html,css,scss}": [
      "eslint --fix",
      "git add"
    ]
  }

There is also an option to run commands on pre-push. More info can be found here.

References

• http://eslint.org/
• http://eslint.org/docs/rules/

License

MIT