Recommended Settings for VS Code for react js developers

#webdev #vscode #react #developer

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"
}

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more