Toolbox

settings.json

A bunch of cool settings for your development environment.

Format on Save

.vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

Better file labels for Next.js

.vscode/settings.json
{
  "workbench.editor.customLabels.patterns": {
    "**/app/**/{page,layout,index}.{ts,tsx}": "(${dirname})/${filename}.${extname}",
    "**/index.{ts,tsx}": "${dirname}/index.${extname}"
  }
}

Credits for @lukeshiels