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还有很多很多实用的功能，期待我们一起去使用，与所有的前端爱好者共勉........

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

『C/C++养成计划』Visual Studio Code编辑器配置(外观通用型扩展Minmal)
Visual Studio Code编辑器配置(外观&通用型扩展&Minmal)! 文章目录一. vscode配置外观|通用型扩展 1.1. 色彩主题配置扩展(GitHub Them ...
Visual Studio Code开发HTML5安装插件快捷使用Bootstrap样式
Visual Studio Code开发HTML5安装插件快捷使用Bootstrap样式一.引入bootstrap.css 下载bootstrap,地址:Bootstrap中文网点击Bootstr ...
Visual Studio Code：利用 MSSQL 插件创建数据库 IDE
尽管面对繁重的 .NET 开发任务 Visual Studio 仍是我的首选 IDE,但我却已深深迷恋上 Visual Studio Code (VS Code),无论我使用的语言是 C#.JavaS ...
ubuntu14.04 LTS Visual Studio Code 编辑器推荐
除了ubuntu geany (茶壶图标) 这个一直爱好的编辑器,发现一个新的编辑器"Visual Studio Code",也是很好用,记录下 https://code.visu ...
Visual Studio Code安装(软件及插件)教程
官网下载地址https://code.visualstudio.com/Download 百度网盘下载链接分享链接:https://pan.baidu.com/s/1fTb4aG91N_Z-3VGk ...
Visual Studio Code 编辑器使用
image.png 之前一直都是用 sublime text 作为开发工具,用久了自然而然会觉得生活无趣,而且当时用sublime text 装了很多插件,有些插件不能用,于是决定试试微软的新产品 V ...
Visual Studio Code 编辑器使用入门
目录为什么使用 VS Code VS Code 安装 launch.json 简介使用VS Code 开发 Javascript 安装Script插件调试Script 如何设置成中文为什么使 ...
修改Visual Studio Code编辑器的主题和代码颜色
摘要:自定义Visual Studio Code(VSCode)的主题和代码颜色在VS Code 的左下角,点击设置. 打开设置后,在搜索栏搜索关键字:主题. 搜索结果显示有许多个在setting. ...
VS Code(Visual Studio Code)编辑器的常用设置
1.代码自动补全这里说的代码补全主要是指HTML代码补全,用过sublime或者WebStorm的同学都知道通过Tab键或Enter键能自动补全代码,但是第一次接触VS Code会发现并不能.其实并 ...
Visual Studio Code修改HTML Snippets插件中默认模板内容
最近在熟悉用VSC做前端开发编辑器,发现snippets这个功能很好用,就是自动帮你输入HTML标签,安装HTML Snippets插件(0.1.0)后,直接在代码里面输入html5然后敲回车就会自动 ...

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

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

最新文章

热门文章