VSCode 不完全配置，让你开发更加舒适记录一些 VSCode 讲的较少的配置，让你的 VSCode 更加适应你，使用

本文是我的第一篇文章，写下这些的时候又激动又是忐忑，毕竟我一直觉得我就是个小菜鸡，也不敢写什么文章，各位大佬们，请轻喷。

工欲善其事，必先利其器。对于前端开发来说，大部分人用的最多的应该就是 VSCode 了吧，想来这其中的一部分人应该跟我一样，最多也就是加一些插件，调一下主题，改一下大小之后就直接使用，其他的也不会有太多的配置与了解，最多只是知道一些常用的快捷键与命令之类的。

最近刚好有机会，学习了一番，就想着把记录的笔记分享出来，也就有了这篇文章。各位大佬们若是发现错误的地方可以直接指出，有问题也可以直接问，当然，若是能点个赞就更好了。各位大佬们在看的时候，可以自己动手尝试，自己试过了才能记住，纸上得来终觉浅，缘知此事需躬行。

下面直接进入正文（下文中的快捷键，Cmd 是 Mac 电脑中的 command 键，Windows 中直接替换为 Ctrl 键即可）。

插件

语言：插件市场搜索 'Chinese' 安装第一个，安装完成后按 Ctrl + Shift + P，输入 'display'，选择 'zh-cn' 重启即可
主题 theme：'oneDark pro'，'Shades of Purple' 等等，用过的不多，更多的可以直接在插件市场输入 theme 搜索查看
keymap：熟悉其他开发工具的可以在插件市场输入 'keymaps' 搜索其他 IDE 的快捷键
文件操作：'File Utils' + 'advanced-new-file' 这两个插件可以直接抛弃鼠标，使用键盘进行文件操作，提高逼格必备
颜色：'Color Highlight'，并在设置中搜索 Color-highlight: Match Words /"color-highlight.matchWords" 设置为 true 即可
markdown：如果你喜欢在 VSCode 中写 markdown，可以安装以下插件 'markdownlint'、'Table Formatter'、'Markdown Image Size'、'Markdown Checkboxes'、'Markdown All in One'、'Word Count' 等，让你写 markdown 更加舒适
拼写检查：'Code Spell Checker' 喜不喜欢用这个就看自己了，反正我不喜欢
生成 log：'Turbo Console Log'，非常喜欢的工具，依照插件介绍，可以直接生成选中值的 console.log 信息，非常好用
翻译：'x-translator' 如果你跟我一样英语差劲，可以用上这个，快速翻译
正则：'any-rule' 不会正则的可以看一下
设置图标：Cmd + Shift + P -> 'file icon theme' 默认无图标，推荐插件市场中安装 'VSCode-icons' 插件，依据前面的步骤设置 icon 图标即可
注释：'koroFileHeader'，依照插件介绍使用，生成完整的注释信息
更多的插件可以参考其他文章，本文只是列举一些其他文章介绍相对较少的插件

快捷键

当快捷键不是你想要或者有出入时，可以打开键盘设置（首选项 -> 键盘快捷方式或 Cmd + K Cmd + S），搜索相应功能或绑定键修改即可
Cmd + Shift + P 打开命令窗口，显示所有命令
在 shell 中安装 shell 命令方法，打开命令窗口，输入 'shell' 选择 '安装 code 命令'
Cmd + P 此时可以搜索文件并直接打开此文件，代替鼠标打开文件；若此时输入一个 '?'，会显示出所有可用的命令
输入 # 会跳转至选择的工作区的符号 - 输入 > 进入 Cmd + Shift + P 中的命令窗口 - 输入 '@' 会跳转编辑区的符号快捷键 Cmd + Shift + O - 输入 'view xxx' 会直接跳转至相应的界面例如：'view search' 会直接打开搜索界面
Cmd + Shift + E 打开资源管理器
Cmd + Shift + F 打开全局搜索
Cmd + Shift + X 进入拓展
开关禅模式：Cmd + Shift + P 搜索 'zen mode'；
开关编辑区居中：搜索 'centered layout'
打开控制台 Cmd + J
新建一个选项卡 Cmd + N （个人不喜欢，我觉得 Chrome 的 Cmd + T 更舒服，我就将 T 和 N 快捷方式掉了个个）
重新打开关闭的选项卡 Cmd + Shift + T
Alt + Shift + F 格式化文档
Cmd + Z \ Cmd + Shift + Z 撤销\恢复
Ctrl + R 选择打开文件夹，会关闭当前窗口并打卡指定文件夹窗口，按住 Cmd 键会直接在新的窗口中打开
Cmd + , 打开设置
Cmd + / 注释选中的所有行
Cmd + B 切换侧边栏可见性
Cmd + J 打开终端
F8 快速跳转到下一个问题处
自定义快捷键：可以从首选项中选择键盘快捷方式进入，也可以直接 Cmd + K Cmd + S 进入，选择想要更改的项，输入要绑定的快捷键即可。例如选择 'collapse folders in explorer' 绑定快捷键 Cmd + K Cmd + E 使用快捷键可以直接折叠所有的文件夹

