入坑 VSCode,看这一篇就够了

2023年 10月 6日 136.2k 0

🎼 前言

跟着本文章节,一步一步操作(设置、插件、快捷键等),一定能把 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 - 知道有 nanopico 这两个命令就好了

我选择编辑器的偏好

  • 免费
  • 稳定更新
  • 界面简洁,配色柔和且支持黑白主题
  • 支持渲染空白字符
  • 支持 Emmet
  • 支持多点编辑
  • 插件
  • 全面的可自定义性

VSCode 的亮点

  • 开源免费,处于积极维护的状态,基于 Monaco
  • 初始界面简介友好,不像 Sublime 那样,初始态就一个框,也不像某些编辑器那样顶部有超多的按钮
  • 很多优秀的从 Sublime 学习来的特性(命令面板、MiniMap、多点编辑)
  • 丰富的配置项,既有 GUI 设置界面,又可以直接文本编辑
  • 强大的编辑器
  • 海量的插件
  • ⚙️ 常用设置

    原生的同步功能出来后,直接让一些插件停止不再需要了。

    新装的 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」
  • 取消 ⇧⌘W 的默认行为「Close Window」
  • 取消 ⌘W 在条件允许的时候「Close Window」
  • 为「View: Close All Editors」添加快捷键 ⇧⌘W
  • 接下来就不会被 VSCode 这个关闭窗体的行为所困扰了。如果你会经常需要「Close Window」,也可以设定一个快捷键,在我是不需要的。

    💅 UI 设置

    图标

    VSCode 自带三套图标方案:

    • None:目录和文件没有任何图标
    • Minimal:有目录图标,文件图片都一个样,毫无辨识度
    • Seti(默认):文件类型图标还算有辨识度,可惜目录没有图标

    如果不满意,可以装图标插件,我试过比较不错的有:

    • Material Icon Theme
    • vscode-icons

    效果对比:

    默认(Seti) Material Icon Theme vscode-icons

    个人选择 Material Icon Theme:

    • 文件夹默认图标相对低调
    • 文件图标相对多一些,比如 CHANGELOG.mdREADEME.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 新建一个文件,这个文件没有类型,因此没有语法高亮。

  • ⇧⌘P 打开命令面板
  • 输入 lang,选择「Change Language Mode」命令
  • 让 VSCode 自行判断或者选择某个语言
  • 🪭 写在最末

    VSCode 可以说是最像 IDE 的编辑器了,下载的安装包其实是一个压缩包 200M,解压后 500M。 装了各种插件后,发现它的体积已经比 WebStorm 的 1.6G 要大了,居然有 1.9G。

    虽然 VSCode 并不是我的主开发工具,但它一定是我最喜欢的编辑器。

    VSCode 功能绝对强大,本文旨在带你入坑,更多的细节还待各位在使用的过程中慢慢发现。

    作者:XBoxYan
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    相关文章

    服务器端口转发,带你了解服务器端口转发
    服务器开放端口,服务器开放端口的步骤
    产品推荐:7月受欢迎AI容器镜像来了,有Qwen系列大模型镜像
    如何使用 WinGet 下载 Microsoft Store 应用
    百度搜索:蓝易云 – 熟悉ubuntu apt-get命令详解
    百度搜索:蓝易云 – 域名解析成功但ping不通解决方案

    发布评论