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 puede usarse Chocolatey, ejecutando como administrador cinst -y vscode.

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 Material Icon Theme
    Tema de color y conjunto de iconos.
  • indent-rainbow y Bracket Pair Colorizer 2
    Colores para sangrías, aperturas y cierres de paréntesis, llaves y corchetes en el código.
  • ftp-kr
    Para mantener una carpeta remota del proyecto vía FTP.
  • Remote – WSL
    Si trabajas en un equipo con Windows puedes desarrollar desde WSL ejecutando en un terminal de la distribución GNU/Linux instalada la instrucción code . desde la carpeta del proyecto.

Extensiones recomendadas

Git

  • Gitignore
    Extensión sencilla para añadir desde el menú contextual un archivo o carpeta .gitignore.
  • GitGraph
  • Git Tags
  • 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).

Perl

  • Perl Toolbox
  • Perl HTML Template

Rust

  • Rust
    Usa Rust Language Server (RLS) y Rust Analyzer para permitir autocompletado, formato, snippets,…
  • Better TOML
    Para dar soporte a archivos TOML usados en proyectos con Rust.
  • crates
    Ayuda a administrar las dependencias entre los crates del archivo Cargo.toml del proyecto.

Dart & Flutter

  • Dart
  • Flutter

PHP & Drupal

  • PHP Extension Pack
  • PHP Debug
  • PHP IntelliSense
  • Drupal Syntax Highlighting

Java

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

Otras extensiones

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": "vscode-icons"
}

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: 10/08/2020

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 *