工作区设置

字体设置
- Editor: Font Size / "editor.fontSize" 设置字体大小
- "editor.lineHeight" 行高（推荐让行高是字体大小的 1.45 倍）
- "editor.fontWeight" 字重
- Editor: Letter Spacing / "editor.letterSpacing" 字间距
- Workbench: Font Aliasing: "auto" / "workbench.fontAliasing": "auto" // 在外接显示器时会显示更好
- 安装 Fira Code 或者 source-code-pro，setting.json 中可以设置，即可使用 Fira Code 字体，设置开启连体
```
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true
```
UI 设置
- 光标设置
  - Editor: Cursor Blinking / "editor.cursorBlinking" // 光标样式，可设置闪烁样式或直接固定不闪烁
  - Editor: Cursor Width / "editor.cursorWidth" // 当 Editor: Cursor Style 设置为 line 时，控制光标的宽度
  - Editor: Cursor Style / "editor.cursorStyle" // 控制光标样式
- Editor › Minimap: Enabled / "editor.minimap.enabled" // 控制是否显示小地图
- Explorer › Open Editors: Visible / "explorer.openEditors.visible" // “打开编辑器”窗格中显示的编辑器的数量。将其设置为 0 将隐藏“打开编辑器”窗格
- Workbench: Startup Editor / "workbench.startupEditor": "newUntitledFile" // 在没有从上一会话中恢复出信息的情况下，控制启动时显示的编辑器，可以设置成打开显示无标题文件
- Explorer: Confirm Delete / "explorer.confirmDelete" 删除时是否进行确认，不喜欢删除前确认的可以直接关掉
- Explorer: Confirm Drag And Drop / "explorer.confirmDragAndDrop" // 移动时是否需要确认，不喜欢移动前确认的可以直接关掉
- Workbench › Editor: Enable Preview / "workbench.editor.enablePreview" // 控制打开的编辑器是否显示为预览编辑器。预览编辑器不会保持打开状态，在将其显式设置为保持打开(例如通过双击或编辑)前将会重复使用，其文件名显示样式为斜体。
- Editor: Snippet Suggestions / "editor.snippetSuggestions" // 控制代码片段是否与其他建议一起显示及其排列的位置。
- Editor: Quick Suggestions Delay / "editor.quickSuggestionsDelay" // 控制显示快速建议前的等待时间 (毫秒) 默认 10。
- Editor: Multi Cursor Modifier / "editor.multiCursorModifier" // 在通过鼠标添加多个光标时使用的修改键。“转到定义”和“打开链接”功能所需的鼠标动作将会相应调整，不与多光标修改键冲突。默认 Alt，可以修改为 CtrlCmd
空白区域设置
- Editor: Render Whitespace / "editor.renderWhitespace" // 控制编辑器在空白字符上显示符号的方式。
- Files: Trim Trailing Whitespace / "files.trimTrailingWhitespace" // 启用后，将在保存文件时删除行尾的空格。
- Files: Trim Final Newlines / "files.trimFinalNewlines" // 启用后，保存文件时将删除在最终新行后的所有新行。
- Diff Editor: Ignore Trim Whitespace / "diffEditor.ignoreTrimWhitespace" // 启用后，差异编辑器将忽略前导空格或尾随空格中的更改。
代码编辑快捷方式
- ↑↓←→ 可快速移动光标
- 按住 Shift 加方向键，会选中光标经过的项；Cmd + Shift + ↑ 可以选中光标处到文件最上方；Cmd + Shift + ↓ 可以选中光标处到文件最下方；Cmd + Shift + ← 可以选中光标处到本行最前方；Cmd + Shift + → 可以选中光标处到本行最后方；不按 Shift 光标只会跳到相应位置
- 按住 Alt + Shift 键，同时鼠标按住左键拖动，会同时从光标开始处，全部选中到鼠标终止位置，并且选中的这些行会每一行都有一个光标
- 按住 Cmd + Alt 键同时按 ↑ / ↓ 键，会在上/下行出现一个光标
- 按住 Alt 键鼠标点击，会进行多选；按住 Alt 加方向键，光标会按字母间的间隔为终点进行一次移动，若同时按住 Shift 键，会选中光标所经过的字母
- 删除一整行，可以使用 Cmd + Shift + K
- Alt + Shift + ↑ / ↓ ，可以直接复制一行光标所在行
- Alt + ↑ / ↓ 会向上移动或向下移动光标所在行
- Cmd + D 选择下一个相似词，如光标当前没有选中词，则第一次按会选中光标所在位置的单词；Cmd + Shift + L 选中全部匹配项；若不是此快捷键，可以在键盘快捷方式搜索查找匹配项
- Cmd + U 光标撤销
- 格式化代码：设置中搜索 'format on save/paste' 设置是否在保存/粘贴时自动格式化，推荐开启保存自动格式化；推荐安装插件 prettier ，并设置 prettier 为默认格式化方式，设置搜索 Editor: Default Formatter 选择 prettier 即可
- Files: Insert Final Newline / "files.insertFinalNewline" 设置是否在保存时文件末尾插上一个新行
- 如果你有长字符串，代码编辑器会开启左右滚动，如果你不想要左右滚动，可以开启 Diff Editor: Word Wrap / "diffEditor.wordWrap" // 将在视区宽度处换行
- Debug: Tool Bar Location / "debug.toolBarLocation" // 控制调试工具栏的位置。可在所有视图中“浮动”、在调试视图中“停靠”，也可“隐藏”
- Window: Restore Fullscreen / "window.restoreFullscreen" // 若窗口在处于全屏模式时退出，控制其在恢复时是否还原到全屏模式。
- Workbench › Editor: Tab Close Button / "workbench.editor.tabCloseButton" // 控制编辑器的选项卡关闭按钮的位置，或者在设置为 "off" 时禁用它们。当 "#workbench.editor.showTabs#" 处于禁用状态时，将忽略此值。若你习惯以 Cmd + w 关闭选项卡，那可以设置为 off，将节省一些空间
- Workbench › Panel: Default Location / "workbench.panel.defaultLocation" // 控制新工作区中面板(终端、调试控制台、输出、问题)的默认位置。它可以显示在编辑器区域的底部、右侧或左侧。重启 VSCode 即可生效
- Editor: Rulers / "editor.rulers": [80, 100, 120] // 在一定数量的等宽字符后显示垂直标尺。输入多个值，显示多个标尺。若数组为空，则不绘制标尺。'[80, 100, 120]' 只是给出的示例，没有必要参考
- Files: Default Language / Files: Default Language // 分配给新文件的默认语言标识符。如果配置为 "${activeEditorLanguage}"，将使用当前活动文本编辑器(如果有)的语言标识符。新建的选项卡，默认是纯文本，我们可以设置默认的语言格式，语言类型在编辑器的右下角区域，点击即可选择你想要的语言格式（若你觉得每次都要鼠标点击太麻烦，可以设置一下键盘快捷方式，搜索 '更改语言格式' 即可绑定你想要的快捷键）
- Breadcrumbs: Enabled / "breadcrumbs.enabled" // 启用/禁用导航路径。是否打开面包屑

emmet

添加一项设置，当输入某项时如此时光标移动，再次移动回来时，就会没有提示，此时即使按 Tab 键也不会有反应，只会出现一个制表符，打开此设置，光标回来之后按 Tab 键就会展开 emmet 语法
```
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
  "javascript": "javascriptreact"
}
```
空白 html 文件中打一个 '!' 按 Tab 键即可直接创建 html 的基本结构
基础：在空白位置输入 'div' 'p' 'span' 之类的标签，按 Tab 键即可直接生成相应标签 div === <div></div>

'>' 用法：'>'代表下一级

div>span>em ===
<div>
    <span><em></em></span>
</div>

'+' 用法：'+'代表同级

div+div ===
<div></div>
<div></div>

div+div>P ===
<div></div>
<div><p></p></div>

header>ul>li+footer ===
<header>
    <ul>
        <li></li>
        <footer></footer>
    </ul>
</header>

(header>ul>li)+footer ===
<header>
    <ul>
        <li></li>
    </ul>
</header>
<footer></footer>

{Text} 用法：在相应位置添加上输入
```
div{text} ===
<div>text</div>
```

'*' 用法：重复出现次数

ul>li*5{Link} ===
<ul>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
</ul>

'.' / '#' 用法：添加类名/id 名(若直接输入 .main/#main 则会直接创建一个 div 元素带上类或 id)
```
div#main ===
<div id="main"></div>
div.main ===
<div class="main"></div>
```

'$' 用法：排列数字

div.item${test}*5 ===
<div class="item1">test</div>
<div class="item2">test</div>
<div class="item3">test</div>
<div class="item4">test</div>
<div class="item5">test</div>

div.item$${test}*5 ===
<div class="item01">test</div>
<div class="item02">test</div>
<div class="item03">test</div>
<div class="item04">test</div>
<div class="item05">test</div>

更多 emmet 片段，可以参考 emmet 语法表

用户代码片段

Code snippets 用户代码片段：
- 新建首选项 -> 用户片段 -> 新建你想创建的语言的代码片段或全局
- ```
"Log to console with var name": {
      "prefix": "log",
      "description": "Log to console with var name",
      "body": [
          "console.log('${1:var}', ${1:var})"
    ]
}
```
- 用户代码片段部分介绍较少，仅仅只是抛砖引玉，各位大佬可以创建更多自己顺手的片段