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

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

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

1. HTML的字体真棒代码

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

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

2. CSS Peek

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

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

3. VS拾色器

如果你经常使用颜色，你会喜欢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 Code中编写有效的CSS代码。它根据W3C规范和浏览器实现验证您的代码。扩展名突出显示错误的属性名称，错误的值，缺少分号和其他错误。

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

6. Live Sass编译器

您可以在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

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

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

8. Atom JavaScript代码段

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

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

9. ESLint

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

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

10. JavaScript助推器

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

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

11. WordPress代码段

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

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

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

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

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

下一步

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

江门网站建设