Post

VSCode 常用插件

Posted Updated
By Nobody 10 min read

VSCode 常用插件

介绍

  • VSCode 连接远程服务器，点击打开的文件，会立马跳转到相应的目录中，定位文件相比 MobaXterm 更便捷，便于下载文件到本地

  • 命令行启动：

1
2

code-insiders  # VSCode Insiders
code           # VSCode

1
2
3
4
5
6
7
8
9
10

{
    // 终端字体
    "terminal.integrated.fontFamily": "MesloLGM Nerd Font",
    // 终端字体大小
    "terminal.integrated.fontSize": 14,
    // 编辑器字体大小
    "editor.fontSize": 14,
    // 窗口缩放大小
    "window.zoomLevel": 0.5,
}

1
2
3
4

    "black-formatter.args": [
        "--line-length",
        "79"
    ],

快捷键

1
2
3
4
5
6
7
8
9
10
11

# 快捷键
Ctrl + /                # 单行注释
Alt + Shift + A         # 多行注释
Ctrl + C                # 复制当前整行内容
Ctrl + X                # 剪切当前整行内容
Ctrl + Shift + K        # 删除一行
Crtl + J                # 工作区和终端间的切换
alt + shift + ↓         # 复制上一行代码到下一行
Ctrl + F4               # 关闭文件
Crtl + P 或 Crtl + Tab  # 文件跳转
Crtl + 点击图片          # 缩小图片

插件

Vim

GitHub - VSCodeVim/Vim: :star: Vim for Visual Studio Code

  • 在 VSCode 中使用 Vim 的快捷键；内置的一些 vim 插件（常用）：airline、easymotion、surround
  • Vim 设置（用户设置）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

    // Vim 配置
    "vim.leader": "<space>",
    "vim.surround": true,
    "vim.easymotion": true,
    "vim.handleKeys": {
        "<C-a>": false,
        "<C-f>": false
    },
    "vim.insertModeKeyBindings": [
        {
            "before": ["j", "j"],
            "after": ["<Esc>"]
        }
    ],
    "vim.normalModeKeyBindings": [
        {
            "before": ["j"],
            "after": ["g", "j"]
        },
        {
            "before": ["k"],
            "after": ["g", "k"]
        },
        {
            "before": ["K"],
            "after": ["5", "k"]
        },
        {
            "before": ["J"],
            "after": ["5", "j"]
        },
        {
            "before": ["L"],
            "after": ["$"]
        },
        {
            "before": ["H"],
            "after": ["^"]
        },
    ],
  • easymotion 用法：
1
2

# 快捷键
<leader><leader> s <char>  # 查找字符
  • surround 用法：
    • "test" with cursor inside quotes type cs"' to end up with 'test'
    • "test" with cursor inside quotes type ds" to end up with test

Python

  • 集成插件；可识别 conda 创建的 Python 虚拟环境；
  • 其中的 Pylance 插件是 Python 的语言服务器（LSP），可实现自动补全，跳转到定义，自动解析类、函数等功能，非常好用；
  • isort 插件可对 import 的相关模块进行排序；

  • 转到某个类或函数的定义所在脚本时，代码编辑区上方会显示该类或函数的绝对路径，可点击该类或函数的名字，查看该类中所有的方法和属性（该函数平级的其他函数），点击跳转想要查看的方法/函数、属性即可，也可查看其他的类，会很简便。

  • Python 设置：脚本文件保存自动格式化
1
2
3
4
5
6
7
8
9
10

{
    "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.organizeImports": true
        },
    },
    "isort.args":["--profile", "black"],
}

  • 问题：当 root 中已有 conda 时，当前用户下的 conda 虚拟环境名称无法被 VSCode 的相关插件识别，可在设置中找到 conda path 选项，写入将当前用户下的 conda 路径

  • 其他 Python 相关插件：

    • Black Formatter：Python 代码风格格式化（其他：yapf、autopep8 和 ruff）。
    • autoDocstring：自动为 python 的函数和类写 docstring snippets。
    • Jupyter：运行 Jupyter notebook。

编程相关

  • Remote Development：集成插件；可连接 WSL（自动识别）和远程服务器（若已设置别名，可自动识别）

  • Github Copilot (Chat)：辅助编写代码，如代码自动补全，可在代码和侧边栏中开启对话。目前主要用它进行（Github Copilot Chat 目前只有 VSCode Insider 版本才有）

  • GitLens：增强 Git 使用

  • WakaTime：统计编程项目 Codinig 数据

  • TabOut：跳出括号（函数、列表、字典和字符串等）

  • LaTeX Workshop：实时编译 LaTeX，有字数统计功能

  • Typst LSP：Typst 语言服务器

  • Markdown All in One：markdown 语法高亮，自动补全，可生成目录，添加/更新章节序号；VSCode插件生成编号、目录、文件目录树；暂无很好的 “ 中英文混排添加空格 ” 格式化的插件；会使用 Obsidian 中的 Linter 插件，可将 markdown 内容复制到 Obsidian 中进行格式化

  • Markdownlint：markdown 语法风格格式化

  • Markdown PDF：将 markdown 文档导出成 pdf 文件，需要本地或终端支持中文字符，不支持公式

  • LAMMPS Syntax Highlighting：LAMMPS 语法命令高亮、自动补全

  • shellcheck、shell-format：不是很好（建议直接使用其命令行工具）

1
2
3
4
5
6
7
8

{
    // markdownlint 设置：md 文件保存自动格式化
    "[markdown]": {
        "editor.codeActionsOnSave": {
        "source.fixAll.markdownlint": "always"
        }
    }
}

前端相关

  • Live Server
  • CSS Peak
  • Auto Rename Tag：自动重命名标签 tag

非编程相关

  • PicGo：图床
  • vscode-pdf：打开 pdf 文件（会与 LaTeX Workshop 插件冲突）
  • Excel Viewer：查看 Excel 表格
  • Material Icon Theme：文件、目录图标，美化用
  • Front Matter CMS：管理 Front Matter
  • VScode 插件推荐-状态栏篇_哔哩哔哩_bilibili

code-server

Code Server 是什么？_51CTO博客_code server

GitHub - coder/code-server: VS Code in the browser

1
2
3
4
5
6
7
8
9
10

# 指定 host 和 port
code-server --host host --port port 

# 打开文件
code-server <file>

# macOS
brew install code-server
brew services start code-server
# Now visit http://127.0.0.1:8080. Your password is in ~/.config/code-server/config.yaml

相关问题

1

GitHub Copilot could not connect to server. Extension activation failed: "Timed out waiting for authentication provider to register"

1

The Pylance server crashed 5 times in the last 3 minutes. The server will not be restarted. See the output for more information.

1

加载 Web 视图时出错: Error: Could not register service workers: InvalidStateError: Failed to register a ServiceWorker: The document is in an invalid state.
Win 软件
VSCode
This post is licensed under CC BY 4.0 by the author.