Visual Studio Code

Es gratuito y el código está disponible con una licencia MIT.
Integra soporte para Git, depuración de código y resaltado de sintaxis.
Es personalizable y extensible con multitud de extensiones disponibles para instalar.

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-rainbow y Material 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.

PHP & Drupal

Perl

Perl Toolbox

Dart & Flutter

Java

Extension Pack for Java
Language Support for Java
Visual Studio IntelliCode (también para JavaScript)
Debugger for Java
Test Runner for Java
Maven for Java

Node.js & JavaScript

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:

Temas que he usado, Pale Fire, Cyberpunk, Horizon, Monokai Pro y Andromeda (Colorizer).
También están bien valorados Dracula, One Dark Pro, Noctis, Nord, Flat UI o GitHub Theme.
Destacan, aunque con menos descargas, Aperture, Neon Vommit Color Theme y lucy.
Y si buscas un tema claro, puedes probar Daobeam o Wheat Theme.

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!