VS Code

List of useful plugins for VS Code:

To install a plugin in VS Code, launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install ...

• Prettier - Code formatter esbenp.prettier-vscode
• ESLint dbaeumer.vscode-eslint
• Tailwind CSS IntelliSense bradlc.vscode-tailwindcss
• PostCSS Language Support csstools.postcss (useful for editing global css file)
• VSCode GraphQL graphql.vscode-graphql
• styled-jsx blanu.vscode-styled-jsx
• styled-jsx Language Server Divlo.vscode-styled-jsx-languageserver

To configure the extension, launch VS Code Quick Open (Ctrl+P) and open the settings.json.

Sample VS Code config:

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.format.enable": false,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.validate": ["typescript", "javascript"],
  "eslint.workingDirectories": [{ "mode": "auto" }],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "editor.quickSuggestions": {
    "strings": true,
    "other": true
  },
  "tailwindCSS.lint.cssConflict": "ignore",
  "tailwindCSS.experimental.classRegex": ["cn\\(([^)]*)\\)"]
}

Conventional Commit Snippet

We have recently adopted https://www.conventionalcommits.org/en/v1.0.0/ for our commits. Press Ctrl/Cmd+Shift+P => Configure User Snippets => Plain text (or git commit) and paste in the following snippet.

"Conventional Commit": {
  "prefix": "cc",
  "body": [
    "${1|fix,feat,style,refactor,test,docs,build,chore,ci|}${2:(${3:scope})}: ${4:summary}",
  ],
  "description": "Conventional Commit message template"
},