江门网站建设:针对Web开发人员的12个最佳Visual Studio代码扩展

2019.08.09 mf_web

108

Visual Studio Code是Web开发人员最受欢迎的源代码编辑器之一。它于2015年由Microsoft发布,提供了许多可用于日常工作流程的强大功能。仅举几例,它内置了Git支持,一个名为IntelliSense的智能自动完成工具,一个高级调试器和一个强大的搜索工具。此外,您还可以完全自定义Visual Studio代码并根据您的需要扩展其功能。江门网站建设

Visual Studio代码扩展

您可以在Visual Studio Marketplace中找到数千个Visual Studio代码扩展,您可以使用它们向编辑器添加不同的功能。您可以通过单击View > Extensions顶部栏中的菜单,直接从Visual Studio Code轻松安装它们。

1. HTML的字体真棒代码

Visual Studio Code的Font Awesome扩展

如果您经常在设计中使用Font Awesome图标,那么此扩展程序将是您的天赐之物。Font Awesome非常棒,因为您只需使用预先构建的CSS类将图标字体添加到任何HTML元素。目前,Font Awesome拥有近1,000个图标,可满足您的大部分需求。但是,由于图标太多,要记住您可能想要使用的每个Font Awesome类的名称并不容易。当然,您可以在文档中查找,但如果您可以访问这个方便的扩展,为什么还要这样做呢?

扩展程序开箱即用。安装后,您只需要开始键入类名(每个Font Awesome类都以fa-前缀开头)。然后,屏幕上会出现一个您可以轻松选择的下拉列表。

2. CSS Peek

CSS Peek Visual Studio代码扩展

使用CSS Peek扩展,您可以向Visual Studio Code添加内联CSS编辑器。该功能的灵感来自Adobe的Brackets代码编辑器的类似功能。CSS Peek允许您在编辑HTML文件时内联加载CSS文件。

当您“查看”类,ID或HTML标记时,CSS Peek会在内联编辑器中显示所有相关的CSS规则。这样,您就可以直接从HTML文件编辑样式表,而无需通过整个CSS来查找所有相关规则。

3. VS拾色器

Visual Studio Code的VS Color Picker扩展

如果你经常使用颜色,你会喜欢VS Color Picker扩展。它为您的Visual Studio代码编辑器添加了一个易于使用的颜色选择器。当您开始通过#按键键入CSS文件中的十六进制值时,扩展程序会在屏幕上显示一个微小的颜色选择器。您可以轻松地从色轮中选择一种颜色。此外,您还可以通过将工具移动到要在CSS中使用的颜色,从屏幕中选择颜色(例如从照片中选择)。

4. 我可以使用VS代码

Visual Studio Code具有极好的扩展,它将流行的Can I Use Web应用程序与代码编辑器集成在一起。我可以使用是许多Web开发人员的首选浏览器兼容性检查程序。它允许您检查浏览器对HTML,CSS,SVG和JavaScript元素,属性,函数和其他语法的支持。

使用这个方便的扩展,您可以突出显示代码中的任何文本字符串并点击Alt+ i键盘快捷键。兼容性数据显示在屏幕底部的状态栏中。该扩展程序显示五种最常用浏览器的支持数据:Chrome,Edge,Firefox,Internet Explorer和Safari。

5. CSSTree验证器

CSSTree Validator Visual Studio代码扩展

CSSTree Validator扩展可帮助您在Visual Studio Code中编写有效的CSS代码。它根据W3C规范和浏览器实现验证您的代码。扩展名突出显示错误的属性名称,错误的值,缺少分号和其他错误。

验证器在您工作时在后台运行,因此您可以实时查看问题。它还为您提供有关如何修复错误的建议。如果将此扩展添加到Visual Studio代码编辑器,则可以通过消除移动中的问题来节省大量时间。

6. Live Sass编译器

Live Sass编译器Visual Studio代码扩展

您可以在Live Sass Compiler扩展的帮助下实时将Sass和SCSS文件编译为CSS。它不仅执行编译,还会在您保存文件时在浏览器中重新加载CSS。此外,它还允许您将Sass或SCSS编译为缩小的CSS。

Live Sass Compiler也具有易于使用的状态栏控件。例如,您可以打开和关闭“Watch Sass”功能,以便您可以在不使用Watch模式的情况下编译Sass文件。您还可以使用Live Sass编译器自动为不受支持的CSS属性添加供应商前缀。

