VS Code配置

zxl19 2020-06-03

VS Code
Note

简单记录一下目前我的VS Code配置，主要包括编辑器配置和扩展配置。

编辑器配置

Editor: Font Family：设置字体，默认使用等宽字体，对于代码中空格的宽度和命令行中的命令显示更加美观：
```
 'Droid Sans Mono', 'monospace', monospace
```
Editor: Word Wrap：设置超过窗口宽度后是否自动换行，默认关闭，对于Markdown默认开启，在设置中开启可以避免显示范围遮挡代码；
Diff Editor: Ignore Trim Whitespace：设置在显示代码差异时是否忽略头部和尾部的空白字符，默认开启，在设置中关闭可以突出显示代码中的空白字符差异；
Window: Title Bar Style，设置窗口标题栏的外观，选择custom可以避免顶部标题栏产生白边；
Explorer->右键->勾选Open Editors；
双击侧边栏和编辑区边界可以自动调整宽度；

扩展配置

Occam's razor: entities should not be multiplied beyond necessity.
奥卡姆剃刀原理：如无必要，勿增实体。

扩展配置（按照字母顺序排序），如果在VS Code中安装失败，可以在扩展商店中下载.vsix格式的安装包手动安装。

:emojisense:

在输入emoji时自动补全，emoji格式为:emoji:，输入::触发提示。

示例：

:smile:
:dog:

AsciiDoc

AsciiDoc语言扩展。

Better Comments

根据注释类型生成不同样式的注释，类似的扩展还有Colorful Comments。

示例：

// ! Alerts             警告类语句（红色）
// ? Queries            疑问类语句（蓝色）
// TODO TODOs           待办类语句（橙色）
// * Highlights         高亮类语句（绿色）
// // Commented out     删除线语句（深灰色）

注：在C/C++代码中要谨慎使用高亮类语句。

Bookmarks

选定行生成书签，可以在书签之间进行跳转。

鼠标右键菜单内操作。

Bracket Pair Colorizer 2

括号自动配对着色，第二版在匹配速度上有了提升。

2021年12月：VS Code已包含括号对着色功能，需手动在设置中开启，此扩展已停止维护。

C/C++

C/C++语言扩展。

可以在扩展中指定clang-format可执行文件的路径，如果未指定，则会优先使用环境变量中clang-format可执行文件的路径；如果未在环境变量中找到，则会使用扩展自带的clang-format可执行文件。

ChatGPT-EasyCode

使用ChatGPT，类似的扩展还有Super ChatGPT。

Chinese (Simplified) Language Pack for Visual Studio Code

VS Code中文汉化。

clangd

C/C++语言自动补全、跳转、函数提示等功能。

按照提示关闭C/C++扩展自带的自动补全；
按照提示安装或更新clangd；
生成compile_commands.json文件，供扩展解析；
- 在CMakeLists.txt文件中指定：
```
  set(CMAKE_EXPORT_COMPILE_COMMANDS ON)
```
- 在编译时指定：
```
  cmake .. -DCMAKE_EXPORT_COMPILE_COMMANDS=1
```
- 建议将生成的compile_commands.json文件放到工程顶层目录或者build文件夹中；

CMake

CMake语法支持。

CMake Tools

CMake扩展。

cmake-format

格式化CMakeLists.txt文件。

安装cmakelang格式化工具：
```
 python3 -m pip install cmakelang
```
在CMakeLists.txt文件中右键->Format Document；

Code Runner

运行各种语言的代码。

Code Spell Checker

拼写检查。

CodeGeeX: AI Code AutoComplete, Chat, Auto Comment

基于大模型的智能编程助手，提供代码自动生成和补全、代码翻译、自动添加注释、智能问答等功能，类似的扩展还有GitHub Copilot、GitHub Copilot Chat、Tabnine AI Autocomplete、Cody AI、Kite。

2022年11月：Kite已停止维护。

Compare Folders

按照内容比较文件夹，并排显示文件夹中的文件内容差异。可以用于代替Beyond Compare和CC Compare的功能。

Crypto Tools

提供一系列编码/解码、加密/解密工具，例如base32、SHA512等。目前base64加密中文存在bug，会出现乱码。

鼠标右键菜单内操作。

Doxygen Documentation Generator

按照Doxygen格式生成C++文件注释和函数注释。

