优秀的工具可以帮助开发人员编写更快、更干净、更一致的代码。Visual Studio Code扩展允许您添加工具、语言、调试器等，以帮助您做到这一点。不久前，我问Shopify的前端开发人员，他们离不开哪些扩展、包和插件。
基于这些对话，我写了两篇关于最好的Sublime Text插件最好的原子包前端开发人员。在这篇文章中，我重点介绍了我最喜欢的Visual Studio Code (VS Code)扩展，并将它们分为以下六类。如果你想确保你所构建的是安全的，你也可以查看我们关于如何改进你的客户端的文章网站安全．
安装Visual Studio Code扩展
你应该注意到，Visual Studio Code对许多在其他编辑器中发现的广泛使用的扩展、插件或包都有很多内置支持。其中包括以下支持埃米特,一个集成终端，智能感知一堆不同的语言开箱即用(JavaScript, TypeScript, JSON, HTML, CSS, Less和Sass)，以及版本控制支持。
在Visual Studio Code中浏览和安装扩展非常容易。只需输入CMD + shift + x(在Mac上)或CTRL + shift + x(在个人电脑上)打开观点:扩展面板，然后单击安装按钮来安装所需的Visual Studio Code扩展。
您还可以浏览和安装扩展，通过单击扩展选项卡活动栏在VS Code主页的顶部。或者，你可以用命令面板通过输入命令来安装扩展(同时安装)CMD + shift + p(OSX)或CTRL + shift + p(Windows, Linux)，然后输入“安装扩展”并选择扩展:安装扩展．
当你安装一个新的扩展时，你需要重新OB欧宝娱乐APP启动VS Code使其生效。除了在VS Code中搜索扩展，你还可以浏览VS Code扩展市场ob欧宝娱乐app下载地址，它对每个扩展都有更长的文档。
借助Shopify合作伙伴计划发展您的业务
无论您是提供网页设计和开发服务，还是想为Shopify应用商店构建应用程序，Shopify合作伙伴计划都将为您的成功奠定基础。免费加入并获得收入分享机会、开发人员预览环境和教育资源。
报名1.设置同步
的设置同步扩展，以前称为Visual Studio Code Settings Sync，可以跨多台机器同步设置、代码片段、主题、键绑定、工作区、扩展等。我认为这可能是最重要和最有用的扩展之一，它可以确保无论您在什么计算机上，都可以使用您习惯的所有工具。
代码片段和代码风格
代码片段非常简单:首先输入一个激活代码片段的关键字，然后展开文本。VS Code默认内置了一堆代码片段，并通过IntelliSense显示^ +空格与其他建议混合使用，或者在专用的代码片段选择器中使用。
控件，可以从选择器中插入一个代码片段命令面板然后输入“插入片段”。控件创建自己的代码片段TextMate代码段语法．例如，看一下VS Code的代码片段文档．或者通过扩展下载它们，这里有一些片段扩展列表。
你可能还喜欢:30个开发者资源，让你的技能多样化．
2.Shopify液体模板片段
的Shopify液体模板片段扩展包括各种液体片段，使开发主题更快。这包括用于控制流标记、迭代标记、变量标记、数组过滤器等的代码片段。这个扩展有一个依赖项液体扩展。
安装后，键入片段关键字的一部分并点击输入或返回，代码片段将展开。您还可以在编辑器中输入代码来激活代码片段CMD +空格(OSX)或CTRL +空格(Windows、Linux)。
3.HTML片段
HTML片段为HTML标记添加了丰富的语言支持，包括代码片段、快速信息和包含标记是否已弃用的描述。
4.尾随的空格
名字里有什么?嗯,尾随的空格扩展所做的几乎完全是标题所描述的-它使您能够突出显示尾随空格并快速删除它们。这个扩展是流行的Sublime Text插件尾随空间的一个端口，并提供快速删除尾随空间，保存时修剪等。
你可能还喜欢:Shopify GraphQL学习工具包．
5.文件末尾的空白行
文件末尾的空白行是一个最小和超级简单的扩展，在任何保存的文件的末尾添加一个额外的空白行。
lint和语法高亮显示
在编程过程中建立一致性非常重要，这意味着使用适当的工具来分析源代码并标记任何编程或风格错误、bug等，这一点至关重要。lint提供了这种一致性，并帮助为您的团队设置最佳实践。在文本编辑器中，语法高亮显示也是便于使用的关键。VS Code支持很多开箱即用的语言，所以不需要很多扩展来增强这种体验。
你可能还喜欢:4个简单的方法来部署你的网站或应用程序．
6.液体
的液体扩展是一个必须有那些开发Shopify主题使用VS Code。虽然支持侧边栏图标来区分开箱即用的Liquid文件，但如果没有这个扩展的帮助，VS Code不会为Liquid提供语法高亮显示。这个扩展为Liquid添加了语法高亮显示，并作为支持Shopify液体片段扩展。它还支持部分代码块，以及Liquid标签和过滤器的代码段自动完成。
7.stylelint
stylelint是一个扩展，可以检查CSS, SCSS和Less。您可以控制是否为不同的语言启用stylelint，这取决于您希望如何配置它的设置。
8.ESLint
这扩展将ESLint集成到VS Code中，它要求你已经在你的计算机上本地或全局安装了ESLint。你可以用npm，通过跑步NPM install -g eslint．在Visual Studio Code扩展市场页面上有更详细的配置和安装设置以及说明。ob欧宝娱乐app下载地址
9.TSlint
这个新版本TSLint与之前的扩展类似，因为它要求您已经在项目中本地安装了TSLint，或者在您的计算机上全局安装。这个扩展将TypeScript语言的TSLint检查器集成到VS Code中。
你可能还喜欢:CSS简介:层叠样式表的初学者指南．
Git集成
VS Code自带终端集成功能，无需离开编辑器就可以更轻松地提交更改。只需使用^ +从VS Code中打开集成终端的快捷键。我们都需要跟踪我们在代码中所做的更改，有什么比Git更好的方法来做到这一点呢?下面是一个有用的Visual Studio Code扩展，它可以帮助您将Git更多地集成到代码编写过程中。
10.GitLens
的GitLens扩展真的很神奇;它使你能够可视化VS code中的代码作者。您可以浏览和探索文件的历史记录，查看每个文件行的git责备注释，甚至添加更改(diff)悬停注释，所有这些都是完全可定制的。
编辑器的改进
这些编辑器增强使调试、编写和阅读代码的速度更快。它们有助于您的日常编程，无论是搜索别人编写的方法，还是作为编写标记获取类名提示。
11.道路智能感知
的道路智能感知扩展有助于自动完成文件名。在标记或任何有路径引用的文件中写入路径时非常有用。
12.智能感知CSS类名
的智能感知CSS类名extension通过查看工作空间中的CSS类定义和通过link元素引用的外部文件，帮助自动完成HTML class属性的类名。
13.CSS偷看
CSS高峰扩展HTML和嵌入式JavaScript模板转到定义支持在标记中找到的CSS类和id。
14.指南
的指南Visual Studio Code扩展为编辑器添加了额外的缩进指南。它与内置的缩进指南不同，它添加了堆栈和活动缩进指南、缩进背景，您可以为这些自定义设置颜色和样式。
15.Chrome调试器
的Chrome调试器扩展添加谷歌Chrome浏览器调试器到您的编辑器。它允许你启动一个Chrome实例导航到你的应用程序，或者它可以附加到一个正在运行的Chrome实例。使用url参数，告诉VS Code在Chrome中打开或启动哪个URL。
你可能还喜欢:使用Git简化Shopify主题部署．
16.即时减价
的即时减价扩展可以让你在VS Code中编辑Markdown文档，并立即在浏览器中预览。它对编辑自述文件和其他文档非常有用用Markdown写的．
17.在浏览器中打开
Visual Studio代码扩展正如它所说:它使您能够在浏览器中查看HTML文件。它可以在默认浏览器中打开HTML页面，但您也可以选择“在其他浏览器中打开”，通过右键单击在另一个浏览器中打开。
主题和乐趣
为前端开发编写优秀的代码并不需要太过认真。事实上，用一些合适的颜色编码来点亮你的工作空间，甚至可以帮助你保持更有条理，最大限度地减少错误。好消息是VS Code有很多主题，你可以在VS Code主题网站．用一些颜色给你的编辑器增添情趣是很有趣的。以下是一些特别流行的Visual Studio Code扩展和主题，您可能会发现它们既有趣又有用。
18.彩虹括号
在编辑器中添加一些乐趣彩虹括号！这个Visual Studio Code扩展为圆括号、方括号和花括号提供了彩虹色。这对JavaScript程序员尤其有帮助!
19.缩进的彩虹
的缩进的彩虹是一个简单的扩展，使文本前面的缩进着色，在每个步骤上不同的颜色之间交替。它使缩进更容易阅读，特别是在为Python或Nim编写代码时。
你可能还喜欢:通用设计:11个实用技巧，让你的网站和应用程序更容易访问．
20.Atom-inspired主题
对于许多开发者来说，VS Code并不是他们的第一个编辑器。在探索VS Code可以做什么之前，他们已经使用并熟悉了另一个编辑器。这可能就是为什么一些最流行的Visual Studio Code扩展和主题是从其他编辑器(如Atom)移植过来的原因。以下是从Atom移植过来的VS Code中最流行的三个主题:
开始吧!OB欧宝娱乐APP
VS Code有一个庞大的扩展库可供选择，我只介绍了Shopify上一群了不起的前端开发人员推荐的前20个扩展。但不要止步于VS代码——还有更多前端开发工具去探索。重要的是要记住，您的工具应该始终为您工作，而不是相反。
