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:
- 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 ejecutandocode .
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 archivoCargo.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.
Perl
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
- Top 10 Visual Studio Code Extensions for Node.js
- 12 Visual Studio Code extensions that Node.js developers will love
- JavaScript extensions for VS Code
- Node.js Extension Pack
- 10 Must-have VS Code Extensions for JavaScript Developers
- Configurando Visual Studio Code para nuestra base de código ES6 con node
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 teclaTab
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
Dejar un comentario
¿Quieres unirte a la conversación?Siéntete libre de contribuir!