DEV Community

Midhun Krishnan R
Midhun Krishnan R

Posted on • Edited on

5

Recommended Settings for VS Code for react js developers

These are some recommended settings for VS Code for react js developers.
Some of them are commented, if you love to use it you can uncomment those.

{
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.suggestOnTriggerCharacters": true,
  "editor.tabCompletion": "on",
  "editor.wordBasedSuggestions": "matchingDocuments",
  "javascript.suggest.autoImports": true,
  "typescript.suggest.autoImports": true,
  "eslint.enable": true,
  "prettier.requireConfig": false,
  "files.associations": {
    "*.js": "javascriptreact",
    "*.jsx": "javascriptreact"
  },
  "typescript.validate.enable": true,
  "javascript.validate.enable": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "javascriptreact": "html"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "explorer.confirmDragAndDrop": false,
  "explorer.confirmDelete": false,
  "editor.accessibilitySupport": "off",
  "workbench.iconTheme": "material-icon-theme",
  "window.zoomLevel": 0,
  "[javascript]": {
    "javascript.preferences.renameMatchingJsxTags": true,
    "editor.maxTokenizationLineLength": 2500
  },
  "extensions.ignoreRecommendations": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "settingsSync.ignoredSettings": [],
  "workbench.settings.applyToAllProfiles": [],

  // Additional Suggestions:
  "editor.fontSize": 14,
  "editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  // "prettier.singleQuote": true,
  "prettier.trailingComma": "all",
  // "prettier.arrowParens": "avoid",
  // "prettier.printWidth": 100,
  "editor.minimap.enabled": false,
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.cursorBlinking": "smooth",
  "editor.renderWhitespace": "selection",
  "editor.showFoldingControls": "always",
  "editor.wordWrap": "on",
  "files.trimTrailingWhitespace": true,
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "terminal.integrated.rendererType": "dom",
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.fontFamily": "'Inconsolata for Powerline', monospace",
  // "workbench.editor.enablePreview": false, // this settings will open pages if just selected it
  "workbench.editor.tabSizing": "shrink",
  "workbench.startupEditor": "none",
  "workbench.statusBar.visible": true,
  // "window.menuBarVisibility": "toggle",
  "breadcrumbs.enabled": true,
  "search.showLineNumbers": true,
  "editor.guides.indentation": true,
  // "workbench.colorTheme": "GitHub Dark Default",
  "json.schemas": [],
  // "files.autoSave": "afterDelay",
  "supermaven.enable": {
    "*": true
  },
  // "security.promptForLocalFileProtocolHandling": false,
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ],
  "redhat.telemetry.enabled": false,
  "security.promptForLocalFileProtocolHandling": false,
  "vscodeGoogleTranslate.preferredLanguage": "Spanish"
}

Enter fullscreen mode Exit fullscreen mode

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (1)

Collapse
 
enpk_aditya_cfba90528899d profile image
enpk aditya

Great suggestions for VS Code settings; I'm excited to try these out and enhance my coding experience!

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay