Hola, en esta nota te comparto la configuraci贸n inicial y las extensiones b谩sicas que uso para desarrollo web frontend en Visual Studio Code.

Configuraci贸n inicial

{
  "window.zoomLevel": 1,
  "editor.wordWrap": "on",
  "files.autoSave": "onFocusChange",
  "window.restoreWindows": "none",
  "security.workspace.trust.untrustedFiles": "open",
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.renderWhitespace": "all",
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "emmet.includeLanguages": {
    "javascript": "html"
  },
  "liveServer.settings.donotVerifyTags": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true
}

Para copiar la configuraci贸n en el archivo settings.json de tu VSCode, s贸lo debes:

  1. Ir al Men煤 File (Archivo),
  2. luego a Preferences (Preferencias),
  3. y seleccionar Settings (Configuraciones),
  4. ah铆 s贸lo da clic en el bot贸n Open Settings (JSON) que est谩 en la esquina superior derecha,
  5. y listo, cop铆a la configuraci贸n que te sirva.

Configuraci贸n VSCode

Extensiones

La siguientes son mis extensiones imperdibles para Visual Studio Code:

  1. Spanish Language Pack for Visual Studio Code: para usar la interfaz de VS Code en espa帽ol.
  2. Live Server: levanta un servidor local de desarrollo con funci贸n de recarga en vivo para p谩ginas est谩ticas y din谩micas desde Visual Studio Code.
  3. Prettier - Code formatter: formatea mi c贸digo frontend (HTML, CSS y JavaScript).
  4. ESLint: para integrar ESLint a Visual Studio Code.

Atajos de teclado

Aprende m谩s

En este curso te explico, c贸mo instalar, configurar y usar Visual Studio Code.

Ver Curso