简介
在 Build 2015 大会上,微软除了发布了 Microsoft Edge 浏览器和新的 Windows 10 系统外,最大的惊喜莫过于宣布推出免费跨平台的 Visual Studio Code 编辑器了!
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 Diff、GIT命令 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux,运行流畅,可谓是微软的良心之作......
为什么选择VS Code工程开发
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
作为前端开发的我,之前的开发过程中一直用的是Atom
这一款IDE,再配上了好看的主题插件很nice,Atom的界面是真心好看,但是插件装多了你们真的不觉得卡吗,VS Code
比Atom
更加的流畅,比webstorm
更轻量级。一次偶然换的工作后,项目组要求统一IDE,让我了解到了VS Code
,这边简单介绍下VS Code
日常开发的需求。
VS Code精选主题
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
主题插件安装流程
首先先简单介绍些主题插件的安装流程:
第一步,点击扩展商店搜索你要找的插件名称如
Atom One Dark Theme
,点击安装;
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
第二部,安装好了之后只是证明你本地的VS Code上面有这个插件了,还需要将当前使用的主题插件切换成你想要的才行;
①点击右下角的设置按钮,进入命令面板;
②搜索颜色主题
关键字;
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
③点击想要的主题完成切换。
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
一个编辑器界面的好看与否,真心挺重要的,之前对atom一直恋恋不舍,完全就是因为它的主题界面太优雅了。下图是笔者配置好的VS Code界面截图,下面推荐几款好看的主题:
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
VS Code 主题插件列表(推荐)
1. One Dark Pro
One Dark Pro的主题界面效果如下(推荐指数5星) One Dark Pro
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
2. Atom One Dark Theme
Atom One Dark Theme的主题界面效果如下(推荐指数5星) Atom One Dark Theme
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
3. Eva Theme
Eva Theme的主题界面效果如下(推荐指数5星) Eva Theme
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
4. Material Palenight Theme
Material Palenight Theme的主题界面效果如下(推荐指数5星) Material Palenight Theme
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
更多Visual Studio Code 主题插件请参考VS Code Downloads
VS Code精选插件
VS Code所有的插件都可以在VS Code Downloads插件库中找到,如下图:
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
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 : 这个插件支持在文件特定的行做标记,更好的提高开发效率。
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
Bracket Pair Colorizer
Bracket Pair Colorizer :很多括号的情况下,这个插件可以做一个颜色的区分,代码一目了然。
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
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 :一键开启本地服务。
Local History
Local History :个人感觉很有用 本地代码的一个保存日志,在没有git,svn,或者很长时间没有提交过代码的情况下,感觉挺实用,再也不怕代码回滚。
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
GitLens — Git supercharged
GitLens — Git supercharged : GitLens能增强Visual Studio代码中内置的Git功能。它帮助您通过Git blame注解和代码镜头直观地显示代码作者,无缝地导航和探索Git存储库,通过强大的比较命令获得有价值的见解。
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
VS Code常用快捷键
VS Code的快捷键有很多,需要具体的请仔细参考 VS Code
=> 右下角设置按钮
=> 键盘快捷方式
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
我们也可以自定义快捷键,在keybindings.json里面设置覆盖即可
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
快捷键完全是个人操作习惯,这里不多介绍,我常用的有这几个:
打开命令面板 cmd + shift + p / F1
打开设置页面 cmd + ,
删除一行 cmd + E(自定义)
添加书签 cmd + option + k
代码格式化 control + opiton + B
复制代码
VS Code git代码管理实战
git现在是很常见的代码管理工具,VS Code 也有内置的git插件,当然,要是你觉得不完美,可以安装一些常用的git插件等,简单介绍下VS Code 下git的提交步骤。
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
这里我以GitHub上面新建的一个仓库为例,仓库新建后默认分支是master,这里我在GitHub上新建了2个远程分支develop01
和develop02
,当你在VS Code中点击切换到某一个远程分支的时候,VS Code会自动给你创建一个和当前远程分支对应的本地分支,如origin/develop02
对应develop02
,如origin/master
对应master
,如上图所示。
现在我们在master分支上面提交代码,
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
- 第一步,先暂存要提交的文件
- 第二步,填下提交日志
- 第三步,点击
对勾按钮
完成提交
提交好了之后还需要拉取git远程分支的代码才能推送。
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
- 第四步,拉取远程代码,解决冲突
- 第五步,推送到远程分支上
然后就没有然后了,提交完成。
假如你因为工作需求的原因,需要在不同的分支上面提交不同的代码,那就涉及到分支的切换了。首先第一步,切换分支之前先提交代码,不然老是有报错日志,切换了分支后,本地的代码也会对应分支改变。
![](https://ucc.alicdn.com/notfound.png?x-oss-process=image/resize,w_1400/format,webp)
如上图,master切换成develo01之后,master分支上刚提交的代码成了develo01上对应的代码。
你问我答
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有帮助,有问题欢迎留言,一定积极回复
原文发布时间为:2018年06月23日
作者:baldwin
本文来源: 掘金 如需转载请联系原作者