VSCode workspace set up for React+Node.js project

Location: .vscode/settings.json Content: { // --- // Editor setting "editor.formatOnPaste": false, "editor.formatOnSave": true, "editor.bracketPairColorization.enabled": true, "editor.guides.bracketPairs": "active", "editor.rulers": [ 80, 100 ], "editor.renderWhitespace": "trailing", "editor.suggestSelection": "first", "editor.inlineSuggest.enabled": true, "editor.parameterHints.enabled": true, "editor.quickSuggestions": { "strings": true }, // --- // Code Actions "editor.codeActionsOnSave": { "source.organizeImports": "explicit", "source.fixAll.eslint": "explicit", "source.addMissingImports": "explicit" }, // --- // TypeScript & JavaScript Settings "typescript.updateImportsOnFileMove.enabled": "always", "typescript.suggest.autoImports": true, "typescript.preferences.importModuleSpecifier": "relative", "typescript.preferences.includePackageJsonAutoImports": "on", "javascript.updateImportsOnFileMove.enabled": "always", "javascript.suggest.autoImports": true, "typescript.tsserver.maxTsServerMemory": 4096, "typescript.enablePromptUseWorkspaceTsdk": true, // --- // React/JSX Settings "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "emmet.includeLanguages": { "javascript": "javascriptreact", "typescript": "typescriptreact" }, "emmet.triggerExpansionOnTab": true, // --- // ESLint Configuration "eslint.enable": true, "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ], "eslint.options": { "extensions": [ ".js", ".jsx", ".ts", ".tsx" ] }, "eslint.run": "onSave", // --- // Prettier Configuration "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[yaml]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "prettier.requireConfig": true, "prettier.useEditorConfig": false, // --- // File Associations "files.associations": { ".js": "javascript", ".jsx": "javascriptreact", ".ts": "typescript", ".tsx": "typescriptreact", ".env": "dotenv", ".yaml": "yaml", ".yml": "yaml" }, // --- // File Exclusions "files.exclude": { "/.git": true, "/.DS_Store": true, "/node_modules": true, "/dist": true, "/build": true, "/.next": true, "/coverage": true, "/.tsbuildinfo": true }, // --- // Search Exclusions "search.exclude": { "/node_modules": true, "/dist": true, "/build": true, "/.next": true, "/coverage": true, "/.git": true, "**/*.lock": true }, // --- // Formatting Settings "files.eol": "\n", "files.trimTrailingWhitespace": true, "files.insertFinalNewline": true, "files.trimFinalNewlines": true, // --- // Telemetry "telemetry.telemetryLevel": "off", // --- // Auto Close Tag "auto-close-tag.enableAutoCloseTag": true, "auto-close-tag.enableAutoCloseSelfClosingTag": true, "auto-close-tag.activationOnLanguage": [ "html", "xml", "javascript", "javascriptreact", "typescript", "typescriptreact" ], // --- // Auto Rename Tag "auto-rename-tag.activationOnLanguage": [ "html", "xml", "javascript", "javascriptreact", "typescript", "typescriptreact" ], // --- // npm Scripts "npm.packageManager": "bun", "npm.autoDetect": "on", "npm.enableRunFromFolder": true, // --- // Security "security.workspace.trust.enabled": true, "security.workspace.trust.untrustedFiles": "prompt", }

May 11, 2025 - 05:00

VSCode workspace set up for React+Node.js project

Location: .vscode/settings.json

Content:

{
  // ---
  // Editor setting
  "editor.formatOnPaste": false,
  "editor.formatOnSave": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.rulers": [
    80,
    100
  ],
  "editor.renderWhitespace": "trailing",
  "editor.suggestSelection": "first",
  "editor.inlineSuggest.enabled": true,
  "editor.parameterHints.enabled": true,
  "editor.quickSuggestions": {
    "strings": true
  },
  // ---
  // Code Actions
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit",
    "source.fixAll.eslint": "explicit",
    "source.addMissingImports": "explicit"
  },
  // ---
  // TypeScript & JavaScript Settings
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typescript.suggest.autoImports": true,
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.preferences.includePackageJsonAutoImports": "on",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "javascript.suggest.autoImports": true,
  "typescript.tsserver.maxTsServerMemory": 4096,
  "typescript.enablePromptUseWorkspaceTsdk": true,
  // ---
  // React/JSX Settings
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  },
  "emmet.triggerExpansionOnTab": true,
  // ---
  // ESLint Configuration
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.options": {
    "extensions": [
      ".js",
      ".jsx",
      ".ts",
      ".tsx"
    ]
  },
  "eslint.run": "onSave",
  // ---
  // Prettier Configuration
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.requireConfig": true,
  "prettier.useEditorConfig": false,
  // ---
  // File Associations
  "files.associations": {
    "*.js": "javascript",
    "*.jsx": "javascriptreact",
    "*.ts": "typescript",
    "*.tsx": "typescriptreact",
    ".env*": "dotenv",
    "*.yaml": "yaml",
    "*.yml": "yaml"
  },
  // ---
  // File Exclusions
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true,
    "**/.next": true,
    "**/coverage": true,
    "**/*.tsbuildinfo": true
  },
  // ---
  // Search Exclusions
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true,
    "**/.next": true,
    "**/coverage": true,
    "**/.git": true,
    "**/*.lock": true
  },
  // ---
  // Formatting Settings
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  // ---
  // Telemetry
  "telemetry.telemetryLevel": "off",
  // ---
  // Auto Close Tag
  "auto-close-tag.enableAutoCloseTag": true,
  "auto-close-tag.enableAutoCloseSelfClosingTag": true,
  "auto-close-tag.activationOnLanguage": [
    "html",
    "xml",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  // ---
  // Auto Rename Tag
  "auto-rename-tag.activationOnLanguage": [
    "html",
    "xml",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  // ---
  // npm Scripts
  "npm.packageManager": "bun",
  "npm.autoDetect": "on",
  "npm.enableRunFromFolder": true,
  // ---
  // Security
  "security.workspace.trust.enabled": true,
  "security.workspace.trust.untrustedFiles": "prompt",
}