DEV Community

Midhun Krishnan R
Midhun Krishnan R

Posted on • Edited on

3

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

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

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!

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay