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