4.1.5 Tooling

In the following steps, you are required to edit TypeScript, CSV, JSON, JS and Docker Compose files. Therefore, we strongly recommend that you install and use the free VSCode IDE from Microsoft.

The following VSCode Extensions should be installed for the best developer experience:

• Color Highlight

• Docker

• Docker Compose

• EditorConfig for VSCode

• ESLint

• Git Blame

• Git History

• GitLens

• GraphQL

• Prettier

• Stylelint

• vscode-icons

• vscode-styled-components

• YAML

• WSL (if you're using Windows Subsystem for Linux)

The following settings.json in VSCode are also helpful:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": true }
  ],
  "typescript.updateImportsOnFileMove.enabled": "always",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}

Terminal helper

Ohmyzsh is a fantastic helper for Terminal