在设置中设置作者姓名和作者电子邮箱；
输入/**后回车自动生成注释；

Draw.io Integration

集成Draw.io功能，绘制流程图。

在设置中将主题设置为Kennedy可以获得更好的显示效果。

Foam

知识库管理扩展，提供基于Markdown语法的双向链接。可以用于代替Obsidian的功能。

Ctrl+Shift+P，输入Foam: Show Graph显示知识图谱；
双向链接语法说明：
- 双向链接格式为[[wikilink]]，输入[[触发提示；
- 扩展自动生成的wikilink默认为文件名，可以在设置中更改；
- 使用[[wikilink#section]]链接到具体的章节；
- 使用[[wikilink|alias]]设置预览时显示的别名；

gitattributes

从gitattributes/gitattributes仓库中拉取.gitattributes文件模板。

Ctrl+Shift+P，输入Add gitattributes；
选择语言，在工程根目录下创建.gitattributes文件；

GitHub Pull Requests and Issues

为VS Code提供GitHub支持。

gitignore

从github/gitignore仓库中拉取.gitignore文件模板。

Ctrl+Shift+P，输入Add gitignore；
选择语言，在工程根目录下创建.gitignore文件；

GitLens——Git supercharged

增强VS Code内置Git的功能，例如对比修改、查看历史记录和显示代码作者，类似的扩展还有Git History和Git Graph。

Image Preview

代码中引用图片预览。

indent-rainbow

用不同颜色标识缩进。

IntelliCode

为Python、TypeScript/JavaScript、Java语言提供基于上下文和机器学习的自动补全，安装IntelliCode API Usage Examples扩展可以查看GitHub中的用法示例并提高使用体验。

koroFileHeader

生成文件头部注释和函数注释，类似的扩展还有vscode-fileheader、autoDocstring。

详细配置选项说明参考Wiki。

文件头部注释：

配置fileheader.configObj关闭自动添加文件头部注释，示例：
```
  "fileheader.customMade": {
      "autoAdd": false
  }
```

配置fileheader.customMade指定文件头部注释格式，示例：

  "fileheader.customMade": {
      "Author": "git config user.name && git config user.email",
      "Date": "Do not edit",
      "Description": "",
      "custom_string_obkoro1_copyright": "Copyright (c) ${now_year} by git config user.name && git config user.email, All Rights Reserved."
  }

快捷键：Ctrl+Super+T；

函数注释：

配置fileheader.cursorMode指定函数注释格式，示例：

  "fileheader.cursorMode": {
      "description": "",
      "param": "",
      "return": ""
  }

快捷键：Ctrl+Super+I；

注释图案：
- 选择注释图案：Ctrl+Shift+P，输入codeDesign进行选择；
- 快捷键：Ctrl+Super+J；

LaTeX Workshop

LaTeX语言扩展，提供LaTeX排版所需的核心功能，安装LaTeX Utilities扩展可以提高使用体验。

提供代码格式化功能，类似的扩展还有LaTeX、latex-formatter；

配置latex-workshop.latex.tools、latex-workshop.latex.recipes后可以编译文档并预览：

latex-workshop.latex.tools指定了单条编译命令的参数，示例：

  {
      "name": "xelatexmk",
      "command": "latexmk",
      "args": [
          "-synctex=1",
          "-interaction=nonstopmode",
          "-file-line-error",
          "-xelatex",
          "-outdir=%OUTDIR%",
          "%DOC%"
      ],
      "env": {}
  }

latex-workshop.latex.recipes指定了多条编译命令的执行顺序，示例：

  {
      "name": "xelatex ➞ biber ➞ xelatex × 2",
      "tools": [
          "xelatexmk",
          "biber",
          "xelatexmk",
          "xelatexmk"
      ]
  }

LeetCode

算法刷题扩展，类似的扩展还有LeetCode with labuladong、牛客、Pintia。

安装Node.js，安装完成后需要重启VS Code：
```
 sudo apt install nodejs
```
在设置中选择默认编程语言为cpp；
在设置中选择LeetCode站点为leetcode-cn；
使用用户名和密码登录LeetCode账号；
题目默认保存在~/.leetcode文件夹中；

Luna Paint——Image Editor

图片编辑扩展，支持多种图片格式。

Markdown All in One

Markdown语言扩展。

快捷键：

功能	快捷键
切换粗体	`Ctrl`+`B`
切换斜体	`Ctrl`+`I`
切换删除线	`Alt`+`S`
标题升级	`Ctrl`+`Shift`+`]`
标题降级	`Ctrl`+`Shift`+`[`
切换数学环境	`Ctrl`+`M`
切换勾选	`Alt`+`C`
预览	`Ctrl`+`Shift`+`V`
侧边预览	`Ctrl`+`K`+`V`

生成目录：
- Ctrl+Shift+P，输入Markdown All in One: Create Table of Contents；
- 目录在文件保存时自动更新；

Markdown Checkboxes

在Markdown文档预览中直接调整任务列表中的复选框。

Markdown PDF

Markdown文档转PDF文档。

在设置中关闭页眉页脚、选择样式为github.css可以获得更好的显示效果。

Markdown Preview Enhanced

预览、导出Markdown文档。

markdownlint

Markdown语法检查。

Matlab

MATLAB语言扩展。

Meld Diff

在VS Code中使用Meld、WinMerge、Beyond Compare等软件比较文件差异。

One Dark Pro

Atom的深色主题，类似的主题还有City Lights theme、Material Theme（会同时安装Community Material Theme和Material Theme Icons）。

在VS Code中通过Ctrl+K+Ctrl+T快捷键选择主题。

在设置中打开粗体、关闭斜体可以改善中文注释的显示效果。

Path Intellisense

文件路径自动补全，类似的扩展还有Path Autocomplete。

Peacock

修改左侧侧边栏以及底部状态栏颜色，类似的扩展还有Window Colors。

Ctrl+Shift+P，输入Peacock进行设置；
颜色设置保存在.vscode/settings.json文件中；

Polacode

代码截图。

Ctrl+Shift+P，输入Polacode；
选中要截图的代码；

目前Polacode使用存在一定问题，可以使用CodeSnap或者Polacode-2022作为代替，使用方法同上。

Pomodoro

番茄工作法。

Power Mode

在输入时添加炫酷的特效。

在设置中开启扩展；
在设置中关闭振动特效，可以获得更好的显示效果。

Project Manager

管理项目工程，实现快速切换。

打开需要管理的项目工程，并将其保存到收藏夹中：
- 方法一：Ctrl+Shift+P，输入Project Manager: Save Project；
- 方法二：在侧边栏中点击保存图标；

修改projects.json文件，添加标签：

方法一：Ctrl+Shift+P，输入Project Manager: Edit Projects；
方法二：在侧边栏中点击编辑图标；

示例：

 {
     "name": "zxl19.github.io",
     "rootPath": "/home/zxl19.github.io",
     "paths": [],
     "tags": [
         "zxl19"
     ],
     "enabled": true
 }

Python

Python语言扩展，安装Pylance、Pylint、Black Formatter、isort、Jupyter（包括Jupyter Cell Tags、Jupyter Keymap、Jupyter Notebook Renderers、Jupyter Slide Show）等扩展可以使用增强功能并提高使用体验。

Python Environment Manager

管理Python环境和包，类似的扩展还有Pip Manager。

Rainbow Fart

彩虹屁扩展。

ROS

机器人操作系统（Robot Operating System, ROS）扩展。

shell-format

格式化shell脚本、Dockerfile、.gitignore文件等，类似的扩展还有Bash Beautify。

ShellCheck

对于shell脚本进行静态语法分析。

shellman

对于shell脚本进行自动补全。

Todo Tree

高亮注释中的标签并且以树的形式显示，类似的扩展还有TODO Highlight。

在设置中打开使用配色方案可以获得更好的显示效果。

示例：

BUG     a known bug that should be corrected.   存在的BUG（红色）
HACK    a workaround.                           应变方法、变通方法（橙色）
FIXME   should be corrected.                    待修复内容（黄色）
TODO    something to be done.                   待办内容（绿色）
XXX     warn other programmers of problematic   警告需要改进的代码（蓝色）
        or misguiding code, "dirty code" that
        needs improving.
[ ]     an uncompleted task                     未完成任务（紫色）
[x]     a completed task                        已完成任务（粉色）

Toggle Zen Mode

添加进入禅模式（zen mode）的按钮。

禅模式快捷键：Ctrl+K+Z；
全屏快捷键：F11；

Trailing Spaces

显示尾部跟随空格。

Typora

原名为vscode-office，支持预览PDF、Excel等格式的办公文档，并提供所见即所得（What You See Is What You Get，WYSIWYG）的Markdown编辑器功能。

Typst LSP

Typst语言扩展。

VS Code Speech

语音转文字，无需联网，目前支持26种语言。

vscode-icons

文件图标主题，类似的主题还有Material Icon Theme和Material Theme Icons。

vscode-mindmap

绘制思维导图，类似的扩展还有Markmap。

vscode-pets

电子宠物扩展。

vscode-proto3

Protocol Buffers语法支持，仅支持3.x版本：

syntax = "proto3";

YAML

YAML语法支持。

小霸王

游戏扩展，类似的扩展还有4399 on VSCode、红白机等。

常见问题及解决方法

配置文件查看和修改

对于编辑器和扩展的设置都会保存在settings.json配置文件中；
Ctrl+Shift+P，输入Preferences: Open User Settings (JSON)进行查看和修改；
删除settings.json配置文件中大括号{}内部的内容可以将VS Code恢复默认设置；

工作区中的最大文件数量

当工作区中的文件数量过多时会报错Visual Studio Code is unable to watch for file changes in this large workspace；

查看最大文件数量：

 cat /proc/sys/fs/inotify/max_user_watches

默认为8192；

修改最大文件数量：

 sudo gedit /etc/sysctl.conf

在最后一行添加：

 fs.inotify.max_user_watches=524288

应用最大文件数量设置：
```
 sudo sysctl -p
```