Contar con excellent herramientas puede ayudar a los desarrolladores a escribir código de manera más rápida, más limpia y más consistente。Hace uns meses, le pregunté a los desarrollores de interfafade usuuario aquí en Shopify cuáles eran las extensiones, paquetes y complementos más不可或缺的para ellos。
Escribí dos artículos清醒的losy洛杉矶mejores paquetes Atom(en inglés) para desarrolladores de interfaz de usuario basados en esasconversaciones。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。我的思想是安全的estás可理解的，精神的顾问artículo清醒的网络环境．
- Instalacion
- 片段y estilo de código
- Integración con Git
- lints resalado de sintaxis
- Mejoras del编辑器
- 泰马斯diversión
Instalacion
Debes tener en cuenta que Visual Studio代码tiene una gran悬臂de soporte incorporado para muchos de loverentos o paquetes más利用，利用，encuentran en otros editor。Éstos incluyen soporte para埃米特,联合国终端integrado，智能感知para un montón de idiomas listos para usar (JavaScript, TypeScript, JSON, HTML, CSS, Less y Sass)， así como soporte de控制versión．
导航安装扩展desde Visual Studio Code es bastante fácil。Simplemente作旁切CMD + shift + x(en una Mac) oCTRL + shift + xen un PC) para que aparezca lavista:面板de扩展， luego haz clic en el botónInstalarPara instalar la extensión que desees。
替代，puedes buscar e安装扩展，haciendo clic en el icono扩展在洛杉矶Barra de actividaden el lado izquierdo de VS Code。
También puedes usar la突击队员Para instalextensiones (todas al mismo tiempo)描述CMD + shift + p(OSX) oCTRL + shift + p(Windows, Linux)， luego描述“安装扩展”y selecciona扩展:安装扩展。
Deberás reiniciar VS Code cuando安装una nueva extensión para que se aplique。Además de buscar a través de extensiones dentro de VS Code, también puedes explorarVS代码扩展市场ob欧宝娱乐app下载地址， que tiene documentación más detallada清醒的cada extensión。
1.Sincronización de configuraciones
La扩展设置同步，前面的conocida como sincronización de configuración de código de Visual Studio, sincroniza las configuraciones, fragmentos de código, temas，组合的teclado, espacios de trabajo，扩展和más en varias máquinas。可能的想法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。
片段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 snippet integrados en VS Code de forma predeterminada, se muestran a través de Intellisense＾+ espacio我是说，我是说，我是说，我是说，我是说，我是说，我是说。
Puedes insertarun snippet del selector abriendo la突击队员y luego escribiendo“插入片段”。También puedes crear tus丙os snippets utilzando laTextMate；Para ver ejemployts, consulta ladocumentació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.Liquid de Shopify片段
Los snippets para LiquidShopify液体片段包括各种各样的片段，液体的液体，流体的控制，repetición的礼仪，变量的礼仪，矩阵的过滤器más。Esta extensión tiene una dependcia, la extensión液态语言支持，la extensión de soporte de idiomas。
这是我们的生活，这是我们生活的一部分输入o返回， y el snippet se desplegará。También puedes activar snippets desde el editor escribiendoCMD + espacio(OSX) oCTRL + espacio(Windows、Linux)。
3.片段HTML
HTML片段agrega un soporte de lenguaje enriquecido para el marcado de HTML，包括enendo los snippets, información rápida y descripciones que incluyen si una礼仪está en desuso。
4.Espacios最后
La extensión de尾随的空格在印度的土地上，用白土重新开垦最后的土地rápidamente。Esta extensión es un puerto del popular complemento Sublime Text尾随空格，y ofrece la eliminación rápida de espacios finales, recortar al guardar y más。
5.Línea白色的最后的档案
文件末尾的空行Es una extensión mínima y súper简单的que agrega una línea en blanco adional al final de cualquier archiivo guardado。
lints resalado de sintaxis
重要的是始终如一，有必要保持一致，有必要保持一致，有能力建立起我们的关系prácticas这是必要的。El resalado de sintaxis también es clave cuando se trata de la facilidad de uso en un editor de texto。VS Code tiene many idiomas可兼容listo para usar, lo que significa que no必要much extensiones para mejorar esa experiencia。
6.Soporte de idiomas de Liquid
La extensión deSoporte de Idiomas de Liquid令人印象深刻的para aquellos que desarrollan temas de Shopify usando VS Code。我们的天堂天堂íconos de la barra横向许可区分的档案的液体清单para usar, VS代码没有tiene un resalado de sintaxis para Liquid sin la ayuda de esta extensión。Esta extensión agrega el resalado de sintaxis para Liquid y actúa como sorte para la extensión de fragmentos de códigoShopify液体片段．
7.Stylelint
Stylelintes una extensión que combina CSS, SCSS y少。Puedes controlar si stylelint está activado para different idiomas o no, dependent de cómo desees configurar tus ajustes。
8.ESLint
问好扩展integra ESLint en VS Code, requiere que ya tengas ESLint installado en tu computadora: ya sea de manera local or global。Puedes hacer esto con npm ejecutandoNPM安装eslint．Hay configuration e instrucciones de configuración e instalación más detalladas en la página del mercado de extensiones。
9.TSlint
TSLint类似la extensión前，ya que requiere que ya tengas installado TSLint localmente en un proyeecto o globalmente en tu computadora。Esta extensión integra el linter TSLint para el lenguaje TypeScript zh VS Code。
属ingresos haciendo lo que amas。
在世界范围内的商业伙伴计划。Con más de 800.000个商人，一个美好的世界，一个真正的机会。
Obtén más informaciónIntegració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。简单的美国el atajo de teclado＾+ 'para abrir el终端集成的desde Código VS.对必须的hacemos的必须的hacemos的工作和精神código, y qué主要的manera de hacerlo que con Git。Aquí hay una extensión que ayuda一个集成Git aún más en VS Code。
10.Git镜头
La扩展Git镜头es realmente sorprenente, te permite visualizar la autoría del código dentro de VS Code。探索历史档案馆，乌纳Git责备线Para cada línea de archiivo e incluso agregar una anotación de cambios (diff)， y todos son totalmente personizables。
También te puede interesar:美国Git para simplificar la implementación del tema de Shopify
Mejoras del编辑器
Estas mejoras del editor agilizan la depuración, la escritura y la lectura del código。Te ayudan en tu programación日记，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.道路智能感知
La扩展道路智能感知阿尤达一个自动完成的档案名称súper útil在马尔卡多，在马尔卡多，在马尔卡多，在马尔卡多，在马尔卡多，在马尔卡多，在马尔卡多。
12.智能感知对CSS的称呼
La extensión de nombres de claseCSS类名的智能感知Ayuda一个完整的automáticamente los nombres de领导班级para el atributo de clase HTML米兰多las定义de clase CSS在空间上的trabajo和外部档案中有参考través del elemento de捆扎．
13.CSS偷看
CSS高峰amplía las plantillas HTML y JavaScript incrustadas con compatibilidad con转到定义para class CSS e ID que encuentreen en tu marcado。
14.guia
La扩展指南阿格雷加guías de sangría adicionales a tu编辑。Es diente de las guías de sangría incorporated al agregar guías de sangría activas y de pila, fondos de sangría, y puedes colorar y dar estilo a esa personalizaciones。
15.Depurador para Chrome
La扩展Chrome调试器agrega el depurador para navegador谷歌Chrome a tu编辑器。铬铁的白土和铬铁的白土和铬铁的白土aplicación，铬铁的白土和铬铁的白土ejecución。艾尔usar el parámetrourl， le dices一个VS Code con qué URL缩写o iniciar Chrome。
16.Anotacion instantanea
La扩展即时减价编辑文档anotación en Código与导航即时预览的信息。Es muy útil para editar archivos Léeme y otros文档escritos en Markdown．
También te puede interesar:¿Qué es Liquid, el lenguaje para la creación de plantillas en Shopify?
17.Abrir en el navegador
问好扩展有精确的骰子，有精确的档案。Abre páginas HTML en tu navegador predeterminado, pero también puedes seleccionar "abrir en otros navegadores" para abrir en uno diente haciendo clic con el botón derecho。
泰马斯diversión
有很多事情是不可能的，有很多事情是不可能的sittio web de temas de VS Code．Además, puede ser divertido darle vida tu editor con alggo de color。Aquí hay algunas extension y temas que son speciarmente populares para los usuarios de VS Code。
18.彩虹括号
' Agrega un toque de diversión a tu editor con彩虹括号！Esta extensión比比ciona los colorores del arco iris para paréntesis，灯芯绒和花边。特殊útil para programadores de JavaScript!
19.缩进的彩虹
La扩展缩进的彩虹色彩la sangría正面的一个tu texto, alternando entre不同的颜色在卡达paso。
20.原子的灵感之神
Para muchos desarrolladores, VS Code no es su primer editor。Han usado y se Han acostumbrado a otro editor antes。这是可能的la razón por la cual algunos de los temas más流行的provienen de otros编辑，como原子。他aquí tres de los temas más populares para VS Code, provenientes de Atom:
Empecemos:
VS大扩展书目对elega, solo, cubierto, 20个扩展原则，推荐，和，一般情况下的参考资料组increíbles aquí，在Shopify。Es importante recordar que tus herramientas siempre deberían funcionar para ti, no al revés。
¿Todavía no eres un Shopify Partner?
我们有无限的机会，我们有无限的机会，我们有无限的机会，我们有无限的机会，我们有无限的机会，我们有无限的机会，我们有无限的机会。Únete一个共同的社会和共同的社会是一个共同的国家。
RegistrarmeAcerca del Autor
蒂芙尼es líder de promoción de desarrolladores enShopify．Se especaliza en desarrollo de interfaz de usuario, diseño de experiencia de usuario，无障碍，y le passion inspira jóvenes diseñadores y desarrolladores。前面，fue Líder del Capítulo de渥太华para el Código de赞美诗códigos para damasy trabajó como Desarrolladora de interfaz de usuario en Shopify。