Blogs de Shopify

Visual Studio: 20 extensiones de código para desarrolladores de UI

20 extensiones codigo Visual Studio

Contar con excelentes herramientas puede ayudar a los desarrolladores a escribir código de manera más rápida, más limpia y más consistente. Hace unos meses, le pregunté a los desarrolladores de interfaz de usuario aquí en Shopify cuáles eran las extensiones, paquetes y complementos más indispensables para ellos.

Escribí dos artículos sobre los y los mejores paquetes Atom (en inglés) para desarrolladores de interfaz de usuario basados en esas conversaciones. En este artículo, he desglosado mis mejores opciones para extensiones de código Visual Studio (VS Code), y las he dividido en las seis categorías siguientes. Si deseas asegurarte de que lo que estás construyendo es fiable, consulta nuestro artículo sobre seguridad del sitio web.

Instalación

Debes tener en cuenta que Visual Studio Code tiene una gran cantidad de soporte incorporado para muchos de los complementos o paquetes más utilizados que se encuentran en otros editores. Éstos incluyen soporte para Emmet, un terminal integradoIntellisense para un montón de idiomas listos para usar (JavaScript, TypeScript, JSON, HTML, CSS, Less y Sass), así como soporte de control de versión .

Navegar e instalar extensiones desde Visual Studio Code es bastante fácil. Simplemente escribe cmd + shift + x (en una Mac) o ctrl + shift + x en un PC) para que aparezca la vista: Panel de extensiones, luego haz clic en el botón Instalar para instalar la extensión que desees.

Alternativamente, puedes buscar e instalar extensiones haciendo clic en el icono Extensiones en la Barra de actividad en el lado izquierdo de VS Code.

También puedes usar la Paleta de comandos para instalar extensiones (todas al mismo tiempo) escribiendo cmd + shift + p (OSX) o ctrl + shift + p (Windows, Linux), luego escribe "Install extensions" y selecciona Extensions: Install extensions.

Deberás reiniciar VS Code cuando instales una nueva extensión para que se aplique. Además de buscar a través de extensiones dentro de VS Code, también puedes explorar VS Code Extension Marketplace, que tiene documentación más detallada sobre cada extensión.

1. Sincronización de configuraciones

La extensión setting sync , anteriormente conocida como sincronización de configuración de código de Visual Studio, sincroniza las configuraciones, fragmentos de código, temas, combinaciones de teclado, espacios de trabajo, extensiones y más en varias máquinas. Creo que esta es probablemente una de las extensiones más importantes y útiles que garantiza que, sin importar en qué computador estés, puedas tener todas las herramientas a las que estás acostumbrado.

The best VS Code extensions 2017: Settings sync

Snippets y estilo de código

Los snippets son bastante simples: comienza a escribir una palabra clave que active un snippet y luego amplía el texto. Hay un montón de snippets integrados en VS Code de forma predeterminada, se muestran a través de Intellisense ^ + espacio mezclado con otras sugerencias, o en un selector de snippets dedicado.

Puedes insertar un snippet del selector abriendo la Paleta de comandos y luego escribiendo "Insert Snippet". También puedes crear tus propios snippets utilizando la sintaxis de snippets TextMate ; para ver ejemplos, consulta la documentación de snippets de VS Code. O descárgala a través de una extensión, aquí hay algunas extensiones de snippets que figuran en la lista:

2. Snippets para Liquid de Shopify

Los snippets para Liquid Shopify Liquid Snippets incluyen varios snippets para Liquid que aceleran el desarrollo de temas, incluyendo snippets para etiquetas de flujo de control, etiquetas de repetición, etiquetas de variables, filtros de matriz y más. Esta extensión tiene una dependencia, la extensión Liquid Languages Support, la extensión de soporte de idiomas.

Una vez instalado, escribe parte de una palabra clave del snippet y presiona enter o return, y el snippet se desplegará. También puedes activar snippets desde el editor escribiendo cmd + espacio (OSX) o ctrl + espacio (Windows, Linux).

The best VS Code extensions 2017: Shopify Liquid snippets

3. Snippet de HTML

HTML Snippets agrega un soporte de lenguaje enriquecido para el marcado de HTML, incluyendo los snippets, información rápida y descripciones que incluyen si una etiqueta está en desuso.

4. Espacios finales

La extensión de Trailing spaces como su nombre lo indica, te permite resaltar espacios finales y eliminarlos rápidamente. Esta extensión es un puerto del popular complemento Sublime Text Trailing Spaces, y ofrece la eliminación rápida de espacios finales, recortar al guardar y más.

The best VS Code extensions 2017: trailing spaces

5. Línea en blanco al final del archivo

Blank line at end of file es una extensión mínima y súper simple que agrega una línea en blanco adicional al final de cualquier archivo guardado.

The best VS Code extensions 2017: blank line at end of file

Linters y resaltado de sintaxis

Es importante tener consistencia, los linters proporcionan esa consistencia y ayudan a establecer las mejores prácticas para tu equipo. El resaltado de sintaxis también es clave cuando se trata de la facilidad de uso en un editor de texto. VS Code tiene muchos idiomas compatibles listos para usar, lo que significa que no se necesitan muchas extensiones para mejorar esa experiencia.

6. Soporte de idiomas de Liquid

La extensión de Soporte de Idiomas de Liquid es imprescindible para aquellos que desarrollan temas de Shopify usando VS Code. Aunque hay soporte para los íconos de la barra lateral que permiten distinguir los archivos Liquid listos para usar, VS Code no tiene un resaltado de sintaxis para Liquid sin la ayuda de esta extensión. Esta extensión agrega el resaltado de sintaxis para Liquid y actúa como soporte para la extensión de fragmentos de código Shopify Liquid Snippets.

The best VS Code extensions 2017: Liquid languages support

7. Stylelint

Stylelint es una extensión que combina CSS, SCSS y Less. Puedes controlar si stylelint está activado para diferentes idiomas o no, dependiendo de cómo desees configurar tus ajustes.

The best VS Code extensions 2017: stylelint

8. ESLint

Esta extensión integra ESLint en VS Code, requiere que ya tengas ESLint instalado en tu computadora: ya sea de manera local o global. Puedes hacer esto con npm ejecutando npm install -g eslint. Hay configuraciones e instrucciones de configuración e instalación más detalladas en la página del mercado de extensiones.

9. TSlint

TSLint es similar a la extensión anterior, ya que requiere que ya tengas instalado TSLint localmente en un proyecto o globalmente en tu computadora. Esta extensión integra el linter TSLint para el lenguaje TypeScript en VS Code.

Genera ingresos haciendo lo que amas.

El Programa de Shopify Partner te permite usar tus conocimientos para ayudar a emprendedores en todo el mundo. Con más de 800.000 comerciantes a nivel mundial, las oportunidades para hacer dinero son ilimitadas.

Obtén más información

Integración con Git

