{"id":1181,"date":"2020-01-16T18:03:58","date_gmt":"2020-01-16T23:03:58","guid":{"rendered":"https:\/\/v3.ricardoromo.co\/?p=1181"},"modified":"2020-01-29T15:36:19","modified_gmt":"2020-01-29T20:36:19","slug":"10-extensiones-ulites-para-vs-code","status":"publish","type":"post","link":"https:\/\/v3.ricardoromo.co\/2020\/10-extensiones-ulites-para-vs-code\/","title":{"rendered":"10 Extensiones \u00datiles para VS Code"},"content":{"rendered":"\t\t
Visual Studio Code es un editor de c\u00f3digo multiplataforma lanzado en el 2015 por microsoft. A lo largo de la historia de este editor, se fue volviendo muy popular entre los desarrolladores, sobretodo el gran empuje que le daba microsoft a su desarrollo. Adem\u00e1s de ser un editor muy bueno, el m\u00e1s usado del mundo, tiene a su alrededor una comunidad que desarrolla plugins y extensiones para el, siendo precisamente el prop\u00f3sito de este art\u00edculo.\n\nA lo largo de mi aprendizaje como desarrollador autodidacta, he utilizado ampliamente VS Code y sus extensiones para facilitarme el trabajo. Aqu\u00ed les comparto 10 de las extensiones que utilizo en mi entorno de trabajo.<\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t1. Can I Use - Mahmoud Ali<\/a><\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\tEmpezamos con una extensi\u00f3n para frontend, durante el desarrollo de una p\u00e1gina web, podemos utilizar alguna etiqueta en html o atributo en css, que tal vez no sea soportada en todos los navegadores, con un simple acceso directo en el teclado, podemos comprobar su compatibilidad.\u00a0<\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/a><\/figure><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tInstalar Extension<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t2. Minify - HookyQR<\/a><\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\tUna de los problemas en la velocidad de carga de sitios web, es el tama\u00f1o del mismo. Con esta extensi\u00f3n podemos reducir el tama\u00f1o de los archivos html, css y js con simplemente presionar una tecla. Funciona a trav\u00e9s de uglify-js, clean-css, html-minifier.\u00a0<\/span>\u00a0<\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tInstalar Extension<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t3. C\/C++ - Microsoft<\/a><\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\tPara aquellos que trabajan con el lenguaje C\/C++, esta extensi\u00f3n es fundamental, ya que nos permite usar las predicciones del lenguaje y debuguear el c\u00f3digo.\u00a0<\/span>\u00a0<\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tInstalar Extension<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t4. Beautify - hookyqr<\/a><\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\tMantener un c\u00f3digo limpio y legible es fundamental, el 80% del tiempo lo pasamos leyendo c\u00f3digo, entonces mejor facilitarnos la tarea. Con esta extensi\u00f3n podemos formatear el c\u00f3digo para que se vea de una manera m\u00e1s legible, funciona tanto para javascript, JSON, CSS, Sass y HTML.\u00a0<\/span>\u00a0<\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tInstalar Extension<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t5. Waka Time - Waka Time <\/a><\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\tMuchas veces no medimos el tiempo que nos toma desarrollar un proyecto o no tenemos un sistema para llevar el registro y ver luego esas estad\u00edsticas. Con Waka Time tenemos una plataforma web a nuestra disposici\u00f3n para llevar las estad\u00edsticas de cada segundo que programamos. M\u00e9tricas sobre los lenguajes m\u00e1s utilizados, el tiempo en cada proyecto y muchas otras m\u00e9tricas de inter\u00e9s. Adem\u00e1s si lo conectamos con nuestra cuenta de google, podemos tener un reporte semanal de todo esto.\u00a0\u00a0<\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/a><\/figure><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tInstalar Extension<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t6. Settings Sync - Shan Khan<\/a><\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\tAl instalar un nuevo sistema operativo, la tarea de configurar nuevamente nuestro entorno de programaci\u00f3n puede ser una tarea que tomar\u00e1 mucho tiempo, sobretodo si tenemos muchas extensiones en nuestra anterior configuraci\u00f3n. Con Settings Sync podemos sincronizar varias instalaciones de VS Code, instalando extensiones y temas de una sincronizaci\u00f3n anterior.\u00a0<\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tInstalar Extension<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t7. vscode-todo - MattiasPernhult<\/a><\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\tEsta extensi\u00f3n puede buscar los comentarios con la palabra clave \u201cTODO\u201d. De esta manera podemos dejar marcas en cualquier parte de nuestro c\u00f3digo, en distintos archivos del proyecto, que nos interese continuar despu\u00e9s.\u00a0\u00a0<\/span>\u00a0<\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tInstalar Extension<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\t\t\n\t\t\t\t\t