Visual Studio Code编辑器的实用插件和工作中实用的技巧

其实工作中使用过很多的编辑器，比如WebStorm，Sublime Text，国产的HBuilder。最终我还是选择了Visual Studio Code作为我的后续工作中的工具IDE。不仅仅启动速度比WebStorm快速很多，而且插件安装也很方便。并且也是微软出品的，对TypeScript支持度好。对于经常使用nodeJS的工作人员来说，稍加配置，调试起来那真是方便的很。不仅仅软件的界面风格漂亮，使用的体验性也是非常的不错。推荐给大家尝试一下。真的很不错的编辑器。废话不多说了。我们直接开始：

一：先说使用的插件：

AutoFileName：自动识别文件路径

智能感知 IntelliSense

ESLint（检测js写的是否符合规则）

JavaScript (ES6) Code Snippets (代码片段插件)

Document This (JSDoc注释插件)

vscode-icons (侧边栏图标插件)

在浏览器中打开或预览 – Open-In-Browser

跳转到 CSS 定义行 – CSS Peek

自动跟换标签名修改-------auto rename tag 

HTML 模板 – HTML Boilerplate

格式化代码 代码美化 – Prettier

命名格式转换 – Change Case

正则表达式预览 – Regex Previewer

HTML Snippets：超级实用且初级的 H5代码片段以及提示

jQuery Code Snippets：jquery 重度患者必须品，废话不多说，上图

Path Intellisense：自动路劲补全，默认不带这个功能的，赶紧装

HTMLHint：html代码检测

Project Manager：在多个项目之前快速切换的工具

beautify：格式化代码的工具

Bootstrap 3 Sinnpet：常用 bootstrap 的可以下

 Faker：使用流行的 JavaScript 库 – Faker，能够帮你快速的插入用例数据。Faker 可以随机生成姓名、地址、图像、电话号码，或者经典的乱数假文段落，并且每个类别还包含了各种子类别，你可以根据自身的需求来使用这些数据

Prettier：Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够自动应用 Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式

Color Info：这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。

Bracket Pair Colorizer：各自对应的括号，显示不同的颜色，方便查看是否缺少括号。很不错的插件。

直接上图，我所安装的不错的插件：

安装vscode-icons (侧边栏图标插件)后就会变成这样：

很多时候我们需要预编译less或者scss，那么Visual Studio Code编辑器的插件特别丰富。我安装的scss插件easy sass 

Visual Studio Code中很多的插件是需要配置的，比如我们用的这个sass的预处理时候，就需要配置我们的Visual Studio Code：

当然啦，对于预处理器，大家要安装ruby，然后才是我们的插件功能。

二：调试功能的使用：

对于Visual Studio Code，我最喜欢的就是他的内置nodejs和调试的功能，比如我们调试一段js代码，首先我们要配置我们的调试文件：

{  // 使用 IntelliSense 了解相关属性。  // 悬停以查看现有属性的描述。  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387  "version": "0.2.0",  "configurations": [    {        "name": "谷歌浏览器", //运行html文件，用谷歌浏览器打开        "type": "chrome",        "request": "launch",        "url": "${file}",        "sourceMaps": true,        "webRoot": "${workspaceRoot}"    },    {        "name": "nodeLauch", //单独调试js，即可以直接运行js        "type": "node",        "request": "launch",        "program": "${file}", //这个配置成你要调试的文件、${file}当前打开的文件        "stopOnEntry": false,        "args": [],        "cwd": "${workspaceRoot}",        "runtimeExecutable": null,        "runtimeArgs": [            "--nolazy"        ],        "env": {            "NODE_ENV": "development"        },        "console": "internalConsole",        "preLaunchTask": "",        "sourceMaps": false,        "outFiles": null    }  ]}

然后启动我们的调试：

从左往右依次是，调试所在的位置，调试的调试模式和开始开关，断点的位置，控制断点调试的控制按钮。

这样对于nodeJS的调试，那更加方便了，不仅如此，我们还可以打开编辑器的终端：

这里面随时显示我们使用的功能插件和调试文件。和cmd中功能完全一样。这样大大方便了我们对于js的控制和调试。所以Visual Studio Code真是一款不错的编辑器。我已经放弃所有的编辑器，以后就把它当成手中的剑，在互联网的世界闯荡。

其实Visual Studio Code还有很多很多实用的功能，期待我们一起去使用，与所有的前端爱好者共勉........