La integración de terminales viene automáticamente con VS Code, lo que facilita la confirmación de cambios sin tener que abandonar el editor. Simplemente usa el atajo de teclado ^ + ` para abrir el Terminal integrado desde el Código VS. Todos necesitamos hacer un seguimiento de los cambios que hacemos en nuestro código, y qué mejor manera de hacerlo que con Git. Aquí hay una extensión que ayuda a integrar Git aún más en VS Code.

10. Git Lens

La extensión Git Lens es realmente sorprendente, te permite visualizar la autoría del código dentro de VS Code. Puedes navegar y explorar el historial de un archivo, ver una git blame line para cada línea de archivo e incluso agregar una anotación de cambios (diff), y todos son totalmente personalizables.

The best VS Code extensions 2017: Git lens

También te puede interesar: Usa Git para simplificar la implementación del tema de Shopify

Mejoras del editor

Estas mejoras del editor agilizan la depuración, la escritura y la lectura del código. Te ayudan en tu programación diaria, ya sea buscando a través de un método que alguien más haya escrito u obteniendo sugerencias de nombre de clase como tu marcado de escritura.

11. Path IntelliSense

La extensión Path Intellisense ayuda a autocompletar nombres de archivo y es súper útil al escribir rutas en marcado, o en cualquier archivo que tenga referencias de ruta.

The best VS Code extensions 2017: path intellisense

12. IntelliSense para nombres de clase CSS

La extensión de nombres de clase IntelliSense for CSS class names ayuda a completar automáticamente los nombres de clase para el atributo de clase HTML mirando las definiciones de clase CSS en tu espacio de trabajo y los archivos externos a los que se hace referencia a través del elemento de enlace .

13. CSS Peek

CSS Peak amplía las plantillas HTML y JavaScript incrustadas con compatibilidad con Go To Definition para clases CSS e ID que se encuentren en tu marcado.

The best VS Code extensions 2017: CSS peak

14. Guías

La extensión Guides agrega guías de sangría adicionales a tu editor. Es diferente de las guías de sangría incorporadas al agregar guías de sangría activas y de pila, fondos de sangría, y puedes colorear y dar estilo a esas personalizaciones.

The best VS Code extensions 2017: guides

15. Depurador para Chrome

La extensión Debugger for Chrome agrega el depurador para navegador Google Chrome a tu editor. Te permite iniciar una instancia de Chrome por la que hayas navegado a tu aplicación, o se puede adjuntar a una instancia de Chrome en ejecución. Al usar el parámetro url, le dices a VS Code con qué URL abrir o iniciar en Chrome.

16. Anotación instantánea

La extensión Instant Markdown te permite editar documentos de anotación en Código VS y obtener las vistas previas de ellos al instante en el navegador. Es muy útil para editar archivos Léeme y otros documentos escritos en Markdown.

The best VS Code extensions 2017: instant markdown

También te puede interesar: ¿Qué es Liquid, el lenguaje para la creación de plantillas en Shopify?

17. Abrir en el navegador

Esta extensión hace exactamente lo que dice, te permite ver un archivo HTML en el navegador. Abre páginas HTML en tu navegador predeterminado, pero también puedes seleccionar "abrir en otros navegadores" para abrir en uno diferente haciendo clic con el botón derecho.

Temas y diversión 🌈

Hay muchos temas disponibles para VS Code, que puedes encontrar en el sitio web de temas de VS Code. Además, puede ser divertido darle vida a tu editor con algo de color. Aquí hay algunas extensiones y temas que son particularmente populares para los usuarios de VS Code.

18. Rainbow Brackets

¡Agrega un toque de diversión a tu editor con 🌈 Rainbow Brackets! Esta extensión proporciona los colores del arco iris para paréntesis, corchetes y llaves. ¡Especialmente útil para programadores de JavaScript!

The best VS Code extensions 2017: rainbow brackets

19. Indent Rainbow

La extensión Indent Rainbow colorea la sangría frente a tu texto, alternando entre diferentes colores en cada paso.

20. Temas inspirados en Atom

Para muchos desarrolladores, VS Code no es su primer editor. Han usado y se han acostumbrado a otro editor antes. Esta es probablemente la razón por la cual algunos de los temas más populares provienen de otros editores, como Atom. He aquí tres de los temas más populares para VS Code, provenientes de Atom:

Empecemos:

VS Code tiene una gran biblioteca de extensiones para elegir, y solo he cubierto las 20 extensiones principales recomendadas por un grupo de desarrolladores de interfaz de usuario realmente increíbles aquí en Shopify. Es importante recordar que tus herramientas siempre deberían funcionar para ti, no al revés.

¿Todavía no eres un Shopify Partner?

Con oportunidades de ingresos e infinidad de recursos de los que puedes aprender, convertirte en un Shopify Partner es tu oportunidad de trabajar con los clientes para crear soluciones comerciales y aumentar tu experiencia. Únete a una comunidad de emprendedores y comienza hoy a construir tu negocio.

Registrarme

Acerca del Autor

TiffanyTiffany es líder de promoción de desarrolladores en Shopify. Se especializa en desarrollo de interfaz de usuario, diseño de experiencia de usuario, accesibilidad, y le apasiona inspirar a jóvenes diseñadores y desarrolladores. Anteriormente, fue Líder del Capítulo de Ottawa para el Código de Aprendizaje de códigos para damas y trabajó como Desarrolladora de interfaz de usuario en Shopify.

Mapa de categorias: