Visual Studio Code(VS code)你们都在用
写在前面
在前端开发中,有一个非常好用的工具,Visual Studio Code,简称VS code。
都不用我安利VS code,大家就会乖乖的去用,无数个大言不惭的攻城狮,都被VS code比德芙还丝滑的强大功能所折服。
我是来给大家安利插件的,想做个比较全面的插件集合给大家。网上的我也看过一些,但是都比较零散,时间也久了一些,我结合最近的情况,总结一下。
造福大家,才是我想做的。手动比心❤。
正文
一.日常安利 VS code
VS vode特点:
1、开源,免费;
2、自定义配置
3、集成git
4、智能提示强大
5、支持各种文件格式(html/jade/css/less/sass/xml)
6、调试功能强大
7、各种方便的快捷键
8、强大的插件扩展
对前端这么友好,没理由不用。
Visual Studio Code(VScode )官网 :https://code.visualstudio.com/
Visual Studio Code(VScode )github地址 :https://github.com/Microsoft/vscode
二.怎么安装插件?
方法一:
- 按F1或Ctrl+Shift+p,输入extensions,点击第一个就可以
-
方法二:
- ctrl + P 然后输入 >ext install
-
方法三:
- 点击图中位置
-
三.插件合集
每一个插件名都超链接到官网,注意查看。
a.配置类插件:
最好用的插件,没有之一,一台电脑配置好之后,其它的几台电脑都不用配置。新机器登录一下就搞定了。再也不用折腾环境了,
使用GitHub Gist同步多台计算机上的设置,代码段,主题,文件图标,启动,键绑定,工作区和扩展。
![](https://img.haomeiwen.com/i9242372/367fc19eb0f7af4a.png)
从VS Code调试在Google Chrome中运行的JavaScript代码。用于在Google Chrome浏览器或支持Chrome DevTools协议的其他目标中调试JavaScript代码的VS Code扩展。
![](https://img.haomeiwen.com/i9242372/5be8f0f1410d5187.png)
3.beautify
格式化代码工具
美化javascript
,JSON
,CSS
,Sass
,和HTML
在Visual Studio代码。
![](https://img.haomeiwen.com/i9242372/cf42cb4c8e3a50d2.png)
4.Atuo Rename Tag
修改 html 标签,自动帮你完成头部和尾部闭合标签的同步修改
Chinese (Simplified) Language Pack for Visual Studio Code
将界面转换为中文,对英语不好的人,非常友好。例如我。。。
![](https://img.haomeiwen.com/i9242372/ae8fe09d2b777228.png)
代码拼写检查器
一个与camelCase代码配合良好的基本拼写检查程序。
此拼写检查程序的目标是帮助捕获常见的拼写错误,同时保持误报数量较低。
![](https://img.haomeiwen.com/i9242372/4dff990aa7e47e82.png)
显示Visual Studio代码的图标,目前该插件已被vscode内部支持:"文件" -> "首选项" -> "文件图标主题"
![](https://img.haomeiwen.com/i9242372/3ceb2d596ecab17d.png)
8.guides
显示代码对齐辅助线,很好用
![](https://img.haomeiwen.com/i9242372/b439c95deedc7e90.png)
为圆括号,方括号和大括号提供彩虹色。这对于Lisp或Clojure程序员,当然还有JavaScript和其他程序员特别有用。
效果如下:
![](https://img.haomeiwen.com/i9242372/fb41d2755be36de5.png)
用于着色匹配括号
![](https://img.haomeiwen.com/i9242372/a4e49f93e8bf3483.png)
用四种不同颜色交替着色文本前面的缩进
![](https://img.haomeiwen.com/i9242372/910e39dcad70dfd3.png)
12.filesize
在状态栏中显示当前文件大小,点击后还可以看到详细创建、修改时间
![](https://img.haomeiwen.com/i9242372/b315e85fd9e786fd.png)
13.Import Cost
对引入的计算大小
![](https://img.haomeiwen.com/i9242372/c8a0865cb9f97f25.png)
可自动填充文件名。
![](https://img.haomeiwen.com/i9242372/c35c94fd0792403a.png)
15.WakaTime
从您的编程活动自动生成的度量标准,见解和时间跟踪。
![](https://img.haomeiwen.com/i9242372/7d953a96cc52b44c.png)
16.GitLens
git日志查看插件
GitLens 增强了 Visual Studio Code 中内置的 Git 功能。例如 commits 搜索,历史记录和和查看代码作者身份,还能通过强大的比较命令获得有价值的见解等等
![](https://img.haomeiwen.com/i9242372/3b7e65c8a88ba00d.png)
17.REST Client
REST客户端允许您直接发送HTTP请求并在Visual Studio Code中查看响应。
![](https://img.haomeiwen.com/i9242372/fa3098331e40c7ae.png)
用于在 import 语句中自动填充 npm 模块
require 时的包提示(最新版的vscode已经集成此功能)
![](https://img.haomeiwen.com/i9242372/acf5bfc343c3264e.png)
VS Code的Azure存储扩展允许您部署静态网站并浏览Azure Blob容器,文件共享,表和队列。按照本教程从VS Code部署Web应用程序到Azure存储。
![](https://img.haomeiwen.com/i9242372/895e8ef26561c61b.png)
它可以帮助您轻松访问项目,无论它们位于何处。不要再错过那些重要的项目了。您可以定义自己的收藏项目,或选择自动检测VSCode项目,Git,Mercurial和SVN存储库或任何文件夹。
从版本8开始,您就有了专门的项目活动栏!
以下是Project Manager提供的一些功能:
- 将任何项目保存为收藏夹
- 自动检测VSCode,GIT中,水银或SVN存放区
- 在相同或新窗口中打开项目
- 识别已删除/重命名的项目
- 一个状态栏标识当前项目
- 专门的活动栏
![](https://img.haomeiwen.com/i9242372/852d9c35092ac9dc.png)
21.Language Support for Java(TM) by Red Hatredhat.java
这个插件,这个下载次数,安装就对了。
![](https://img.haomeiwen.com/i9242372/68479c92be490e1e.png)
22.Todo Tree
此扩展可以快速搜索(使用ripgrep)您的工作区以获取TODO和FIXME等注释标记,并在资源管理器窗格的树视图中显示它们。单击树中的TODO将打开文件并将光标放在包含TODO的行上。
找到的TODO也可以在打开的文件中突出显示。
![](https://img.haomeiwen.com/i9242372/203e538eec77da39.png)
以上介绍的是功能插件,下一篇将会整理主题插件,下期见!
![](https://img.haomeiwen.com/i9242372/ba224f17e264480a.png)
欢迎关注我的公众号:PythonWork,立即领取500g Python学习资料!