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

  • 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, …).
  • Git History
    Para ver el registro de Git, el historial de archivos, comparar ramas o confirmaciones.
  • 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

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.

Configuración básica

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

Consejos y trucos

Extensiones recomendadas

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.

Notas

Para JavaScript, Node.js:

  • https://developer.okta.com/blog/2019/05/08/top-vs-code-extensions-for-nodejs-developers
  • https://code.visualstudio.com/docs/nodejs/extensions
  • https://marketplace.visualstudio.com/items?itemName=waderyan.nodejs-extension-pack
  • https://www.sitepoint.com/vs-code-extensions-javascript-developers/
  • https://standardjs.com/rules-en.html
  • https://hub.packtpub.com/12-visual-studio-code-extensions-that-node-js-developers-will-love-sponsored-by-microsoft/
  • https://blog.binpar.com/configurando-visual-studio-code-para-nuestra-base-de-c%C3%B3digo-es6-con-node-bf4539df865b

Última revisión: 24/12/2021

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 *