![c249153af049d939c9b8e7bce4fdfdba.png](https://i-blog.csdnimg.cn/blog_migrate/8dbaaaa64daa5afcbca58864d9048598.jpeg)
简介
在 Build 2015 大会上,微软除了发布了 Microsoft Edge 浏览器和新的 Windows 10 系统外,最大的惊喜莫过于宣布推出免费跨平台的 Visual Studio Code 编辑器了!
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 Diff、GIT命令 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux,运行流畅,可谓是微软的良心之作…
为什么选择VS Code开发工程
作为前端开发的我,之前的开发过程中一直用的是Atom
这一款IDE,再配上了好看的主题插件很nice,Atom的界面是真心好看,但是插件装多了你们真的不觉得卡吗,VS Code
比Atom
更加的流畅,比webstorm
更轻量级。一次偶然换的工作后,项目组要求统一IDE,让我了解到了VS Code
,这边简单介绍下VS Code
日常开发的需求。
VS Code精选主题
![097319cd7fc16c1c3ec759c90bbca287.png](https://i-blog.csdnimg.cn/blog_migrate/81db19494369b725a077e68ed1c7d3d2.jpeg)
主题插件安装流程
首先先简单介绍些主题插件的安装流程:
第一步,点击扩展商店搜索你要找的插件名称如Atom One Dark Theme
,点击安装;
![665b9520dd72c4f3d8a9115775a3f7a0.png](https://i-blog.csdnimg.cn/blog_migrate/831a8fbf2fbdacb67d2474eaebfd51e5.jpeg)
第二部,安装好了之后只是证明你本地的VS Code上面有这个插件了,还需要将当前使用的主题插件切换成你想要的才行;
①点击左下角的设置按钮,进入命令面板;
②搜索颜色主题
关键字;
![87a129bc0eb8c85e1e0b6eef5ea5fdb4.png](https://i-blog.csdnimg.cn/blog_migrate/11c49d87b323f8f3f26d1e981359fdd9.jpeg)
③点击想要的主题完成切换。
![e8b1c3baf9fb882166216b0e9c9dc847.png](https://i-blog.csdnimg.cn/blog_migrate/09e37647113b202c32dd5f10d0a78556.jpeg)
一个编辑器界面的好看与否,真心挺重要的,之前对atom一直恋恋不舍,完全就是因为它的主题界面太优雅了。下图是笔者配置好的VS Code界面截图,下面推荐几款好看的主题:
![c13d709afd69a774f7a9f28a6eb3e35e.png](https://i-blog.csdnimg.cn/blog_migrate/e4dd4d2eaac50f3ffe3608e9cce27bd7.jpeg)
VS Code 主题插件列表(推荐)
1. One Dark Pro
One Dark Pro的主题界面效果如下(推荐指数5星) One Dark Pro
![b7404e95cb4dfb4dce323faf2e06acea.png](https://i-blog.csdnimg.cn/blog_migrate/c9f7ece96bc348085615302493003eb0.png)
2. Atom One Dark Theme
Atom One Dark Theme的主题界面效果如下(推荐指数5星) Atom One Dark Theme
![49f8fcc06e85441bbe49d9432a6df7ef.png](https://i-blog.csdnimg.cn/blog_migrate/3a56ada985e1b1c39ef1ca9e4199f622.png)
3. Eva Theme
Eva Theme的主题界面效果如下(推荐指数5星) Eva Theme
![6e3593ffc033602f4d95364f22de8a61.png](https://i-blog.csdnimg.cn/blog_migrate/3b30f5cafde8422dd92c437c1e4353da.png)
4. Material Palenight Theme
Material Palenight Theme的主题界面效果如下(推荐指数5星) Material Palenight Theme
![734298166fc8387acfe47df55dc43f04.png](https://i-blog.csdnimg.cn/blog_migrate/543f2be03fb9279805672628c3160415.jpeg)
更多Visual Studio Code 主题插件请参考VS Code Downloads
VS Code精选插件
VS Code所有的插件都可以在VS Code Downloads插件库中找到,如下图:
![097319cd7fc16c1c3ec759c90bbca287.png](https://i-blog.csdnimg.cn/blog_migrate/81db19494369b725a077e68ed1c7d3d2.jpeg)
Auto Close Tag
Auto Close Tag:匹配标签,关闭对应的标签。对于HTML/XML很实用。
Auto Rename Tag
Auto Rename Tag:改变标签的时候同时改动开闭合标签;对于HTML/XML很实用。
HTML CSS Support
HTML CSS Support : 这个也是HTML必备插件之一。
CSS Peek
CSS Peek : html和css中关联css的跳转
Code Runner
Code Runner : 代码编译运行看结果,支持众多语言
Git History
Git History : 查看git分支提交日志的插件
Git History Diff
Git History Diff : 寻找每一个git分支上面提交过的节点,并可以对比差异性。
Path Autocomplete
Path Autocomplete : 路径智能补全插件。
Path Intellisense
Path Intellisense : 路径智能提示插件。
beautify
beautify :良好的拓展性,可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用;但是react工程的jsx文件用beautify插件格式化会乱掉,建议不要用
Prettier - Code formatter
Prettier - Code formatter : 代码格式化插件,主要针对工程中的JavaScript / TypeScript / CSS
Prettier Now
Prettier Now : 支持语言比较全面的代码格式化插件,主要是支持jsx /tsx ,还有sass / less等(问的react工程基本上就是用这2个Prettier插件格式化代码)
Terminal
Terminal : vs code 内置的命令行插件,也比较实用。
Bookmarks
Bookmarks : 这个插件支持在文件特定的行做标记,更好的提高开发效率。
![e6475962fd861dfb68dab579e4206e50.png](https://i-blog.csdnimg.cn/blog_migrate/70afb8a7257db9338b0a77847dae2448.jpeg)
Bracket Pair Colorizer
Bracket Pair Colorizer :很多括号的情况下,这个插件可以做一个颜色的区分,代码一目了然。
![eac65a7a5bdd1e910e429f3f52a4d502.png](https://i-blog.csdnimg.cn/blog_migrate/7f5f3cc679bdb3ff5c49179e8fc2b0c4.jpeg)
Chinese (Simplified) Language Pack for Visual Studio Code
Chinese (Simplified) Language Pack for Visual Studio Code : 适用于 VS Code 的中文(简体)语言包。
filesize
filesize : 编辑器底部显示当前文件的大小。
Markdown Preview Enhanced
Markdown Preview Enhanced : 本地Markdown文档预览插件。
vscode-icons
vscode-icons : 一套vs code的图标插件。
npm
npm : 不多说npm。
open-in-browser
open-in-browser : 一键在浏览器中打开
Live Server
Live Server :一键开启本地服务。
fileheader
fileheader :感觉用得上 新建文件作者注释
![abe566272905131aae3ef1134f2ce537.png](https://i-blog.csdnimg.cn/blog_migrate/5dce7780c0a48aaa8712df88b014d94d.jpeg)
在自定义设置页面(comd+,
),可以设置一些作者信息,然后打开命令面板(comd+shift+P
),输入fileheader
回车即可
![4968319a52701e4b712aa08169ec22de.png](https://i-blog.csdnimg.cn/blog_migrate/68832d4d55d9b56fca66fefe9f9929d0.jpeg)
![b4b46205bb4ce8a615fa2dcace882b6f.png](https://i-blog.csdnimg.cn/blog_migrate/943b4dea07cbbdead586d50fd76858e2.jpeg)
Local History
Local History :个人感觉很有用 本地代码的一个保存日志,在没有git,svn,或者很长时间没有提交过代码的情况下,感觉挺实用,再也不怕代码回滚。
![bdd194617d211c71482f02a5d6e241cb.png](https://i-blog.csdnimg.cn/blog_migrate/66a7bb289870188bbfdb675c9df3b6fe.jpeg)
GitLens – Git supercharged
GitLens – Git supercharged : GitLens能增强Visual Studio代码中内置的Git功能。它帮助您通过Git blame注解和代码镜头直观地显示代码作者,无缝地导航和探索Git存储库,通过强大的比较命令获得有价值的见解。
![ad0771ea264e0c9062155241ad06c5f3.png](https://i-blog.csdnimg.cn/blog_migrate/22a408bc0014380c207232c3bd5fbe54.jpeg)
![1810571180036e43958b856cfddf9909.png](https://i-blog.csdnimg.cn/blog_migrate/6a873dea71b9aa095717fab3fae8f625.jpeg)
VS Code常用快捷键
VS Code的快捷键有很多,需要具体的请仔细参考 VS Code
=> 左下角设置按钮
=> 键盘快捷方式
![ca335e67457cb829e06eb40569905c62.png](https://i-blog.csdnimg.cn/blog_migrate/a31854379a7d5370ba1f832987c63828.jpeg)
我们也可以自定义快捷键,在keybindings.json里面设置覆盖即可
![2bd06f43454c21042741718d3628259a.png](https://i-blog.csdnimg.cn/blog_migrate/a0a006a542c7a4357421109923420ea3.jpeg)
快捷键完全是个人操作习惯,这里不多介绍,我常用的有这几个:
打开命令面板 cmd + shift + p / F1 打开设置页面 cmd + , 删除一行 cmd + E(自定义) 添加书签 cmd + option + k 代码格式化 control + opiton + B
VS Code git代码管理实战
git现在是很常见的代码管理工具,VS Code 也有内置的git插件,当然,要是你觉得不完美,可以安装一些常用的git插件等,简单介绍下VS Code 下git的提交步骤。
![00f183cb97ec9ca7c4aa70b378815264.png](https://i-blog.csdnimg.cn/blog_migrate/bdc9a46a5a8c839eb1efb183221900cc.jpeg)
这里我以GitHub上面新建的一个仓库为例,仓库新建后默认分支是master,这里我在GitHub上新建了2个远程分支develop01
和develop02
,当你在VS Code中点击切换到某一个远程分支的时候,VS Code会自动给你创建一个和当前远程分支对应的本地分支,如origin/develop02
对应develop02
,如origin/master
对应master
,如上图所示。
现在我们在master分支上面提交代码,
![1fbfa33b041cb2b9e1b4dc88678e8d58.png](https://i-blog.csdnimg.cn/blog_migrate/ef2df41b4a639d36f04eeaa0f015940f.jpeg)
- 第一步,先暂存要提交的文件
- 第二步,填下提交日志
- 第三步,点击
对勾按钮
完成提交
提交好了之后还需要拉取git远程分支的代码才能推送。
![557e151126ece9279f4bd8ad7078d00d.png](https://i-blog.csdnimg.cn/blog_migrate/72fa32da639049552750df35160c2300.jpeg)
- 第四步,拉取远程代码,解决冲突
- 第五步,推送到远程分支上
然后就没有然后了 ,提交完成。
假如你因为工作需求的原因,需要在不同的分支上面提交不同的代码,那就涉及到分支的切换了。首先第一步,切换分支之前先提交代码,不然老是有报错日志,切换了分支后,本地的代码也会对应分支改变。
![e339342d59622c03a538ab2a5147bf45.png](https://i-blog.csdnimg.cn/blog_migrate/2245cbfc06e52251f2b4c9060f93ec8f.jpeg)
如上图,master切换成develo01之后,master分支上刚提交的代码成了develo01上对应的代码。
git提交代码这部分,还可以使用相关git代码管理工具实现呢,如SourceTree、Tower等工具都很好用,这边也整理了一篇文章,欢迎收藏
你问我答
1.VS Code 怎么更改默认的设置?
笔者使用的是mac,使用快捷键 Com + ,
打开用户默认设置界面,左边是默认设置,右边是自定义设置,根据个人工作场景而定吧,就像我这边就统一格式化代码缩进4格等,还可以设置忽略一些文件夹等。
{
"explorer.confirmDelete": false,
// 主题
"workbench.iconTheme": "vscode-icons",
// 小地图
"editor.minimap.enabled": true,
// 主题风格One Dark Pro
"workbench.colorTheme": "One Dark Pro",
"window.zoomLevel": 1,
"extensions.autoUpdate": false,
// 字体大小
"editor.fontSize": 13,
"editor.snippetSuggestions": "top",
"diffEditor.ignoreTrimWhitespace": true,
// 设置格式化缩进4格
"prettier.tabWidth": 4,
"vetur.format.defaultFormatter.html": "prettier",
"gitlens.advanced.messages": {
"suppressShowKeyBindingsNotice": true
},
"gitlens.historyExplorer.enabled": true,
"atomKeymap.promptV3Features": true,
"editor.multiCursorModifier": "ctrlCmd",
//粘贴自动格式化
"editor.formatOnPaste": false,
//保存自动格式化
"editor.formatOnSave": false,
// 用来忽略工程打开的文件夹
"files.exclude": {
"**/.vscode": true,
"**/.DS_Store": true,
"**/.history":true,
"**/nbproject":true
},
// 用来忽略搜索的文件夹
"search.exclude": {
"**/node_modules/**": true,
"**/bower_components/**": true,
"**/image/**": true,
"**/*.xml": true,
"**/.history/**":true,
"**/nbproject/**":true,
"**/vscode/**":true
},
// 创建和更新代码的头部信息作者
"fileheader.Author": "Baldwin",
"fileheader.LastModifiedBy": "Baldwin",
}
2.假如我几天没有提交代码了(git),今天突然发现代码youbug,需要还原到昨天版本,VS Code能做到吗?
能。参考上面的 VS Code插件 Local History
基本上就介绍到这里(有好的插件或者主题欢迎留言,一定给update上去),希望对你使用VS Code有帮助,有问题欢迎留言,一定积极回复
作者:niceboybao
链接:http://www.imooc.com/article/286003
来源:慕课网
本文原创发布于慕课网 ,转载请注明出处,谢谢合作