Visual Studio Code 配置指南
本文内容已有更新,请查看 github 上最新版本:https://github.com/kaiye/kaiye.github.com/issues/14
---
Visual Studio Code (简称 VS Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器。在我看来它是「一款完美的编辑器」。
本文是有关 VS Code 的特性介绍与配置指南,相关设置主要针对 Mac OS X 平台。在快捷键部分, ⌘ 指 Command 键,⇧ 指 Shift 键,⌃ 指 Control 键,⌥ 指 Option/Alt 键。
1. Visual Studio Code 特性简介
1.1 Git 集成
如上图所示,VS Code 默认集成了 Git 版本管理。
切换至 Git 面板,点击左侧被修改的文件,即可进行版本对比。使用快捷键 ⌘P
打开快捷窗口,可直接使用 git 相关命令。
更多 Git 参考资料请阅读《Git 进阶指南》和 VS Code 官方文档《Version Control》章节。
1.2 多窗口实时编辑与预览
VS Code 最多可同时开启三个子窗口。若多个子窗口中打开的文件为同一文件时,则修改其中任意窗口内容,其他窗口都可以实时同步变更。
如上图,左侧子窗口是一个 Markdown 文件,右侧子窗口是该文件的 Markdown 预览模式(快捷键 ⇧⌘V),如此即可实现类似 MacDown/Mou 等软件的编写体验。
1.3 代码提示与引用分析
虽然是一款轻量级编辑器,但 VS Code 却有着 IDE 级别的代码高亮、语法检测、引用分析功能,十分适合编程初学者和大型项目开发。在其官网上列出了它默认支持的语言列表。
借助 Typings ,VS Code 还支持了 Node.js、ES6、AngularJS、ReactJS,十分适合前端开发人员。为了能更好的和其他开源框架融合,VS Code 有意削弱了原有的 JavaScript 语法校验功能,建议用户使用 ESLint 来定制个性化代码校验需求。
除此之外,VS Code 的 Debug 功能也是十分强大。以下是其 Node.js Debug 的演示:
借助「Debugger for Chrome」插件,还可以直接在编辑器中打断点调试 web。
1.4 命令行调用
VS Code 提供了一个 code
命令,用来在 shell 环境下调用编辑器。使用快捷键 ⇧⌘P
(或 F1) 唤起命令面板,输入以下命令即可完成安装。
code 命令后可接多个路径或文件:
code pro6.js pro6.scss ../
文件对比:
code -d new-file.js old-file.js
打开文件并跳至指定行:
code -g source/cn/static/global/tracker.js:
更多 code 命令行使用方法,参见《Additional Command line arguments》。
1.5 更聪明的 Emmet
VS Code 内置了 Emmet,且在其基础之上做了进一步增强,极大的提升了 CSS、HTML 编写效率。例如,在一个 CSS 选择器中书写以下属性后,按下 tab
键,均可自动补全为 overflow:hidden
:
ov:h
ove:h
of:h
更多 Emmet 缩写,请参考《Emmet Cheat Sheet》。
2. 快捷键配置
2.1 所有快捷键列表
注:VS Code 的快捷键有很多是 Fn 功能键,不符合 Mac 用户习惯,建议各位通过 Preferences -> Keyboard Shortcuts 重设快捷键。
所有快捷键列表请参见《Key Bindings for Visual Studio Code》,其中较为常用的快捷键有以下这些:
文本选择
⌃⇧⌘→ - AST (Abstract Syntax Tree) 抽象语法树选择展开一级
⌃⇧⌘← - 抽象语法树选择缩小一级
单行编辑
⇧⌘K - 单行操作,删除光标所在行
⇧⌥↓ - 复制光标所在行到下一行
多行编辑
⌥⌘↓ - 向下插入一个光标,或者使用 ⌥ + Click
⇧⌥ + 鼠标拖动 - 多列区块选择,再配合 ⇧⌘→ 可选中至结尾处
⇧⌘L - 选择相同文本
⌘F2 - 选择相同单词,或者使用 ⌘D 依次加入选中
代码定位
⇧⌘O - 跳转至对象、属性、方法
⇧⌥F - 代码格式化
⇧⌘M - 显示当前文件的错误与警告信息
F12 - 跳转至定义行
⌥F12 - 浮窗打开定义行(可直接修改)
⌥⌘ + Click - 新开侧边窗口跳转至定义行
⇧⌘\ - 跳转至对应匹配括号处
代码展示
⌥Z - 开启/关闭代码自动换行,还可通过 editor.wrappingColumn 配置单行最大字符数
⇧⌘[ - 代码折叠,⇧⌥⌘[ 为全部折叠
⇧⌘] - 代码展开,⇧⌥⌘] 为全部展开
3. 常见问题
3.1 如何支持 PHP Smarty Template 语法
VS Code 能识别大部分主流代码文件,当需要进行关联语法设置时,可通过 Preferences -> Workspace Settings (或 User Settings)配置文件进行设置。
例如,以下代码可以将后缀为 .tpl 的 Smarty 模板文件关联成 PHP 语法:
"files.associations":{
"*.tpl": "php"
}
3.2 如何在 sidebar 隐藏编译后文件
设置 Preferences -> Workspace Settings (或 User Settings)配置文件,将需要隐藏的文件按 glob 匹配模式进行配置,例如以下是 Angular2 TypeScript 项目中隐藏 .js 与 .js.map 文件的配置:
{
"files.exclude": {
"**/._*": true,
"node_modules/": true,
"app/*.js.map": true,
"app/*.js": true
}
}
3.3 如何搜索 node_modules 文件夹中的文件
VS Code 的默认搜索规则中会排除 **/.git, **/.DS_Store, **/bower_components, **/node_modules
目录,可以在用户配置文件(User Settings)中加入以下配置,来关闭或启用这些规则:
{
"search.exclude": {
"**/node_modules": false,
"**/bower_components": true
}
}
Visual Studio Code 配置指南的更多相关文章
- Visual Studio Code配置 HTML 开发环境
Visual Studio Code配置 HTML 开发环境 https://v.qq.com/x/page/l0532svf47c.html?spm=a2h0k.11417342.searchres ...
- Visual Studio Code配置GoLang开发环境
Visual Studio Code配置GoLang开发环境 在Visual Studio Code配置GoLang开发环境 作者:chszs,未经博主允许不得转载.经许可的转载需注明作者和博客主页: ...
- Visual Studio Code配置
Visual Studio Code 从1.23.0开始VS Code就不再默认提供各语言版本, 而是改为使用插件的方式提供语言包. 在插件商店搜索Chinese (Simplified), 安装. ...
- Visual Studio Code配置技巧
Visual Studio Code配置技巧 VS Code是啥 Visual Studio Code(以下简称 VS Code) 是一个免费.开源.跨平台的由微软开发的程序编辑器.它是用 TypeS ...
- Visual Studio Code 配置C++环境
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮.智能代码补全.自定义热键.括号匹配.代码片段. ...
- Visual Studio Code使用指南
简介 Visual Studio Code是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮.智能代码补全.自定义热键.括号匹配.代码片段.代码对比 Diff.GIT 等特性 ...
- Visual Studio Code 配置 gcc
作者:谭九鼎链接:https://www.zhihu.com/question/30315894/answer/154979413来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...
- Visual Studio Code 配置 gulp
原本用的webstorm部署的gulp,后来由于太卡,打算换个编辑器,考虑了一番,之前用的是sublime,配置很是麻烦,最新听说饥人谷老师用的是vsCode,所以打算尝试一下这个编辑器,安装还是很方 ...
- Visual Studio Code 配置C/C++环境
0. 前言 VS Code 是微软发布一款跨平台的源代码编辑器,其拥有强大的功能和丰富的扩展,使之能适合编写许多语言. 本文面向初学者(但不是纯小白),分享一点我配置C/C++的经验. 本文所有内容均 ...
随机推荐
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- 对抗假人 —— 前后端结合的 WAF
前言 之前介绍了一些前后端结合的中间人攻击方案.由于 Web 程序的特殊性,前端脚本的参与能大幅弥补后端的不足,从而达到传统难以实现的效果. 攻防本为一体,既然能用于攻击,类似的思路同样也可用于防御. ...
- Javascript生成二维码(QR)
网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网 ...
- Django
一.Django 简介 Django 是一个由 Python 写成的开放源代码的 Web 应用框架.它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站的,即是 CMS(内容管理系统) ...
- 在你的ASP.NET MVC中使用查找功能
在程序中,使用查找功能是少之不了.今天在ASP.NET环境下演示一回. 在cshtml视图中,有三个文本框,让用户输入关键词,然后点击最右连的“搜索”铵钮,如果有结果将显示于下面. Html: 表格放 ...
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- Oracle Standard Error 列表
今天,我特意从网上找了一些,以及自己平时总结的,关于错误编号和说明,平时我们在写项目的时候,往往是可能会出现下面这些错误,例如:违反唯一约束,无效的会话ID,等等.希望对大家有点帮助!可以看看,如果有 ...
- 枚举:enum
枚举 所谓枚举就是指定好取值范围,所有内容只能从指定范围取得. 例如,想定义一个color类,他只能有RED,GREEN,BLUE三种植. 使用简单类完成颜色固定取值问题. 1,就是说,一个类只能完成 ...
- [学习笔记]JavaScript之函数式编程
欢迎指导与讨论:) 前言 函数式编程能使我们的代码结构变得简洁,让代码更接近于自然语言,易于理解. 一.减少不必要的函数嵌套代码 (1)当存在函数嵌套时,若内层函数的参数与外层函数的参数一致时,可以这 ...
- 《深入理解Java虚拟机》内存分配策略
上节学习回顾 1.判断对象存活算法:引用计数法和可行性分析算法 2.垃圾收集算法:标记-清除算法.复制算法.标记-整理算法 3.垃圾收集器: Serial:新生代收集器,采用复制算法,单线程. Par ...