7. ES5 / ES6和CSS Minifier

用于Visual Studio代码的ES5 / ES6和CSS Minifier

借助此扩展,CSS和JavaScript缩小将变得轻而易举。将其添加到Visual Studio代码后,编辑器底部的状态栏中会出现一个小的“缩小”按钮。单击该按钮时,扩展会在工作目录中创建文件的缩小版本。只有在编辑器中打开活动.css或.js文件时,才会显示“缩小”按钮。扩展还可以缩小较新的ES6语法。

此外,您可以将它与Clean CSS优化器和Uglify-ES JavaScript压缩器和美化器结合使用。扩展程序会自动查找相关文件.cleancssrc和.uglifyrc配置文件。如果它找到任何一个,它将在缩小CSS和JavaScript文件时使用配置。

8. Atom JavaScript代码段

用于Visual Studio代码的Atom JavaScript代码段

如果你以前使用过Atom并且已经记住了属于JavaScript代码片段的前缀,你会发现这个扩展非常有用。它在Visual Studio Code中提供了Atom的JavaScript代码段。即使您不了解Atom片段,此扩展程序仍可显着改善您的工作流程并节省大量时间。

它具有易于记忆的前缀,适用于各种JavaScript语法和逻辑。仅举几下,你将有键值对,快捷方式if-else陈述,for,for of,和for in循环,匿名函数,箭头的功能,承诺,以及更多。

9. ESLint

ES Lint Visual Studio代码扩展

使用此扩展,您可以将流行的ESLint JavaScript和JSX linter与Visual Studio Code 集成。ESLint允许您在执行代码之前发现JavaScript错误和不一致。因此,这个扩展可以为您节省大量的调试时间。

默认情况下,ESLint扩展在您键入时检查JavaScript文件中的错误。但是,您也可以将其配置为一次lint整个文件夹或工作区。您还可以通过向.eslintrc每个文件夹添加配置文件来为任何文件夹创建不同的linting规则。

10. JavaScript助推器

Visual Studio Code的JavaScript Booster

如果您想提高JavaScript代码的质量,那么您会发现JavaScript Booster扩展非常有用。它为您的JavaScript文件添加了有关如何优化代码的提示和建议。您可以通过单击添加到每行开头的灯泡图标来访问提示。

JavaScript Booster有很多聪明的建议,你在编码时不必考虑。例如,它建议缩写,删除冗余,拆分或合并声明,用模板字符串替换字符串等等。它不仅适用于纯JavaScript,而且适用于JSX,因此React开发人员也会发现它也很有用。

11. WordPress代码段

Visual Studio代码的WordPress Snippet扩展

Visual Studio Marketplace还为WordPress开发人员提供了一些很酷的扩展,可以极大地方便他们的日常工作。例如,WordPress Snippet扩展程序为Visual Studio代码编辑器添加了数千个WordPress代码段。扩展名与官方WordPress文档一致。它不仅具有函数名称的片段,还具有常量,类,钩子和其他WordPress结构的片段。

基本上,它将整个WordPress API与Visual Studio Code集成在一起。它还具有很酷的自动完成功能,因此当您在编辑器中输入时,片段会实时显示。WordPress Snippet肯定会为每个经常编写WordPress代码的人节省大量时间。

12. WooCommerce代码段和自动完成功能

Visual Studio Code的WooCommerce Snippet Extension

如果您不仅是一个WordPress开发人员,而且还建立了WooCommerce商店,这个扩展将是一个祝福。它与前面提到的WordPress Snippets扩展类似,但它增加了对WooCommerce API的支持。

当您开始输入编辑器时,屏幕上会显示这些片段。此扩展不仅可以帮助您处理函数,类和钩子名称,还可以为您需要使用的参数添加可编辑的占位符。

下一步

Visual Studio Code是一个高级源代码编辑器,为您提供多个扩展,以便您可以根据需要对其进行自定义。由于扩展程序强制您在编码时使用最佳实践,因此您的代码质量将显着提高,并且还可以节省大量的故障排除时间。一个配置良好的代码编辑器可以让你成为一个更好的程序员。

江门网站建设

最新案例

联系电话 400-6065-301

留言