VS Code 基本使用技巧整理

Visual Studio Code(简称VS Code)是微软开发的文本编辑器,同时支持Windows、Linux和macOS操作系统,并且是开源的。从2015年发布到现在,因为功能强大,扩展性强,并且使用体验非常好,用的人是越来越多。我也是从原来的sublime迁移到atom到
现在VS code。在这里整理了一下对于刚入坑非常有帮助的一些基础技巧。希望能有些帮助,高级复杂一点的编辑技巧会在下一片内容进行整理,希望大家多关注我。

命令面板

随时随地显示命令面板,并操作

Mac: cmd+shift+p or f1

Windows / Linux: ctrl+shift+p or f1

command palette.gif

快捷键显示

在命令面板上面的命令,如果设置了快捷键,那么在右边就会显示,如果你忘记了可以通过这种方式查看。

keyboard references.png

快速打开

快速打开文件

Mac: cmd+p

Windows/Linux: ctrl+p

Quick Open.gif

Tip: Type "?" to view help suggestions.

?

命令行工具

使用Terminal命令快速的启动并设置项目。

安装命令行工具

  1. 打开 Command Palette | 命令面板 (command+shift+p)
  2. 输入 "shell command",点击回车

使用命令行工具

# 使用VS code 打开当前文件夹
code .

# 在最近使用的代码窗口打开当前文件夹
code -r .

# 创建新文件
code -n

# 修改语言
code --locale=es

# 打开 diff 编辑器
code --diff <file1> <file2>

# 查看帮助
code --help

# 禁用所有的插件
code --disable-extensions .

[图片上传失败...(image-925bd4-1536738397728)]

状态栏

显示错误和警告

能够快速的跳转到错误和警告的位置。

Mac: shift+cmd+m

Windows / Linux: ctrl+shift+m

errors and warnings.gif

修改语言模式

修改当前文件类型为自己想用的语言。如果你想将语言配置保存下来,可以使用configure file association for... 命令将当前文件扩展名与语言相关联

Mac: cmd+k m

Windows / Linux: ctrl+k m

change syntax.gif

Customization | 自定义

Vs code有很多自定义选项

  • 修改主题
  • 修改快捷键
  • 自定义设置
  • 添加 JSON 验证
  • 自定义代码块
  • 安装插件

修改主题

  1. 打开 Command Palette | 命令面板 (command+shift+p)
  2. 输入" themes",选择修改想用的主题
  3. 你可以从插件市场下载自己喜欢的主题
Preview themes.gif

还可以修改文件ICON的主题样式。

File icon themes.gif

修改快捷键

macOS


macOS VS code 快捷键

Windows


Windows

Linux


Linux VS code 快捷键

键盘映射

如果你已经用习惯了其他编辑器,类似Vim,Sublime,Emacs,Atom的可以直接从Preferences > Keymap Extensions 进行修改。

自定义快捷键

  1. 打开 Command Palette | 命令面板 (command+shift+p)
  2. 输入"keyboard shortcuts."
  3. 输入自己想用的快捷键
customize keyboard shortcuts.gif

自定义设置

打开 settings.json

Mac: cmd+,

Windows / Linux: File > Preferences > Settings

/粘贴时格式化/

"editor.formatOnPaste": true

/改变字体大小/

"editor.fontSize": 18

/设置缩放等级/

"window.zoomLevel": 5

/编程字体连字/

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

需要安装字体“Fira Code

[图片上传失败...(image-a4b1aa-1536738397728)]

/自动保存/: 你还可以使用最高级别的自动保存,在File > Auto Save设置

"files.autoSave": "afterDelay"

/保存时格式化/

"editor.formatOnSave": true,

/修改tab长度/

"editor.tabSize": 4

/空白符号显示/

"editor.renderWhitespace": "all"

根据语言设置

之前所有的设置可以根据不同语言分别生效。

"[languageid]": {

}

[图片上传失败...(image-c2712e-1536738397728)]

插件

安装插件

点击VS code 插件市场,就可以安装插件了,还可以选择不同的排序方式,例如按照下载数量排序。

install extensions.gif

插件推荐

在插件设置的位置,可以选择推荐插件,这是VS code 根据当前语言环境推荐给你的插件。

show recommended extensions.gif

制作插件

当然如果你想要做一个自己的插件,你可以根据官方文档自己编写,大神可以自由发挥。

documentation on contribution points

文件/文件夹管理

终端

Windows / Linux / Mac: ctrl+`

[图片上传失败...(image-1c963c-1536738397728)]

侧边栏

Mac: cmd+b

Windows / Linux: ctrl+b

toggle side bar.gif

Zen Mode | 专注模式

Mac: cmd+k z

Windows / Linux: ctrl+k z

zen mode.gif

并排编辑

Mac: cmd+\ 或在文件管理页面按住cmd并点击鼠标

Windows / Linux: ctrl+\

Linux: ctrl+2

你也可以用鼠标将文件从一个组拖动到另外一组。

split editors.gif

切换编辑器窗口

Mac: cmd+1, cmd+2, cmd+3

Windows / Linux: ctrl+1, ctrl+2, ctrl+3

navigate editors.gif

激活资源管理器窗口

Mac: cmd+shift+e

Windows / Linux: ctrl+shift+e

创建和打开文件

Mac: cmd+鼠标点击

Windows / Linux: ctrl+鼠标点击

create and open file.gif

关闭当前窗口

Mac: cmd+w

Windows / Linux: ctrl+k f

查看文件编辑历史

查看历史 ctrl+tab

后退

Mac: ctrl+-

Windows / Linux: alt+left

前进

Mac: ctrl+shift+-

Windows / Linux: alt+right

navigate history.gif

文件导航

Mac: cmd+e 或 cmd+p

Windows / Linux: ctrl+e 或 ctrl+p

navigate to file.gif

以上都是VS code的基本使用技巧,更高级的技巧将在下一片内容整理。这些基本技巧看着很多,实际上用的最多的还是打开命令导航文件导航,剩下的基本都可以在这个基础上打字来解决。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容