A guide to setup css/scss linting, html/css/scss formatting in your project using VS Code.

This setup also prevents invalid, poorly formatted code getting committed to repo.

---

First install Stylelint, Prettier extensions in VS Code.

Initialize npm in your project if not already done by using the below command:

npm init -y

Enter the following commands in terminal:

npm install --save-dev --save-exact prettier

npm init stylelint

Include .vscode folder, .stylelintrc.json, .prettierrc.json from this repo to your project.

Read more up on .vscode folder here.

Rules specified in .stylelintrc.json are from here.

Configuration specified in .prettierrc.json are from here.

---

Below step is only needed if using scss

npm install --save-dev stylelint stylelint-config-standard-scss

Replace the default value of extends key in .stylelintrc.json with the below code:

{
  "extends": ["stylelint-config-standard-scss"]
}

---

npm install --save-dev lint-staged

Inside package.json, add the below code after devDependencies.

"lint-staged": {
  "*.{css,scss}" : ["stylelint", "prettier --write"],
  "*.html": "prettier --write"
}

Folder example

"lint-staged": {
  "src/scss/**/*.scss" : ["stylelint", "prettier --write"],
  "src/app/**/*.html" : "prettier --write"
}

Matches all scss files inside the src/scss directory.

Matches all html files inside the src/app directory.

Another example

"src/**/*.{html,scss}" : "prettier --write"

---

npx husky-init -and npm install

Replace the default value inside .husky/pre-commit, with the below code:

npx lint-staged

---

Finally restart VS Code. Open your project and type some invalid code in the css/scss file, see if the warnings are showing up in the Problems panel.

Try to commit this file, the process will not complete as it contains invalid code.

---

Notes:

1. Formatting for certain files can be excluded using .prettierignore
2. Linting for certain files can be excluded using .stylelintignore
3. Installing SonarLint extension will give additional linting rules.