Configuración de VS Code imprescindible para el desarrollo web

La semana pasada escribí sobre las extensiones VS Code imprescindibles para el desarrollo web. Esta vez, escribo sobre la configuración recomendada para asegurarme de que estas extensiones y el editor de código VS Code funcionen correctamente.

VS Code es una excelente herramienta para escribir software, y cuando instalas las extensiones correctas, puede ser muy potente. Sin embargo, si estas extensiones y el VS Code no se configuran correctamente, es posible que muchas de sus funciones o extensiones no funcionen de la manera esperada.

A continuación te muestro una lista de configuraciones que uso como base cuando configuro VS Code para cualquier tipo de desarrollo web. También puedes obtenerlos aquí:
https://gist.github.com/ricardodsanchez/179f693c8c843abc782e3e40112904aa

La forma de llegar a la configuración en VS Code es presionando Ctrl-Shift P y luego escribiendo “settings”. Se abrirá un archivo settings.json y aquí es donde puedes eliminar todas las configuraciones existentes y pegar las configuraciones a continuación.

{
  "telemetry.enableTelemetry": false,
  "telemetry.enableCrashReporter": false,
  "files.autoSave": "afterDelay",
  "files.associations": {
    "*.md": "markdown"
  },
  "window.zoomLevel": 0,
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "breadcrumbs.enabled": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.acceptSuggestionOnEnter": "on",
  "editor.detectIndentation": false,
  "editor.fontFamily": "'Source Code Pro', Menlo, Consolas, Courier, monospace",
  "editor.fontSize": 13,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true,
  },
  "editor.renderWhitespace": "none",
  "editor.snippetSuggestions": "top",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.wrappingIndent": "indent",
  "extensions.ignoreRecommendations": true,
  "extensions.showRecommendationsOnlyOnDemand": true,
  "files.exclude": {
    "**/._*": true
  },
  "files.insertFinalNewline": true,
  "html.format.endWithNewline": true,
  "html.format.extraLiners": "body",
  "html.format.indentInnerHtml": true,
  "html.format.unformatted": "b,em,i,span,strong,wbr",
  "html.format.wrapLineLength": 0,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.port": 0,
  "workbench.colorCustomizations": {
    "editorIndentGuide.activeBackground": "#FFA500"
  },
  "workbench.editor.tabSizing": "shrink",
  "workbench.editor.enablePreview": false,
  "workbench.editor.enablePreviewFromQuickOpen": false,
  "gitlens.advanced.messages": {
    "suppressGitDisabledWarning": true
  }
}

Eso es todo por hoy, recuerda suscribirte y avísame si tienes algún comentario o pregunta en el area de comentarios de abajo.

Scroll al inicio