VSCode Automatic Linting

VSCode-Linting.md

When developing in medium to larger teams, becomes more important to be able to automatically maintain code styling throughout the project to maintain readability and clarity. This rule also applies to smaller projects as well, abiet at times easier to manage ("New guy, please remove the 5 blank lines in a row in the method. And the blank spaces after the statements.").

Below is a quick snip for configuring VSCode to automagically take care of this every time you press save (Ctrl+S). The following assumes you already have a project workspace already started in VSCode.

TL;DR Configuration

Key files:

• .vscode/extensions.json
• .vscode/settings.json

Key extensions:

• esbenp.prettier-vscode
• stylelint.vscode-stylelint
• dbaeumer.vscode-eslint

Recommended Extensions

Set the recommended extensions

1. In the project's root, navigate to the folder, .vscode
2. Open extensions.json
3. Add the following recommendations

Sample:

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "stylelint.vscode-stylelint",
    "dbaeumer.vscode-eslint"
  ]
}

Other Helpful Extensions

• eamodio.gitlens - GIT assistant to quickly glimpse into when/why/who a line or code block was changed
• humao.rest-client - REST Client allows you to send HTTP request and view the response
• firsttris.vscode-jest-runner - Debugging tests and test-suites
• angular.ng-template - Rich editing experience for Angular templates
• nrwl.angular-console - UI for Nx & Lerna

Settings

Lastly, we'll override the user's settings for the project. The following uses

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.validate": ["json"]
}

Extra Configurations

The following files are used for configuring your style rules and linter

• .editorconfig
• .eslintignore - List path/files of what to ignore
• .eslintrc.json - ES Lint rules
• eslintrc-custom-overrides.json
• .stylelintrc.json - Style Lint rules
• .prettierignore - Prettier formatting ignore file