目录
1. VS Code简介
- 在 Build
2015
大会上,微软
宣布推出免费跨平台的 Visual Studio Code 编辑器了! - Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持
几乎所有主流的开发语言
的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 Diff、GIT命令 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux,运行流畅,可谓是微软的良心之作…
2. vscode 下载安装
进入官网下载安装 点此进入官网
3. 配置:
【 ctrl +, 】打开setting设置界面
1. 开启自动保存
【 ctrl +, 】打开setting设置界面,搜索Auto Save
2. 保存时自动格式化
- 具体操作参考:VSCode自动格式化
使用Tab键展开Emmet缩写
【 ctrl +, 】打开setting-扩展 -Emmet下,打开settings.json 添加配置信息:
"emmet.triggerExpansionOnTab": true
4. 插件
VSCode属于轻便型
代码编辑器,可以安装一些插件来扩展它的功能,不像一些集成的大型IDE集成了很多功能,安装、使用起来比较麻烦。
- 通过点击下方图片所示或者使用快捷键
ctrl+shift+x
打开扩展模块安装插件。
4.0 插件汇总
https://segmentfault.com/a/1190000011779959
Auto Close Tag //自动添加HTML / XML关闭标签(必备)
Auto Rename Tag //自动重命名配对的HTML / XML标签(必备)
Auto Complete Tag //自动补全标签,搭配自动重命名(必备)
Beautify //格式化javascript,JSON,CSS,Sass,和HTML,快捷键ctrl+a ctrl+k ctrl+f
css peek //能够查看CSS ID和类的字符串作为HTML文件中相应的CSS定义(必备)
Git History //以图表的形式查看git日志 ,使用 command+shift+p(Ctrl+shift+p) 输入git log就可以看到了
JavaScript (ES6) code snippets //es6代码片段(必备)
JavaScript Snippet Pack //js代码片段(必备)
Path Intellisense //路径自动补全(必备)
Vetur //添加对.vue后缀文件的快速书写支持。
Vue 2 Snippets //快速新建vue页面(使用方法:https://blog.csdn.net/Eva3288/article/details/81662735)
4.1 git 相关插件
点击左侧扩展按钮,或者快捷键Ctrl+Shift+X
打开左侧扩展侧栏
1. GitLens—Git supercharged (git记录,单击某一行代码会显示对应的修改人和时间)
安装前:
安装后:
2. Git History (右键选中的文件, 可查看git提交、修改记录)
使用:右键文件可查看提交、修改记录
4.2 便捷操作
1. Path Intellisense (路径智能感知–【自动完成文件名】)
使用后:会自动显示出对应的文件名提示
2. Auto Rename Tag (自动重命名结束标签)
使用后: