Top Plugins para JS en el Visual Studio Code

Cuando desarrollas o refactorizas código, ¿lo haces con papel y boli? O ¿utilizas herramientas para facilitarte el trabajo? Si no tienes los plugins adecuados, es como si estuvieras programando a mano.

Dentro del mundo aplicaciones, podemos encontrar multitud de canales donde desarrollar, para webs, para móviles, para televisores, librerías con diferentes funcionalidades, plugins para navegadores, etc… Y para llevar a cabo esto, utilizamos diferentes softwares para facilitarnos dicha tarea.

En los últimos años, dentro de la comunidad JS, hay uno en especial que ha cogido relevancia y ha conseguido ser el líder para este tipo de desarrollos. Estamos hablando del Visual Studio Code. Este IDE, nos facilitará las tareas no solo del desarrollo con javascript y otros lenguajes, sino qué a través de sus plugins, mejoraremos:

• Velocidad del desarrollo
• Detección de errores prematuramente
• Gestión de repositorios
• Optimización de nuestro código
• Depuración

Todo esto, lo podríamos conseguir mediante la selección de los adecuados plugins y su uso. Hablamos de adecuados, dado que se instalamos de más, el rendimiento de nuestro editor se podría ver afectado, además de estar mostrándonos mensajes de alerta continuamente.

Dentro de estas librerías que podríamos instalarnos para optimizar nuestro desarrollo con JS, las podríamos dividir en las siguientes categorías:

• Snippets: nos ayudará a acelerar nuestro desarrollo mediante el uso de abreviaturas
• Syntax Highlighting: nos facilitará la detección de cierto código por cambios en su formato, como por ejemplo el colo
• Linter: detección de errores predefinidos en nuestro código
• Formatting: formateo de nuestro código
• Browser: relacionados con el navegador y nuestro editor
• Framework/librería: referentes a frameworks y librerías específicas como react, vue, angular, node…
• Testing: nos facilitará la creación y depuración con tests

Teniendo en cuenta, que fuésemos a desarrollar una aplicación genérica de JS, los plugins importantes que añadiríamos:

• VS Code JavaScript (ES6) snippets
• ESLint: Revisará tu código teniendo en cuenta tu archive de configuración eslintrc
• npm Intellisense: Autocompleta módulos npm en declaraciones de importación.
• npm: usa package.json para validar las dependencias instaladas
• Import Cost: muestra el tamaño de un paquete importado dentro del editor
• Beautify: te ayuda a formatear el código
• Prettier Code Formatter: formateador de código
• JS Refactor: refactorizador de código JS
• JavaScript Booster: nos ayudará a refactorizar y detector código que podemos optimizar
• Code Metrics: nos muestra la complejidad ciclomática de nuestro código
• ESLint: validador de JS
• Better Comments: Formatea nuestros comentarios
• js: live de nuestro código y nos ayuda a depurar neustro código
• Auto Close Tag: Cierra nuestros tags automáticamente
• CDNjs: listado de todas las librerías con sus CDNs en JS
• Paste JSON as Code: convierte nuestro fichero json a cualquier lenguaje
• GitLens: para depurar y comprobar los cambios de git en nuestro código

Es muy importante que nos configuremos nuestras herramientas de desarrollo de la forma adecuada. Seguro que nos sorprenderíamos si viésemos a un agricultor cavando con las manos, teniendo la posibilidad de utilizar una azada o un tractor. No seamos con en “Casa del herrero, cuchara de palo”. Con una configuración adecuada, iremos más rápido con un código de mejor calidad.

Bibliografía:

• https://code.visualstudio.com/
• https://www.sitepoint.com/vs-code-extensions-javascript-developers/
• https://hackernoon.com/10-essential-vs-code-extensions-for-javascript-developers-in-2019-e8320e3f421e
• https://scotch.io/bar-talk/11-awesome-javascript-extensions-for-visual-studio-code#:~:targetText=11%20Awesome%20JavaScript%20Extensions%20for%20Visual%20Studio%20Code%20%E2%80%95%20Scotch.io&targetText=%23react%20%23vue%20%23angular%20%23,python%20Learn%20JavaScript%20for%20Free!
• https://medium.com/better-programming/26-miraculous-vscode-tools-for-javascript-developers-in-2019-e184131d75af
• https://medium.com/swlh/60-extensions-to-supercharge-visual-studio-code-2f93a51b3cf4
• https://codeforgeek.com/best-visual-studio-code-extensions-web-development/