ui-linter-config-styles-test

@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

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

    "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

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

License

MIT