Introducción

Visual Studio Code se ha convertido en mi editor de código fuente favorito. Es un desarrollo de Microsoft para sistemas Windows, Linux y macOS:

Instalación

Descargar e instalar la última versión. En Windows se recomienda la instalación local para el usuario. Pero puede usarse Chocolatey, ejecutar como administrador cinst -y vscode y disponerlo para todos los usuarios.

Mis extensiones imprescindibles

  • Git History
    Para ver el registro de Git, el historial de archivos, comparar ramas o confirmaciones.
  • Gitmoji
    Para elegir rápidamente el emoticono necesario para los mensajes commit que sigan la recomendación Gitmoji.
  • PrintCode
    Para imprimir desde el editor. Otra extensión bien valorada es VS Code Printing Free.
  • Markdown All in One
    Para trabajar con Markdown (atajos de teclado, tabla de contenido, vista previa automática, …).
  • Docker
    Imprescindible para la creación, administración y depuración de aplicaciones en contenedores.
  • Night Owl con indent-rainbowMaterial Icon Theme
    Tema de color, colores para las sangrías y conjunto de iconos.
  • Remote – WSL
    Si trabajas en un equipo con Windows puedes desarrollar desde WSL ejecutando code . desde la carpeta del proyecto en un terminal de la distribución Linux.

Extensiones recomendadas

Git

  • Gitignore
    Extensión sencilla para añadir desde el menú contextual un archivo o carpeta .gitignore.
  • GitGraph
    Muestra gráficamente un repositorio Git, configurable e interactivo.
  • Git Tags
    Gestión rápida de etiquetas de un repositorio Git.
  • gitflow
    Administra el repositorio Git del proyecto usando gitflow.
  • GitLens
    Añade nuevas capacidades Git, muy útil para desarrollos en equipo.
  • Ungit
    Integra ungit para trabajar visualmente con Git en el proyecto.

HTML, CSS Y JavaScript

  • Highlight Matching Tag
    Resalta la etiqueta de apertura y cierre de un bloque de código HTML.
  • Quokka.js
    Ofrece una vista previa en vivo de los resultados de un código JavaScript (o TypeScript).

Rust

  • rust-analyzer
    Proporciona autocompletado y revisión de formato del código, identificación de tipos y variables por ámbito, snippets, etc…
  • crates
    Ayuda a administrar las dependencias entre los crates del archivo Cargo.TOML del proyecto.
  • Better TOML
    Para dar soporte a los archivos TOML usados en proyectos con Rust.
  • vscode-fluent
    Permite trabajar con archivos Fluent, un sistema de traducción disponible también para Rust.
  • vscode-sailfish
    Proporciona resaltado de sintaxis para el fantástico gestor de plantillas sailfish.

Se recomienda añadir en la configuración de VS Code (settings.json) el patrón **/target/** a files.watcherExclude para evitar la monitorización de cambios en los directorios target usados por el compilador de Rust.

Dart & Flutter

Otras extensiones

  • Spanish Language Pack for Visual Studio Code
    VSCode en español.
  • ftp-kr
    Para mantener una carpeta remota del proyecto vía FTP.
  • CodeSnap
    Para obtener capturas de pantalla directamente de VSCode.
  • Image Preview
    Muestra a la izquierda de la línea una pequeña vista previa de la imagen referenciada en esa línea.
  • Indented Block Highlighting
    Destaca el área más interna que contiene el cursor.
  • Bookmarks
    Ayuda a navegar por el código, marcar posiciones y moverse entre éstas fácil y rápidamente.
  • Reload
    Añade un botón para recargar rápidamente la ventana, por el motivo que sea.
  • Prettier – Code formatter
    Analiza el código y ajusta el formato teniendo en cuenta la longitud de la línea y el lenguaje usado.
  • TabOut
    Permite usar la tecla Tab para salir de un bloque entre comillas o entre corchetes.
  • AWK
    Resaltado de sintaxis para programas .awk.
  • Kite Autocomplete
    Asistente de programación para escribir código más rápido. Por ahora para Python, Java, Go, PHP, C / C # / C ++, Javascript, HTML / CSS, Typecript, React, Ruby, Scala, Kotlin, Bash, Vue y React.
  • HTML Preview
    Muestra una vista previa de los archivos HTML mientras se editan.
  • Debugger for NW.js
  • Godot Tools

Otros temas de color, otros iconos

Además de este hilo de Twitter donde programadores hablan de sus temas favoritos, recomiendo:

En vscodethemes y VSColors puedes ver las tendencias. Y si no te encaja ninguno, puedes usar themer para crear tu propio tema de color (ver ejemplo).

En cuanto a iconos, también llegué a usar durante un tiempo vscode-icons.

Y si lo que quieres es cambiar el propio espacio de trabajo, puedes probar Peacock.

Preferencias básicas

{
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",
    "editor.inlayHints.enabled": false,
    "editor.rulers": [
        80, 100
    ],
    "extensions.ignoreRecommendations": false,
    "diffEditor.ignoreTrimWhitespace": false,
    "files.trimTrailingWhitespace": true,
    "files.watcherExclude": {
        "**/target/**": true
    },
    "printcode.fontSize": 10,
    "printcode.paperSize": "a4Land",
    "printcode.tabSize": 4,
    "rust-analyzer.inlayHints.enable": false,
    "rust-analyzer.inlayHints.chainingHints.enable": false,
    "telemetry.enableTelemetry": false,
    "workbench.colorCustomizations": {
        "editorRuler.foreground": "#333"
    },
    "workbench.colorTheme": "Night Owl",
    "workbench.iconTheme": "material-icon-theme",
    "window.zoomLevel": 0
}

Consejos y trucos

  • Se pueden sincronizar las preferencias entre diferentes instalaciones de VSCode. Basta ejecutar Archivo > Preferencias > Activar sincronización de configuración y usar una cuenta de Microsoft o GitHub para compartir según las necesidades, configuración, métodos abreviados de teclado, extensiones o el estado de la interfaz, entre otras cosas.
  • Es posible crear una lista de extensiones recomendadas para un espacio de trabajo. El comando Extensions: Configure Recommended Extensions (Workspace) crea un archivo extensions.json en la carpeta .vscode para enumerar las extensiones recomendadas para el proyecto.

Última revisión: 29/08/2022

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *