🎼 前言
跟着本文章节,一步一步操作(设置、插件、快捷键等),一定能把 VSCode 打造成作者我喜欢的样式和行为,加上读者你自己的一些喜好,一定可以把 VSCode 打造成你自己趁手的编辑器。
入坑 VSCode,看这一篇就够了。
虽然我的主开发工具是 WebStorm,但觉得还是有必要好好提一提 VSCode,毕竟微软出品,毕竟将 Sublime 推下了神坛。
即使我平时用 VSCode 并不多,但还有很多 VSCode 的重度用户,用的可能还没有我好。
参照本文的设置步骤,再结合各位自己的一些偏好,一定可以把 VSCode 打造成一个比较趁手的兵器。
主要内容
适合读者
- 喜欢 VSCode 的同学
- 把 VSCode 作为首选开发工具,但仍然不怎么会配置的同学
编辑历史
日期 | 版本说明 |
---|---|
2023/09/02 | V2,由《玩转...》重命名为《入坑...》 |
2023/08/31 | V1 |
💋 Why VSCode
从 Windows 到 Linux 到 Mac,我用过很多编辑器,说 VSCode 是天花板毫不为过,干净的 UI、丰富的插件、便利的操作,它是目前最接近 IDE 的编辑器。
那些年我用过的编辑器
夹带私货,记录一下这么多年我用过或听说过的编辑器。
怎么看一个编辑器值不值得一试?看它的官网,如果官网很老派,就不要试了,如果官网设计感很强,试它(但也不绝对,Vim 就是个反例)。
编辑器 | 收费 | 支持 OS | 推荐指数 | 一句话说明 | |
---|---|---|---|---|---|
Vim | 免费 | Mac / Linux | ★★★★★ | 编辑器之神 | |
Emacs | 免费 | Windows / Mac / Linux | ★★★ | 神之编辑器 | |
Sublime | 免费 | Windows / Mac / Linux | ★★★★☆ | 掀起了编辑器革命,但界面有点单调,这么多年了,连个设置界面都还没做起来 | |
Nova 前 Coda | 付费 | Mac | ★★★★ | 漂亮、强大,主攻前端,非常值得一试,但用来做主开发器有点适应不了 | |
Brackets | 免费 | Windows / Mac | ★★★☆ | 界面漂亮,有很多亮眼功能(Adobe 发起,曾经死了,2023 再看,又活过来了居然) | |
Komodo IDE | 开源免费 | Windows / Mac / Linux | ★★★☆ | 看上去不错 | |
Atom | 免费 | Windows / Mac / Linux | ★ | 已停止维护 | |
LightTable | 免费 | Windows / Mac / Linux | ★ | 已停止维护 | |
BBEdit 前 TextWrangler | 免费 / 付费 | Mac | ★★☆ | 老牌 Mac 编辑器,我浅浅用了一下,没什么深的印象 | |
TextMate | 开源免费 | Mac | ★★★ | 个人觉得比 BBEdit 好用,但已经快维护不动了似乎(上次更新是 2021 年) | |
Kate | 免费 | Windows / Mac / Linux | ★★★☆ | 界面有些类似 VSCode,但整体风格偏向 Linux 多一些,偏硬 | |
UltraEdit | 付费 | Windows / Mac / Linux | ★★★★ | 早期的业界老大 | |
Notepad++ | 付费 | Windows | ★★★☆ | UltraEdit 之后的 Windows 编辑器王者 | |
AkelPad | 免费 | Windows | ★★★☆ | 主打一个轻量绿色,我是在 TotalCmd 里认识的它 | |
EditPlus | 付费 | Windows | ★★★ | 「顶部超多按钮」 | |
PsPad | 免费 | Windows | ★★★ | 有点特色,用过一段时间 | |
HippoEdit | 免费 | Windows | ★★★ | 可能是 WinXP 下算漂亮的编辑器 | |
EditPadPro | 付费 | Windows | ★★★★ | 有 Lite 版本,JGSoft 家的 RegexBuddy 是最强的正则学习分析工具 | |
CotEditor | 开源免费 | Mac | ★★ | 没用过,界面比较老派 | |
Textastic | 付费 | Mac | ★★ | 没用过,在 iPad 上体验据说不错,还可以做 SFTP、SSH 客户端 | |
EditRocket | 免费 | Windows / Mac / Linux | ★★ | 没用过,界面比较老派,看风格有点像 JGSoft | |
Smultron | 付费 | Mac | ★ | 没用过 | |
CudaText | 开源免费 | Windows / Mac / Linux | ★ | 没用过 | |
Nano a.k.a Pico | 免费 | Mac / Linux | ★ | - | 知道有 nano 或 pico 这两个命令就好了 |
我选择编辑器的偏好
- 免费
- 稳定更新
- 界面简洁,配色柔和且支持黑白主题
- 支持渲染空白字符
- 支持 Emmet
- 支持多点编辑
- 插件
- 全面的可自定义性
VSCode 的亮点
⚙️ 常用设置
原生的同步功能出来后,直接让一些插件停止不再需要了。
新装的 VSCode 后第一步该做的事情就是登入账号,左下角 Account 菜单「Turn on Settings Sync...」:
如果你之前同步过,那么等它同步完成,你就有了你习惯的主题、插件、自定义设置、快捷键映射,等等。
如果使用 Github 登录,碰到网速慢而无法操作的问题,可以参考我的 《入门 Mac》的「Github 访问慢,甚至无法访问怎么办?」一节,中使用 host 的方法。
🚦 启动 / 退出
记住全屏
这是 WebStorm 的默认行为,上次退出程序的时候如果是全屏则再次启动的时候就是全屏,这是符合用户习惯的。
但 VSCode 没有将此行为作为默认项,需要设置一下。
- 关键词:「fullscreen」
- 设置:Window: Restore Fullscreen,勾选
settings.json
:"window.restoreFullscreen": true
非预期关闭窗体行为
这是出厂设置中最让我没法接受的默认行为。
我有两个习惯,跟关闭 Tab 有关。
一个常规的习惯,使用快捷键 ⇧⌘W 关闭所有的 Tab;另一个并不是好习惯,就是偶尔会连续敲 ⌘W,即使所有的 Tab 都已关闭,也会无聊地敲几下。
⇧⌘W 看起来是关掉了所有的 Tab,但整个窗体也关掉了;⌘W 会在没有 Tab 的情况下把整个窗体关了。这种情况下,只能用只能用鼠标点开,不能通过键盘 ⌘Tab 出来(因为窗体关了,但进程没关),点开之后,之前打开的项目也不见了,需要重新打开。
VSCode 的这个默认行为令我很抓狂。
但这个问题,并不在常规的设置里,而是快捷键搞的鬼。
首先找出自定义快捷键的界面,两个方法:
- 快捷键(二级跳):⌘K ⌘S
- 命令面板搜「keyboard」,找到「Preferences: Open Keyboard Shortcuts」
接下来就不会被 VSCode 这个关闭窗体的行为所困扰了。如果你会经常需要「Close Window」,也可以设定一个快捷键,在我是不需要的。
💅 UI 设置
图标
VSCode 自带三套图标方案:
- None:目录和文件没有任何图标
- Minimal:有目录图标,文件图片都一个样,毫无辨识度
- Seti(默认):文件类型图标还算有辨识度,可惜目录没有图标
如果不满意,可以装图标插件,我试过比较不错的有:
- Material Icon Theme
- vscode-icons
效果对比:
默认(Seti) | Material Icon Theme | vscode-icons |
---|---|---|
个人选择 Material Icon Theme:
- 文件夹默认图标相对低调
- 文件图标相对多一些,比如
CHANGELOG.md
、READEME.mD
就不纯粹只是 Markdown 的图标 - 图标线条和颜色相对饱满
- 插件耗时 7ms,比 vscode-icons 的 26ms 好
主题
虽然我是白党,但我觉得 VSCode 的主题对黑党来说会好一些,我也常改来改去。主题太多对选择困难症来说真的是一个灾难。
个人对主题的要求:
以下是我试过觉得不错的主题。
白党
主题 | 推荐指数 | 推荐理由 | 截图 |
---|---|---|---|
Light Modern | ★★★★ | 原生 | |
Ayu Light Bordered | ★★★★★ | 个人首选白 少有的偏暖色主题,即使是亮色,眼睛也不累 | |
Firefox Light | ★★★★★ | Firefox 死忠必装,配色相对冷艳,区块清晰 | |
Brackets Light Pro | ★★★☆ | Brackets 曾经是我很喜欢的一款编辑器,其中之一的原因就是它的 UI 设计,但这里侧边条的背景色有些减分 |
黑党
主题 | 推荐指数 | 推荐理由 | 截图 |
---|---|---|---|
Dark+ | ★★★★ | 原生 | |
Atom One Dark Theme | ★★★★★ | 个人首选黑 和「One Dark Pro」很像,比较显著的差别是后者的侧边栏没有前者明显 | |
One Dark Pro | ★★★★ | 和 Atom One Dark 很像 | |
Firefox Dark | ★★★★☆ | Firefox 死忠必备 | |
Andromeda Bordered | ★★★★ | 配色冷艳但舒服 | |
Winter is Coming (Dark Black - No Italics) | ★★★☆ | 《权游》名句:「Winter is Coming」,「X 冷淡」风 | |
Aura Soft Dark | ★★★☆ | 霓虹风 | |
Material Color | ★★☆ | 仅情怀 |
自定义颜色
所有的颜色几乎都可以自定义,需要编辑用户配置的 JSON 文件,字段为 workbench.colorCustomizations
,如:
json
复制代码
{
"workbench.colorCustomizations": {
"activityBar.background": "#00AA00"
}
}
所有可用颜色名称参考见官文 Theme Color。
实在觉得喜欢某个主题,但就是揪着其中的一点觉着不舒服,可以试试折腾一下。
🌲 文件树设置
缩进
默认的文件树缩进层级太小,甚至无法辨别文件与目录的关系,看得眼疼,幸运的是,这个大小是可调的。
- 关键词:「indent」
- 设置:Workbench → Tree: Indent,默认 8,改成 16 或 20
settings.json
:"workbench.tree.indent": 16
效果对比:
默认(8) | 16 |
---|---|
隐藏文件或目录
如果用 VSCode 打开 WebStorm 的项目,就会在文件树下看到 .idea
。我不希望不小心会动到它。对于此类文件就一个字,「眼不见为净」。
- 关键词:「exclude」
- 设置:Files: Exclude,添加需要隐藏的文件或目录
settings.json
:"files.exclude": { ".idea": true }
文件单击打开预览
默认设置如此,无需调整。
Workbench → Tree: Expand Mode,保持默认 singleClick
:
并保持 Workbench → Editor: Enable Preview 为默认的 true
:
🍄 编辑器设置
开启自动保存
从 WebStorm 养成的习惯,废弃了之前用 Eclipse 的时候,时不时地按一下 ⌘S 以消除保存忧虑的习惯。
如果你实在不习惯或不喜欢自动保存,喜欢 ⌘S 带来的踏实感,可以保持默认设置。
- 关键词:「autosave」
- 设置:Files: Auto Save,选择「afterDelay」
settings.json
:"files.autoSave": "afterDelay"
显示空白字符
VSCode 默认只渲染选中文本中的空格,作为「不见空格没安全感」的开发者,需要将其改成永远渲染:
- 关键词:「whitespace」
- 设置:Editor: Render Whitespace,选择「all」
settings.json
:"editor.renderWhitespace": "all"
不要删除换行的自动缩进
由于空格是可见的了,在连续敲两行的时候,会发现上一行的缩进空格会被清除掉,很难受,改。
- 关键词:「trim」
- 设置:Editor: Trim Auto Whitespace,取消勾选
settings.json
:"editor.trimAutoWhitespace": false
取消挠人的中文标点高亮
如果发现有些正常的中文标点被加上了挠人的黄色背景,如下:
最新的默认设置貌似可以不需要修改就可以达到不挠人的效果。
- 关键词:「unicodeHighlight」
- 设置:Editor → Unicode Highlight: Ambiguous Characters,取消勾选
settings.json
:"editor.unicodeHighlight.ambiguousCharacters": false
开启带颜色的缩进线
你应该就不需要 Rainbow Brackets 插件了。
- 关键词:「bracketpairs」
- 设置:Editor → Guides: Bracket Pairs,选择 true
settings.json
:"editor.guides.bracketPairs": true
效果对比:
默认(false) | active | true |
---|---|---|
true
的效果最好,可以看到每条竖线有了颜色,且当前所在的花括号有一条明显的线连起来,你还认为有装「Rainbow Brackets」的必要?
开启内嵌提示
内嵌提示(Inlay Hint)对提升代码阅读效率很重要,强烈建议开启。
- 关键词:「inlayhint」
- 设置:能勾选的都勾选,能选「all」的都选「all」
settings.json
:[language].inlayHints.[what].enabled
效果对比:
默认 | 开启 |
---|---|
⛱️ 代码格式规范设置
VSCode 没有像 WebStorm 那样专门的 Code Style 配置。
你可以设置是否按 Tab 的时候用空格代替,多少个空格。
这块我目前没怎么设置,基本保持预设。
🍃 其他
命令行启动
快捷键 ⇧⌘P 打开命令面板,输入「install」,将 code
命令安装到 PATH,这样,在 Terminal 中临时想改文件就不再局限于 VIM 了(VIM 高手可鄙视此做法)。
取消烦人的声音
可能是最近才出的新功能吧,就是挺烦人的,画波浪线的地方响一声「咕咕」,代码折叠的地方响一声「咣」...不想在写代码的时候被奇奇怪怪的声音打扰。
搜「Audio Cue」可以看到一堆的设置,但没有一个统一的开关(不够友好)。
能关就都关了吧,希望可以出个总开关(虽然有个音量设置可以设为 0)。
🧩 插件推荐
Project Manager
编辑器向 IDE 迈进的第一步。
- URL:marketplace.visualstudio.com/items?itemN…
- 推荐指数:★★★★★
GitLens
装它就是了。
- URL:marketplace.visualstudio.com/items?itemN…
- 推荐指数:★★★★★
ESLint
前端开发,装它就是了。
- URL:marketplace.visualstudio.com/items?itemN…
- 推荐指数:★★★★★
Stylelint
有节操的程序员,各种 Linter 都应该安排上。
- URL:marketplace.visualstudio.com/items?itemN…
- 推荐指数:★★★★☆
Markdownlint
WebStorm 都没有这个插件。
- URL:marketplace.visualstudio.com/items?itemN…
- 推荐指数:★★★★
Beautify
⚠️ 已停止维护。
开箱即用,方便;速度非常快。探查线上代码的时候我会用它先格式化一下。虽然已经停止维护了,我还是希望提一笔,因为真的好用。
- URL:marketplace.visualstudio.com/items?itemN…
- 推荐指数:★★★★★
Prettier
不用 Beautify 的话,可以用 VSCode 自带的「Format Document With...」加「Prettier」,速度比不上 Beautify。
虽然个人不是 Prettier 的粉丝,因为我不喜欢编辑器改我的代码,但偶尔用来格式化部分代码还是可以的。
- URL:marketplace.visualstudio.com/items?itemN…
- 推荐指数:★★★★
Tabnine
AI 这么火,怎能不装它。WebStorm 下也有此插件。
- URL:marketplace.visualstudio.com/items?itemN…
- 推荐指数:★★★★☆
Code Snapshot
写 PPT 需要代码截图,用它。
- URL:marketplace.visualstudio.com/items?itemN…
- 推荐指数:★★★★
Code Spell Checker
不要以为你英语好就可以不用 Spell Checker 了。
- URL:marketplace.visualstudio.com/items?itemN…
- 推荐指数:★★★★★
Better Comments
人类友好的注释。
- URL:marketplace.visualstudio.com/items?itemN…
- 推荐指数:★★★★
String Manipulation
好多类似的插件,还有 Text Manipulator、change-case 等。
change-case 有个小小的 BUG(或者是 Feature),当没有选中的文本会弹窗报错。
- URL:marketplace.visualstudio.com/items?itemN…
- 推荐指数:★★★☆
Increment Selection
如果你喜欢写 Markdown 的时候,为每一行增加一个序号,那么这个插件能帮你省掉很多麻烦,多光标搭配快捷键 ⌥⌘I 瞬间搞定。
- URL:marketplace.visualstudio.com/items?itemN…
- 推荐指数:★★★☆
⌨️ 快捷键
官方文档:Key Bindings for Visual Studio Code
如何自定义
虽然之前已经有提到,但这里还是在啰嗦一遍。你可以通过以下两个方法唤出 VSCode 快捷键自定义界面:
- 快捷键(二级跳):⌘K ⌘S
- 命令面板搜「keyboard」,找到「Preferences: Open Keyboard Shortcuts」
💡 快捷键小贴士(⌃⌥⇧⌘):
⌘ Command:最常用的快捷键组成,可配合任何键以及鼠标点击合并;很多 Windows 下以 ⌃ 作为快捷键主键的,在 Mac 下用 ⌘
⇧ Shift:一般不会单独在快捷键组合中出现,它的作用主要由两个:「反向」和「圈选」(记住这点非常重要)
- 反向:改变行为的方向,比如 ⇥ 的行为是「下一个」,而 ⇧⇥ 是「上一个」
- 圈选:产生圈效果,比如普通的点击只是切换了焦点,但配上 ⇧ 再点,则会圈选前后点击包含的所有元素,再比如编辑文本的时候按方向键只是改变了光标,配上 ⇧ 则会选中光标经过的地方的文本
⌥ Option:当 ⌘ 组合被用完后,可以用它作为主键
⌃ Control:和 ⌘、⌥ 差不多,唯一的区别是 ⌃Click 被系统默认用作打开右键菜单的方式
带 🌈 标记表示需要自定义。
高频快捷键 - 快速编辑
快捷键 | 预设值 | 功能 | Command | 说明 |
---|---|---|---|---|
⇧⇥ | ⇧⇥ | 取消缩进(反向 Tab) | outdent |
|
🌈 ⌘D | ⌘⇧K | 删除光标所在行(所选行) | editor.action.deleteLines |
|
⌥↑ | ⌥↑ | 所选行/光标所在行上移 | editor.action.moveLinesUpAction |
没有 WebStorm 智能 |
⌥↓ | ⌥↓ | 所选行/光标所在行下移 | editor.action.moveLinesDownAction |
没有 WebStorm 智能 |
⌘/ | ⌘/ | 单行注释 | editor.action.toggleLineComment |
|
🌈 ⇧⌘/ | ⌥⇧A | 多行注释 | editor.action.blockComment |
需要改系统快捷键,对应系统快捷键是呼出帮助 |
⌥⇧F | ⌥⇧F | 格式化代码 | editor.action.formatDocument |
💥 和 WebStorm 不一样 |
🌈 ⇧⌘J | ⌃J | 合并所选行 | editor.action.joinLines |
|
🌈 ⇧⌘X | - | 切换成大写 | editor.action.transformToUppercase |
没有 WebStorm 好用,可以一个快捷键在大小写间来回切换 |
🌈 ⌥⇧⌘X | - | 切换成小写 | editor.action.transformToLowercase |
前面的快捷键上附加一个 ⌥ |
🌈 ⌥⌘↑ | ⌥⇧↑ | 向上复制一行 | editor.action.copyLinesUpAction |
|
🌈 ⌥⌘↓ | ⌥⇧↓ | 向上复制一行 | editor.action.copyLinesDownAction |
|
🌈 ⌘⌫ | ⌥⌫ | 从光标处删除到整个词首 | deleteWordLeft |
VSCode ⌘⌫ 默认为到行首,先解除之 |
🌈 ⌘⌦ | ⌥⌦ | 从光标处删除到整个词尾 | deleteWordRight |
|
🌈 ⌥⌫ | ⌃⌥⌫ | 从光标处删除到分词的词首 | deleteWordPartLeft |
|
🌈 ⌥⌦ | ⌃⌥⌦ | 从光标处删除到分词的词尾 | deleteWordPartRight |
高频快捷键 - 移动光标
快捷键 | 预设值 | 功能 | Command | 说明 |
---|---|---|---|---|
⌘↑ | ⌘↑ | 移动光标至文首 | editor.action.goToTopHover |
|
⌘↓ | ⌘↓ | 移动光标至文尾 | editor.action.goToBottomHover |
|
⌘← | ⌘← | 移动光标至行首 | cursorHome |
忽略行首空白 |
⌘→ | ⌘→ | 移动光标至行尾 | cursorEnd |
但是不会忽略行尾空白 |
⌥← | ⌥← | 移动光标到上一个词 | cursorWordLeft |
|
⌥→ | ⌥→ | 移动光标到下一个词 | cursorWordRight |
|
⌥⇧ | ⌥⇧ | 移动光标到对应的括号处 | editor.action.jumpToBracket |
高频快捷键 - 选择文本
快捷键 | 预设值 | 功能 | Command | 说明 |
---|---|---|---|---|
⇧⌘↑ | ⇧⌘↑ | 移动光标至文首,选中经过的文本 | cursorTopSelect |
|
⇧⌘↓ | ⇧⌘↓ | 移动光标至文末,选中经过的文本 | cursorBottomSelect |
|
⇧⌘← | ⇧⌘← | 移动光标至行首,选中经过的文本 | cursorHomeSelect |
|
⇧⌘→ | ⇧⌘→ | 移动光标至行尾,选中经过的文本 | cursorEndSelect |
|
⌥⇧← | ⌥⇧← | 移动光标到上一个词,选中经过的文本 | cursorWordLeftSelect |
|
⌥⇧→ | ⌥⇧→ | 移动光标到下一个词,选中经过的文本 | cursorWordRightSelect |
高频快捷键 - 快速导航
快捷键 | 预设值 | 功能 | Command | 说明 |
---|---|---|---|---|
⌘P | ⌘P | 根据名字搜索文件等资源 | workbench.action.quickOpen |
💥 和 WebStorm 设的不一样 |
⌘T | ⌘T | 命令面板查找 Symbol 模式 | workbench.action.showAllSymbols |
和 WebStorm 的查找类型有点类似 |
⌘Click | ⌘Click | 跳到定义 | - |
高频快捷键 - 查找替换
快捷键 | 预设值 | 功能 | Command | 说明 |
---|---|---|---|---|
⌘F | ⌘F | 文件内搜索 | actions.find |
|
⌥⌘F | ⌥⌘F | 文件内替换 | editor.action.startFindReplaceAction |
💥 和 WebStorm 设的不一样 |
⌘G | ⌘G | 查找并将光标移动到下一个搜索命中文本 | editor.action.nextMatchFindAction |
|
⇧⌘G | ⇧⌘G | 查找并将光标移动到上一个搜索命中文本 | editor.action.previousMatchFindAction |
|
🌈 ⌃H | ⇧⌘F | 全局内容搜素 | workbench.action.findInFiles |
|
🌈 ⌃⇧H | ⇧⌘H | 全局内容替换 | workbench.action.replaceInFiles |
|
🌈 ⌥⌘G | ⌥⇧F12 | 查找引用 | references-view.findReferences |
💥 不支持文件 |
高频快捷键 - 多点编辑
在创建多个光标后,结合箭头、移动光标快捷键等,绝对是炫技提效必备。
快捷键 | 预设值 | 功能 | Command | 说明 |
---|---|---|---|---|
⌥Click | ⌥Click | 增加光标 | 无 | 基础 |
🌈 ⌃⌘G | ⌃⌘L | 选中所有选中的文本,或光标所在的词 | editor.action.selectHighlights |
💥 和 WebStorm 不一样的是,VSCode 选中后所有的光标在词尾 |
🌈 ⇧⌘L | ⌥⇧I | 所有选中行末添加光标 | editor.action.insertCursorAtEndOfEachLineSelected |
|
🌈 ⌥⇧↑ | ⌥⌘↑ | 向上复制光标 | editor.action.insertCursorAbove |
|
🌈 ⌥⇧↓ | ⌥⌘↓ | 向下复制光标 | editor.action.insertCursorBelow |
|
⌥⇧鼠标拖拽 | ⌥⇧鼠标拖拽 | 纵向拖出一条光标 | - | 类似连续多次向上或向下复制光标的效果,但附加带选中效果 |
高频快捷键 - 通用
快捷键 | 预设值 | 功能 | Command | 说明 |
---|---|---|---|---|
🌈 ⌘1 | ⌘. | 展示快速修复菜单 | editor.action.quickFix |
有病没病都可以按 |
⌃` | ⌃` | 展示/隐藏 Terminal | workbench.action.terminal.toggleTerminal |
|
⌘ | ⌘ | 编辑器向右切屏 | workbench.action.splitEditor |
|
🌈 ⌥⌘ | ⌘K ⌘ | 编辑器向下切屏 | workbench.action.splitEditorDown |
|
⏎ | ⏎ | 重命名文件 | renameFile |
💥 和 WebStorm 不一样,保持系统的原汁原味 |
⌥Z | ⌥Z | 代码软折行 | editor.action.toggleWordWrap |
高频快捷键 - 特有功能
快捷键 | 预设值 | 功能 | Command | 说明 |
---|---|---|---|---|
⇧⌘P | ⇧⌘P | 展示命令面板 | workbench.action.showCommands |
Sublime 最大的创举 |
⌘K ⌘S | ⌘K ⌘S | 打开快捷键偏好设置 | workbench.action.openGlobalKeybindings |
|
⌘B | ⌘B | 显示 / 隐藏侧边栏 | workbench.action.toggleSidebarVisibility |
🕋 命令面板
最后再略带一下命令面板,日常使用中,最常用的快捷键之一就是 ⇧⌘P 打开命令面板了。
命令面板(Command Pallete),Sublime 对编辑器的重大贡献之一。命令面板的重要性可以说是非常重要(无法找到更好的词汇)。
用法太多,不详细展开,可以输入 ?
查看:
📌 有用链接
- VSCode 官网
- VSCode 插件
- VSCode Gold Series 很多经验和技巧
- VSCode Themes 你可以在这里搜索和预览主题,解决你的主题荒
- VSCode 极客教程
🙋 FAQ
❓ 为什么不用默认的 ⌘⌫ 删除整行,而是 ⌘D 呢?
前者虽然删除了行的内容,但没有删除这一行,需要再敲一个 ⌫ 才能彻底让这一行消失,后者一次搞定。
❓ 如何切换偏好/快捷键的 JSON 编辑模式?
对应的界面右上角有个图标,点它就会切换到 JSON 格式,可以直接编辑:
❓ 如何解决 ESLint 无提示的问题?
最新版已经没有问题了。
ESlint 插件装了,项目下的依赖也装了,但编辑器上就是没有波浪线,这种问题通常出现在 TS 项目中。
首先确认一下状态栏下 ESLint 没有任何报错(没有警告 Icon)。
没问题的话,直接编辑偏好 JSON:
json
复制代码
{
...,
"eslint.alwaysShowStatus": true,
"eslint.validate": [ "typescript", "typescriptreact" ]
}
❓ 临时文件如何获得正确的语法高亮?
我经常用 VSCode 做一些临时的编辑工作,会 ⌘N 新建一个文件,这个文件没有类型,因此没有语法高亮。
lang
,选择「Change Language Mode」命令🪭 写在最末
VSCode 可以说是最像 IDE 的编辑器了,下载的安装包其实是一个压缩包 200M,解压后 500M。 装了各种插件后,发现它的体积已经比 WebStorm 的 1.6G 要大了,居然有 1.9G。
虽然 VSCode 并不是我的主开发工具,但它一定是我最喜欢的编辑器。
VSCode 功能绝对强大,本文旨在带你入坑,更多的细节还待各位在使用的过程中慢慢发现。
作者:XBoxYan
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。