ui-linter-config-styles-test v0.0.6
@sr/ui-linter-config-react
SmartRecruiters’ linting and formatting configs for SCSS styles.
Linting & formatting configuration for SCSS styles
ESLint compatibility
Current version is designed to work with eslint@^7
.
Installation & configuration
Step 1. Install the latest @sr/ui-linter-config-styles
as devDependency (-D
) in your project:
$ npm i @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-styles
Step 3. 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 4. Update script section in your package.json
:
{
"scripts": {
"lint:styles": "stylelint '**/*.scss'"
}
}
Step 5. Configure your IDE (VSCode configuration , IntelliJ IDEA configuration).
Step 6. Run linter
To run linter, just type:
$ npm run lint
Step 7. (optional) Configure husky to run linter on pre-commit/pre-push .
Configuration for Intellij IDEA
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
"stylelint.enable": true,
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
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