ui-linter-config-angular-test v0.0.8
@sr/ui-linter-config-angular
SmartRecruiters’ linting and formatting configs for Angular.
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:
- Intellij IDEA -> Preferences
- Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint
- Tick Enable
- Specify ESLint package:
<path_to_your_project>/node_modules/eslint
- Tick Automatic search
- Tick "Run eslint --fix on save"
If you use Angular config and want to leverage eslint --fix
on save while working on component templates:
- Intellij IDEA -> Preferences
- Plugins -> Marketplace -> Install File Watchers (by Jetbrains)
- Go to File Watchers in Preferences
- 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$
- Mark config as Enabled
stylelint
- Intellij IDEA -> Preferences -> Stylelint
- Tick "Enable"
- Provide path to node
- 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
License
3 years ago