DEV Community

Midhun Krishnan R
Midhun Krishnan R

Posted on

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": "Monaco, 'Courier New', monospace",
  "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
}

Enter fullscreen mode Exit fullscreen mode

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!