jonmircha

jonmircha

Profesor, Programador Web & Maratonista 🏃x15 · Celiaco por amor · Esencialista: Menos pero mejor.


Mi configuración de Visual Studio Code

Hola, en esta nota te comparto la configuración inicial y las extensiones que uso para Visual Studio Code.

Configuración Inicial

Para copiarla 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.
{
  "editor.fontFamily": "'Consolas, 'Courier New', monospace",
  "editor.wordWrap": "on",
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "editor.renderWhitespace": "all",
  "editor.tabSize": 2,
  "emmet.syntaxProfiles": {
    "javascript": "html"
  },
  "emmet.includeLanguages": {
    "javascript": "html"
  },
  "emmet.triggerExpansionOnTab": true,
  "files.autoSave": "onFocusChange",
  "window.restoreWindows": "none",
  "window.zoomLevel": 1,
  "workbench.colorTheme": "Monokai",
  "workbench.iconTheme": "vs-seti",
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "terminal.integrated.fontFamily": "Consolas, 'Courier New', monospace",
  "extensions.ignoreRecommendations": true,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.snippetSuggestions": "top",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "[html]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "vscode.html-language-features"
  }
}

Extensiones

La siguientes son mis imperdibles para Visual Studio Code:

  1. Spanish Language Pack for Visual Studio Code: para usar la interfaz de VSCode en español.
  2. Prettier - Code formatter: formatea mi código frontend (HTML, CSS y JavaScript).
  3. Bracket Pair Colorizer: pinta de diferente color cada par de paréntesis, corchetes y llaves en el código para que sea más fácil identificar cada juego de estos caracteres.
  4. EditorConfig for VS Code: para integrar EditorConfig a Visual Studio Code.
  5. ESLint: para integrar ESLint a Visual Studio Code.
  6. CSS Flexbox Cheatsheet: abre una hoja de trucos flexbox directamente en Visual Studio Code.

Videotutorial

En este video te explico mi configuración inicial de Visual Studio Code

Si te sirvió mi contenido, compártelo 🤗.

📭 La lista de MirCha

Suscríbete a mi lista, una vez al mes envío el contenido que escribo, grabo o produzco, 🤗 esperando pueda aportar valor personal o profesional.

Puedes darte de baja en cualquier momento, sin hacer preguntas.

¿Te animas?

Si te gusta mi contenido y quieres apoyarme invítame un taco por paypal.

Invítame un Taco