Visual Studio Code y sus mejores plugins (Parte II)
Tags: vscode, code, webdev
Published: 2020-06-08 15:55:26

Continuamos revisando extensiones útiles para desarrollo web full stack en [Visual Studio Code](https://code.visualstudio.com/).

Sin mas rodeos, vamos de lleno a las extensiones: 

## **Extensiones que recomiendo** :computer:
### 1. [Material Icon Theme](https://github.com/PKief/vscode-material-icon-theme)

Material Icon Theme nos proporciona un abanico bastante extenso de iconos mimimalistas y además altamente personalizables, pudiendo configurar desde la paleta de colores hasta la opacidad de los iconos. 

![Material Icon Theme](https://raw.githubusercontent.com/crisdux/img-dev-to/master/theme.png)

### 2.[MySQL](https://github.com/formulahendry/vscode-mysql)

Una de mis favoritas de todo el listado.

Ahora es posible gestionar bases de datos MySQL sin salir del editor de código, entre las principales características de este plugin se pueden mencionar:

:small_orange_diamond: Soporte SSL para administración de bases de datos.
:small_orange_diamond: Listados de servidores disponibles.
:small_orange_diamond: Listado de bases de datos disponibles.
:small_orange_diamond: Ejecución de consultas. 

![mysql](https://raw.githubusercontent.com/formulahendry/vscode-mysql/master/images/run.png)

### 3.[MySQL Sintax](https://github.com/jakebathman/mysql-syntax)

Nos proporciona reconocimiento de palabras reservadas SQL para la escritura de querys. Así de sencillo. 

![mysql-sintax](https://code.visualstudio.com/assets/docs/languages/tsql/intellisense.gif)

### 4.[Polacode](https://github.com/octref/polacode)

Polacode nos ayuda a sacar impresiones de pantalla de nuestro código de una manera bastante sencilla y bonita. Ojo, todo el proceso se realiza sin salir del editor. 

Es la mejor alternativa a los que usan [Carbon].(https://carbon.now.sh/)

![pola](https://miro.medium.com/max/2452/0*YPD8eC2bPwEQYu5B.gif)

### 5.[vscode-pdf]()

Visualizador de documentos pdf dentro del editor.

![pdf](https://raw.githubusercontent.com/tomoki1207/vscode-pdfviewer/images/screenshot.png)

### 6.[WakaTime](https://github.com/wakatime/vscode-wakatime)
Herramienta dedicada plenamente a la productividad del programador.
Entre sus características resaltan:

:small_orange_diamond: Visualización en tiempo real del tiempo que un programador trabaja en un proyecto.
:small_orange_diamond: Soporte para n proyectos simultáneos. 
:small_orange_diamond: Tiempo dedicado a lenguajes de programación específicos. 
:small_orange_diamond: Gráficos estadísticos para una mejor comprensión de los resultados.
:small_orange_diamond: Es posible mandar vía email los resultados obtenidos de manera automática.  

Para mas información puedes visitar su web: https://wakatime.com/

![waka](https://raw.githubusercontent.com/wakatime/vscode-wakatime/master/images/Screen-Shot-2016-03-21.png)

### 7.[Path Intellisense](https://github.com/ChristianKohler/PathIntellisense)

Permite el auto completado de rutas relativas en nuestro proyecto.
Es todo, muy simple pero bastante útil, sobre todo para evitar errores de tipeo. 

![path](https://camo.githubusercontent.com/48e2f6846d679751cb2d68b3173da9824ac680e8/68747470733a2f2f692e67697068792e636f6d2f696148655569446554555a756f2e676966)

### 8.[Debugger for Chrome](https://code.visualstudio.com/assets/blogs/2016/02/23/chrome-debugger-demo.gif)

VScode por si solo no viene con la configuración para depurar código, pero con las instalación de algunos plugins eso se soluciona fácilmente. Debugger for Chrome permite crear puntos de interrupción en el código para analizar, por ejemplo, el estado de las variables o funciones y ver los cambios directamente en el navegador.  

![debug](https://code.visualstudio.com/assets/blogs/2016/02/23/chrome-debugger-demo.gif)

### 9.[Live Server](https://github.com/ritwickdey/vscode-live-server)
Bastante útil en desarrollo de paginas web estáticas, permitiendo visualizar automáticamente y sin necesidad de refrescar la página del browser, los cambios hechos en el código. Existen bastantes plugins similares pero este es uno de los mas pululares y también uno de los más usados por su simplicidad.

![live](https://raw.githubusercontent.com/ritwickdey/vscode-live-server/master/images/Screenshot/vscode-live-server-animated-demo.gif)


### 10.[TODO Highlight](https://github.com/wayou/vscode-todo-highlight)

Escritura de `TODO's` y `FIXME's` más legibles y amigables a la vista. 


![todo](https://raw.githubusercontent.com/wayou/vscode-todo-highlight/master/assets/material-night-eighties.png)

> La primera parte de este post puedes leerla en: [Visual Studio Code y sus mejores plugins](https://dev.to/crisfer4217/vscode-y-sus-mejores-plugins-4amh)

## Referencias
:small_blue_diamond:https://code.visualstudio.com/

---

## **Conclusión** 
Existen multitud de extensiones para VScode para terrenos específicos del desarrollo, considero que es muy importante saber elegir los plugins que se usaran en un proyecto ya que son herramientas bastante productivas y útiles para un desarrollador en cualquier ámbito. 
Para finalizar, considero importante mencionar que la lista de extensiones de este post están basadas en mi criterio como desarrollador web por lo que no todos los plugins pueden ser útiles para algunos colegas.