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-styled-components jpoissonnier.vscode-styled-components
• 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"],
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "editor.quickSuggestions": {
    "strings": true,
    "other": true
  },
  "tailwindCSS.lint.cssConflict": "ignore",
  "tailwindCSS.experimental.classRegex": ["tw`([^`]*)"]
}