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.