Setting up VSCode for Linting

This page outlines how to set up VSCode for linting and auto-fixing.
Note: It is not necessary to use VSCode to develop in Design System. However, many members of the team use it, and it may make your life easier.

1. Install the ESLint extension
2. Install the Prettier extension
3. Install the StyleLint extension
4. If you would like these to automatically format on save, you can configure this by going to your Settings File and configuring via the documentation in the extensions page. Here's a jumping off point:

{
  "javascript.validate.enable": false,
  "files.autoSave": "afterDelay",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.tslint": false,
    "source.fixAll.eslint": true
  },
  "editor.renderWhitespace": "all",
  "[typescriptreact]": {
  
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.alwaysShowStatus": true
}