应用场景

SFTP 插件适用于以下场景：

• 本地开发，远程调试：在本地编写代码，保存后自动同步到远程服务器，无需手动上传
• 快速部署：本地测试通过后，一键同步到生产环境服务器
• 多服务器管理：同时管理多个远程服务器，快速切换上传目标
• 团队协作：统一开发环境，确保代码在服务器端运行一致

安装插件

打开 VSCode，按下快捷键 Ctrl + Shift + X 打开扩展商店，搜索 sftp，找到名为 SFTP 的插件（作者：Natizyskunk），这是安装量最高、最受欢迎的 SFTP 插件。点击安装即可。

安装完成后，VSCode 会在侧边栏显示 SFTP 图标，表示插件已成功安装。

配置插件

生成配置文件

插件安装完成后，我们需要为当前项目创建配置文件。有两种方式：

方式一：使用命令面板

1. 按下快捷键 Ctrl + Shift + P 打开命令面板
2. 输入 SFTP: Config 并回车
3. VSCode 会在当前工作区的 .vscode 文件夹下自动生成 sftp.json 配置文件

方式二：右键菜单

1. 在 VSCode 资源管理器中，右键点击项目文件夹
2. 选择 SFTP: Config
3. 同样会生成 sftp.json 配置文件

基础配置示例

打开生成的 sftp.json 文件，你会看到一个默认的配置模板。下面是一个基础配置示例：

{
    "name": "我的服务器",
    "host": "192.168.1.100",
    "protocol": "sftp",
    "port": 22,
    "username": "root",
    "password": "your_password",
    "remotePath": "/var/www/project",
    "uploadOnSave": true,
    "useTempFile": false,
    "openSsh": false
}

完整配置示例

下面是一个包含更多选项的完整配置示例：

{
    "name": "生产环境服务器",
    "host": "192.168.1.100",
    "protocol": "sftp",
    "port": 22,
    "username": "deployer",
    "password": "your_password",
    "remotePath": "/home/deployer/project",
    "context": "./",
    "uploadOnSave": true,
    "useTempFile": false,
    "openSsh": false,
    "downloadOnOpen": false,
    "ignore": [
        ".vscode",
        ".git",
        ".DS_Store",
        "node_modules",
        "*.log",
        "*.tmp"
    ],
    "watcher": {
        "files": "**/*",
        "autoUpload": true,
        "autoDelete": false
    },
    "syncOption": {
        "delete": false,
        "skipCreate": false,
        "ignoreExisting": false,
        "update": true
    },
    "sshConfigPath": null,
    "concurrency": 4
}

配置参数详解

连接配置参数

认证方式参数

SFTP 插件支持三种认证方式：

1. 密码认证（最简单）

{
    "username": "root",
    "password": "your_password"
}

2. 密钥认证（推荐）

{
    "username": "root",
    "privateKeyPath": "C:\\Users\\YourName\\.ssh\\id_rsa",
    "passphrase": "密钥密码（如果有的话）"
}

密钥文件路径说明：

• Windows: C:\\Users\\YourName\\.ssh\\id_rsa 或 ~/.ssh/id_rsa
• Linux/Mac: ~/.ssh/id_rsa
• 支持 OpenSSH 格式和 PPK 格式的密钥

3. SSH Config 配置（高级）

如果你已经配置了 SSH config 文件，可以直接引用：

{
    "sshConfigPath": "~/.ssh/config",
    "host": "myserver"
}

对应的 SSH config 文件内容：

Host myserver
    HostName 192.168.1.100
    User deployer
    Port 22
    IdentityFile ~/.ssh/id_rsa

路径配置参数

路径配置说明：

假设本地项目结构如下：

project/
├── src/
│   ├── index.js
│   └── utils.js
├── tests/
└── .vscode/
    └── sftp.json

• 如果 context 为 "./" 且 remotePath 为 "/var/www/project"，则 src/index.js 会上传到 /var/www/project/src/index.js
• 如果 context 为 "./src" 且 remotePath 为 "/var/www/project"，则 src/index.js 会上传到 /var/www/project/index.js

自动同步参数

最佳实践建议：

• 开发环境：设置 uploadOnSave: true，方便快速同步
• 生产环境：设置 uploadOnSave: false，避免误操作

忽略文件配置

ignore 参数用于指定哪些文件或文件夹不需要同步，支持 glob 模式：

{
    "ignore": [
        "**/.vscode/**",
        "**/.git/**",
        "**/.DS_Store",
        "**/node_modules/**",
        "**/*.log",
        "**/*.tmp",
        "**/dist/**",
        "**/coverage/**"
    ]
}

常用忽略模式：

• **/.git/**：忽略 Git 版本控制文件
• **/node_modules/**：忽略 Node.js 依赖包
• **/*.log：忽略所有日志文件
• **/dist/**：忽略构建输出目录

监听器配置（Watcher）

监听器可以监控文件变化并自动执行同步操作：

{
    "watcher": {
        "files": "**/*",
        "autoUpload": true,
        "autoDelete": false
    }
}

注意事项：

• autoDelete: true 可能导致误删除，请谨慎使用
• 监听器会持续运行，可能影响性能，建议按需启用

同步选项（Sync Option）

syncOption 用于配置手动同步时的行为：

{
    "syncOption": {
        "delete": false,
        "skipCreate": false,
        "ignoreExisting": false,
        "update": true
    }
}

性能优化参数

{
    "concurrency": 8,
    "connectTimeout": 15000,
    "keepalive": 5000
}

性能优化建议：

• 网络环境好时，可以增加 concurrency 提高上传速度
• 网络不稳定时，增加 connectTimeout 避免连接超时
• 频繁操作时，减小 keepalive 保持连接活跃

插件使用

常用操作

安装并配置好插件后，可以通过以下方式使用：

1. 上传文件或文件夹

方式一：右键菜单

• 在资源管理器中右键点击文件或文件夹
• 选择 Upload 上传到服务器

方式二：命令面板

• 按 Ctrl + Shift + P 打开命令面板
• 输入 SFTP: Upload 并选择相应的命令

2. 下载文件或文件夹

• 右键点击文件或文件夹
• 选择 Download 从服务器下载

3. 同步操作

同步本地到远程：

• 命令面板输入 SFTP: Sync Local -> Remote
• 将本地所有文件同步到服务器

同步远程到本地：

• 命令面板输入 SFTP: Sync Remote -> Local
• 将服务器文件同步到本地

双向同步：

• 命令面板输入 SFTP: Sync Both Directions
• 根据文件修改时间自动判断同步方向

4. 对比文件差异

• 右键点击文件
• 选择 Diff with Remote
• VSCode 会显示本地文件和远程文件的差异

5. 列出远程文件

• 命令面板输入 SFTP: List
• 可以浏览远程服务器的文件目录

完整命令列表

按 Ctrl + Shift + P 打开命令面板，输入 SFTP 可以看到所有可用命令：

多服务器配置

在实际开发中，我们可能需要同时管理开发环境、测试环境和生产环境多个服务器。SFTP 插件支持在一个配置文件中配置多个服务器。

配置多个服务器

在 sftp.json 中使用数组格式配置多个服务器：

[
    {
        "name": "开发环境",
        "host": "192.168.1.101",
        "port": 22,
        "username": "developer",
        "password": "dev_password",
        "protocol": "sftp",
        "remotePath": "/home/developer/project",
        "uploadOnSave": true,
        "ignore": [
            ".vscode/**",
            ".git/**",
            "node_modules/**"
        ]
    },
    {
        "name": "测试环境",
        "host": "192.168.1.102",
        "port": 22,
        "username": "tester",
        "password": "test_password",
        "protocol": "sftp",
        "remotePath": "/var/www/test",
        "uploadOnSave": false,
        "ignore": [
            ".vscode/**",
            ".git/**",
            "node_modules/**"
        ]
    },
    {
        "name": "生产环境",
        "host": "192.168.1.103",
        "port": 22,
        "username": "deployer",
        "privateKeyPath": "~/.ssh/production_key",
        "protocol": "sftp",
        "remotePath": "/var/www/production",
        "uploadOnSave": false,
        "ignore": [
            ".vscode/**",
            ".git/**",
            "node_modules/**",
            "*.log"
        ]
    }
]

切换服务器

配置多个服务器后，每次执行上传、下载等操作时，VSCode 会弹出选择框，让你选择目标服务器。

也可以通过命令面板 SFTP: List All 查看所有配置的服务器。

最佳实践

1. 安全配置建议

不要将密码明文写入配置文件：

方案一：使用环境变量

{
    "username": "${env.SFTP_USER}",
    "password": "${env.SFTP_PASSWORD}"
}

方案二：使用密钥认证（推荐）

{
    "username": "deployer",
    "privateKeyPath": "~/.ssh/id_rsa"
}

将配置文件加入 .gitignore：

.vscode/sftp.json

如果需要团队共享配置，可以创建一个 sftp.json.example 模板文件，将敏感信息替换为占位符：

{
    "name": "示例配置",
    "host": "your_server_ip",
    "username": "your_username",
    "password": "your_password",
    "remotePath": "/path/to/project"
}

2. 工作流建议

开发阶段：

{
    "uploadOnSave": true,
    "downloadOnOpen": false,
    "watcher": {
        "autoUpload": true
    }
}

部署阶段：

{
    "uploadOnSave": false,
    "syncOption": {
        "update": true,
        "delete": false
    }
}

3. 团队协作建议

为团队创建统一的配置模板：

{
    "name": "团队开发服务器",
    "host": "${env.DEV_SERVER}",
    "username": "${env.DEV_USER}",
    "password": "${env.DEV_PASSWORD}",
    "remotePath": "/home/${env.DEV_USER}/project",
    "uploadOnSave": true,
    "ignore": [
        ".vscode/**",
        ".git/**",
        ".env",
        "node_modules/**",
        "*.log"
    ]
}

团队成员在本地创建 .env 文件配置自己的环境变量即可。

4. 性能优化建议

对于大型项目，建议优化以下配置：

{
    "concurrency": 8,
    "ignore": [
        "node_modules/**",
        "dist/**",
        "build/**",
        ".git/**",
        "**/*.log"
    ],
    "syncOption": {
        "update": true
    }
}

常见问题

1. 连接超时

**问题：**上传文件时提示连接超时。

解决方案：

• 检查服务器 IP 和端口是否正确
• 检查防火墙是否开放对应端口
• 增加 connectTimeout 参数：

  {
      "connectTimeout": 30000
  }
  

2. 权限不足

**问题：**上传文件提示 Permission denied。

解决方案：

• 确认登录用户对目标目录有写权限
• 在服务器上执行：chmod 755 /target/path
• 或切换到有权限的用户

3. 密钥认证失败

**问题：**使用密钥登录时提示认证失败。

解决方案：

• 确认密钥文件路径正确
• 确认密钥文件权限：chmod 600 ~/.ssh/id_rsa
• 如果密钥有密码，需要配置 passphrase
• Windows 用户注意路径格式：C:\\Users\\Name\\.ssh\\id_rsa

4. 文件同步冲突

**问题：**本地和远程文件都被修改，不知道以哪个为准。

解决方案：

• 使用 Diff with Remote 对比差异
• 手动合并代码后再上传
• 使用版本控制工具如 Git 管理代码

5. 上传速度慢

**问题：**上传大量文件时速度很慢。

解决方案：

• 增加并发数："concurrency": 10
• 完善 ignore 配置，避免上传不必要的文件
• 使用 Sync Local -> Remote 而不是 Upload Folder

参考资料

• SFTP 插件官方文档
• SSH 密钥认证配置
• SFTP 协议介绍

在使用 VSCode 的过程中，我们经常会安装一些插件来提高开发效率。但是，由于某些原因，我们可能无法直接访问 VSCode 的插件市场，这时候我们就需要离线安装插件了。

这里存在两种情况，一种是为本地的 VSCode 安装插件，另一种是为远程的 VSCode 安装插件。本文将分别介绍这两种情况下的离线安装方法。

远程 VSCode 也就是 VSCode 的Remote Development功能，可以通过 SSH、Docker、WSL 等方式远程连接到远程主机上的 VSCode。

方法一：使用已安装的插件目录

• 从已经安装插件的电脑上拷贝所有插件，路径一般为 C:\用户\用户名\.vscode\extensions
• 拷贝到离线安装的电脑上的 .vscode/extensions 文件夹下即可，重启 VScode 即可安装成功。

对于远程 VSCode 我们需要知道，插件不区分操作系统，所以我们可以在本地的 Windows 上的 VSCode 上安装插件，然后将插件目录压缩后整个拷贝到远程主机上即可。

远程主机上的插件目录一般在 ~/.vscode-server/extensions 下。将压缩的文件解药到这个目录下，重启 VSCode 即可。

方法二：下载离线安装包 vslx 安装

• 到 VScode 插件中心 搜索需要使用的插件名称

• 下载对应的拓展程序文件，下载的文件的后缀是.vslx

  

• VSCode 中安装

  

Markdown 标记语言旨在易于阅读、编写和理解。它的灵活性既是优点也是缺点。语法众多，因此格式可能不一致。某些构造在所有解析器中都不能很好地工作，应该避免。CommonMark 规范标准化解析器。

Markdownlint 是一个用于 Node.js 的静态分析工具，有一个标准规范，用于强制执行 Markdown 文件的标准和一致性。

Markdownlint 插件使用

markdownlint提供了多种使用场景下的解决方案，如命令行，编辑器甚至 GitHub Action。因为我平时写 Markdown 文档都是使用 VSCode，所以介绍一下 VSCode 下的使用。其他编辑器包括 VIM，Sublime 也都支持，可以前往官网查阅方法。

VSCode 需要下载插件，Ctrl+Shift+X打开插件中心，搜索Markdownlint安装即可。

安装插件后打开 Markdown 文档，如果有不符合规范的语法将会警告标识。如，标题前后没有空行，将会标识：

提示违反了第 22 条规范，第 22 条规范的就是标题前后需要有空行隔开。

目前有 53 条规范，可以在markdownlint/Rules.md查看所有规范的内容。

当然这些规范也都可以自定义是否检查，比如第 24 条规定，文档内不可以有重复的标题，但是我就有重复标题的需求，那该如何关闭这个检查呢，Markdownlint 提供了配置的方式。

Ctrl+Shift+P打开运行窗口，输入 Markdownlint，找到Creat or open the markdownlint configuration file。

创建一个配置文件，并输入以下内容，表示关闭第 24 条规范的检查：

{
  "MD024": false,
}

这样文档中将不会有第 24 条规范的检查警告，其他检查同理。

Markdownlint 自定义规则

MD001 - Heading levels should only increment by one level at a time

标题等级一次只能增加一级，不能跨级。

原理：标题代表文档的结构，跳过时可能会造成混淆 - 特别是对于可访问性场景。

MD002 - First heading should be a top-level heading

文档的第一个标题必须是最高级的标题（标题等级 1 级到 6 级逐渐降低）

MD003 - Heading style

整篇文档需要采用一致的标题格式。

MD004 - Unordered list style

无序列表格式需要一致。

MD005 - Inconsistent indentation for list items at the same level

• 同一级的列表缩进必须一致
• 在有序列表中，前面的数字序号可以左对齐，也可以右对齐

MD006 - Consider starting bulleted lists at the beginning of the line

一级列表不能缩进。

如下为报错：

Some text

  * List item
  * List item

MD007 - Unordered list indentation

无序列表嵌套缩进时默认采用两个空格。

MD009 - Trailing spaces

行尾最多可以添加两个空格，超过会给出警告，两个空格正好可以用于换行。

MD010 - Hard tabs

不能使用 tab 键缩进，要使用空格。

原理：硬制表符通常由不同的编辑器以不一致的方式呈现，并且比空格更难处理。

MD011 - Reversed link syntax

当遇到看似链接的文本，但语法似乎已反转（[] 和 () 反转）时，将触发此规则。

MD012 - Multiple consecutive blank lines

文档中不能有连续的空行，在代码块中此规则不会生效。

MD013 - Line length

默认行的最大长度是 80，此规则对代码块、表格、标题也生效。

MD014 - Dollar signs used before commands without showing output

在代码块中，终端命令前不需要有美元符号 ($) 如果代码块中既有终端命令，也有命令的输出，则终端命令前可以有美元符号 ($)。

MD018 - No space after hash on atx style heading

在"atx"格式的标题中，#号和文字间需用一个空格隔开。

MD019 - Multiple spaces after hash on atx style heading

在"atx"格式的标题中，#号和文字间只能用一个空格隔开，不能有多余的空格。

MD020 - No space inside hashes on closed atx style heading

在"closed_atx"格式的标题中，文字和前后的#号之间需用一个空格隔开。

MD021 - Multiple spaces inside hashes on closed atx style heading

在"closed_atx"格式的标题中，文字和前后的#号之间只能用一个空格隔开，不能有多余的空格。

MD022 - Headings should be surrounded by blank lines

标题行的上下行必须都是空行。

MD023 - Headings must start at the beginning of the line

标题行不能缩进。

MD024 - Multiple headings with the same content

文档不能有内容重复的标题。

MD025 - Multiple top-level headings in the same document

同一文档只能有一个最高级的标题，默认是只能有一个 1 级标题。

MD026 - Trailing punctuation in heading

标题行末尾不能有以下标点符号。

MD027 - Multiple spaces after blockquote symbol

创建引用区块时，右尖括号 ( > ) 和文字之间有且只能有一个空格。

MD028 - Blank line inside blockquote

两个引用区块间不能仅用一个空行隔开或者同一引用区块中不能有空行，如果一行中没有内容，则这一行要用>开头。

MD029 - Ordered list item prefix

有序列表的前缀序号格式必须只用 1 或者从 1 开始的加 1 递增数字。

MD030 - Spaces after list markers

列表（有序、无序）的前缀符号和文字之间用 1 个空格隔开 在列表嵌套或者同一列表项中有多个段落时，无序列表缩进两个空格，有序列表缩进 3 个空格。

MD031 - Fenced code blocks should be surrounded by blank lines

单独的代码块前后需要用空行隔开（除非是在文档开头或末尾），否则有些解释器不会解释为代码块

MD032 - Lists should be surrounded by blank lines

列表（有序、无序）前后需要用空行隔开，否则有些解释器不会解释为列表。

列表的缩进必须一致。

MD033 - Inline HTML

文档中不允许使用 HTML 语句。

MD034 - Bare URL used

单纯的链接地址需要用尖括号 (<>) 包裹，否则有些解释器不会解释为链接。

MD035 - Horizontal rule style

创建水平线时整篇文档要统一 (consistent)，要和文档中第一次创建水平线使用的符号一致。

MD036 - Emphasis used instead of a heading

不能用加粗代替标题。

MD037 - Spaces inside emphasis markers

用于创建强调的符号和强调的的文字之间不能有空格。

MD038 - Spaces inside code span elements

当用单反引号创建代码段的时候，单反引号和它们之间的代码不能有空格 如果要把单反引号嵌入到代码段的首尾，创建代码段的单反引号和嵌入的单反引号间要有一个空格隔开。

MD039 - Spaces inside link text

链接名和包围它的中括号之间不能有空格，但链接名中间可以有空格。

MD040 - Fenced code blocks should have a language specified

单独的代码块（此处是指上下用三个反引号包围的代码块）应该指定代码块的编程语言，这一点有助于解释器对代码进行代码高亮。

MD041 - First line in a file should be a top-level heading

文档的第一个非空行应该是文档最高级的标题，默认是 1 级标题。

MD042 - No empty links

链接的地址不能为空。

MD043 - Required heading structure

要求标题遵循一定的结构，默认是没有规定的结构。

MD044 - Proper names should have the correct capitalization

指定一些名称，会检查它是否有正确的大写。

MD045 - Images should have alternate text (alt text)

图片链接必须包含描述文本（alt text）。

MD046 - Code block style

整篇文档采用一致的代码格式。

MD047 - Files should end with a single newline character

文档需用一个空行结尾。

MD048 - Code fence style

表示代码块的标记需要一直，可以是波浪号，也可以是点号。但是需要保持一致。

MD049 - Emphasis style should be consistent

强调符号需要一直，如斜体。

MD050 - Strong style should be consistent

加粗符号需要保持一致。

MD051 - Link fragments should be valid

锚点需要表示正确。

在写 MD 文档时为了追求美观，表格通常都是对齐的，这就需要字体必须等宽，但是写代码时等宽字体的因为很瘦小，不容易阅读，所以想要一个插件能够在多个字体直接快速切换。万能 VSCode 啥都有，插件中心就有一款专门切换字体的插件Font Switcher。直接搜索安装。

配置与使用

打开配置脚本settings.json，如果以前修改过字体，找到"editor.fontFamily"配置项，如果没有就直接添加。

这是我的字体，添加你们机器上安装的字体，每个逗号间隔都是不同的字体，可以使用Font Switcher切换，需要注意的是，字体名没有空格不需要加单引号，加了也无妨，如果有空格，一定要加引号。

"editor.fontFamily": "'Sarasa Mono SC', 微软雅黑，'Noto Sans Mono CJK SC', 'JetBrains Mono', Consolas, monospace",

Ctrl+Shift+P打开运行窗口，输入Switch Font，选择切换的字体。如图：


当有多个项目同时打开时，VSCode 窗口开得太多就找不到自己想要打开的窗口，因为窗口命名默认按照当前打开的文件命名的，不是很清楚。就需要挨个打开才能确定自己想要打开的窗口。

如果能按照项目名命名窗口就会便捷许多，好在 VSCode 提供重命名的方式。同样的需求可能在浏览器中也会遇到，可以参考浏览器任务栏多窗口命名 - 如云泊。

修改方式

File -> Preferences -> Setting 搜索 Window: Title 改成：

${dirty}${rootName}${separator}${activeEditorMedium}${separator}${appName}

其他可用配置说明：

"${activeEditorShort}": 文件名 (例如 myFile.txt)。
"${activeEditorMedium}": 相对于工作区文件夹的文件路径 (例如, myFolder/myFileFolder/myFile.txt)。
"${activeEditorLong}": 文件的完整路径 (例如 /Users/Development/myFolder/myFileFolder/myFile.txt)。
"${activeFolderShort}": 文件所在的文件夹名称 (例如, myFileFolder)。
"${activeFolderMedium}": 相对于工作区文件夹的、包含文件的文件夹的路径, (例如 myFolder/myFileFolder)。
"${activeFolderLong}": 文件所在文件夹的完整路径 (例如 /Users/Development/myFolder/myFileFolder)。
"${folderName}": 文件所在工作区文件夹的名称 (例如 myFolder)。
"${folderpath}": 文件所在工作区文件夹的路径 (例如 /Users/Development/myFolder)。
"${rootName}": 打开的工作区或文件夹的名称 (例如 myFolder 或 myWorkspace)。
"${rootPath}": 打开的工作区或文件夹的文件路径 (例如 /Users/Development/myWorkspace)。
"${appName}": 例如 VS Code。
“${remoteName}”: 例如 SSH
${dirty}: 表明活动编辑器具有未保存更改的时间的指示器。
"${separator}": 一种条件分隔符 ("-"), 仅在被包含值或静态文本的变量包围时显示

在VSCode使用搜索/替换时，匹配的字符会“高亮”（高亮个屁），知道自己当前搜到到什么位置，如果匹配字符较少还好，如果匹配太多，默认的高亮就很难发现当前已经搜索到什么位置了。比如我当前在搜索“搜索”这两个字：

大家还能看到我当前搜索到哪了吗？

但是如果设置成这样呢？

配置

搜索匹配时高亮颜色

添加如下配置：

    "workbench.colorCustomizations": {
        "editor.findMatchBackground": "#ff0000",
    }

表示搜索匹配时高亮，高亮颜色为红色。自己可以选择合适的颜色。

搜索结果高亮

与上面不同的是，搜索时会高亮所有的结果，但是点击箭头匹配到当前结果时就是上面的高亮，其余未匹配的状态就是下面的高亮：

"workbench.colorCustomizations": {
    "editor.findMatchHighlightBackground": "#ff00ff",
}

选择时颜色

    "workbench.colorCustomizations": {
        "editor.selectionBackground": "#2f00ff",
    }

范围搜索时背景颜色

有时候搜索不是全局搜索，是在自己选中的范围内搜索，那这个范围也是可以高亮的，开启范围搜索需要点击搜索框的按钮，如图所示：

"workbench.colorCustomizations": {
    "editor.findMatchHighlightBackground": "#ff00ff",
    "editor.findRangeHighlightBackground": "#ff9900"
}

"gitlens.menus": {
    "editorGroup": {
        "blame": false,
        "compare": true
    },
},

用惯了 Linux 终端的命令，Windows 的 shell 真的太不顺手了，但是 Gitbash 很多命令相似，可以将默认的 shell 换成 Gitbash。

打开settings.json配置文件，添加如下

    "terminal.integrated.profiles.windows": {
        "PowerShell -NoProfile": {
          "source": "PowerShell",
          "args": [
            "-NoProfile"
          ]
        },
        "Git-Bash": {
          "path": "D:\\Software\\Git\\bin\\bash.exe", //bin路径下的bash，不是git-bash.exe。否则会打开外部窗口
          "args": []
        }
      },
    "terminal.integrated.defaultProfile.windows": "Git-Bash",

修改终端配色

打开Base16 Terminal Colors for Visual Studio Code，选择一款配置复制

打开 VScodesettings.json，替换如下

 "workbench.colorCustomizations": {
        "terminal.background":"#1C2023",
        "terminal.foreground":"#C7CCD1",
        "terminalCursor.background":"#C7CCD1",
        "terminalCursor.foreground":"#C7CCD1",
        "terminal.ansiBlack":"#1C2023",
        "terminal.ansiBlue":"#AE95C7",
        "terminal.ansiBrightBlack":"#747C84",
        "terminal.ansiBrightBlue":"#AE95C7",
        "terminal.ansiBrightCyan":"#95AEC7",
        "terminal.ansiBrightGreen":"#95C7AE",
        "terminal.ansiBrightMagenta":"#C795AE",
        "terminal.ansiBrightRed":"#C7AE95",
        "terminal.ansiBrightWhite":"#F3F4F5",
        "terminal.ansiBrightYellow":"#AEC795",
        "terminal.ansiCyan":"#95AEC7",
        "terminal.ansiGreen":"#95C7AE",
        "terminal.ansiMagenta":"#C795AE",
        "terminal.ansiRed":"#C7AE95",
        "terminal.ansiWhite":"#C7CCD1",
        "terminal.ansiYellow":"#AEC795"
    },

修改后效果

修改终端字体

方法一：打开 VScodesettings.json，加上下面这个配置，字体改成自己电脑上的字体

    "terminal.integrated.fontFamily": "JetBrains Mono",

方法二：打开设置页面，搜索terminal font

修改后的效果

解决中文乱码

git config --global core.quotepath false

安装插件

打开插件中心，搜索sftp，安装量最高的就是我们需要的插件，点击安装。

配置插件

插件安装完成后，输入快捷键Control + Shift + P 弹出命令面板，然后输入sftp:config，回车，当前工程的.vscode文件夹下就会自动生成一个sftp.json文件，我们需要在这个文件里配置的内容可以是：

{
  "host": "192.168.xxx.xxx", //服务器 ip
  "port": 22,               //端口，sftp 模式是 22
  "username": "",           //用户名
  "password": "",           //密码
  "protocol": "ftp",       //模式，sfpt 或者 ftp
  "agent": null,
  "privateKeyPath": null,   //存放在本地的已配置好的用于登录工作站的密钥文件（也可以是 ppk 文件）
  "passphrase": null,
  "passive": false,
  "interactiveAuth": false,
  "remotePath": "/root/node/build/", //服务器上的文件地址
  "context": "./server/build",      //本地的文件地址
  "uploadOnSave": true,             //监听保存并上传
  "syncMode": "update",
  "watcher": {
    //监听外部文件
    "files": false,                 //外部文件的绝对路径
    "autoUpload": false,
    "autoDelete": false
  },
  "ignore": [
    //指定在使用 sftp: sync to remote 的时候忽略的文件及文件夹
    //注意每一行后面有逗号，最后一行没有逗号
    //忽略项
    "**/.vscode/**",
    "**/.git/**",
    "**/.DS_Store"
  ]
}

插件使用

• 可以直接右击文件，选择Upload，会将文件上传至配置好的remotePath。

• 可以Control + Shift + P输入sftp，选择想要执行的命令，命令都是字面意思，不多做解释。

  

• 如果有多个 IP 需要配置，可以在sftp.json文件中，通过方括号[]添加。比如

  [
      {
      "host": "192.168.xxx.01", //服务器 ip
      "port": 22,               //端口，sftp模式是22
      "username": "",           //用户名
      "password": "",           //密码
      "protocol": "sftp",       //模式，sfpt 或者 ftp
      "agent": null,
      },
      {
      "host": "192.168.xxx.02", //服务器 ip
      "port": 22,               //端口，sftp模式是22
      "username": "",           //用户名
      "password": "",           //密码
      "protocol": "sftp",       //模式，sfpt 或者 ftp
      "agent": null,
      },
      {
      "host": "192.168.xxx.03", //服务器 ip
      "port": 22,               //端口，sftp模式是22
      "username": "",           //用户名
      "password": "",           //密码
      "protocol": "sftp",       //模式，sfpt 或者 ftp
      "agent": null,
      }
  ]
  

通常函数的注释一般都比较长，而且每个函数注释都格式一致，例如下面的函数注释模板。如果每次写注释都要复制一遍比较麻烦，复制完还要删除多余的字符。但是现有的编辑器一般都支持快捷输入。下面介绍在 VSCode 中如何快捷输入注释模板。

方法

• Ctrl+Shift+P打开编辑器命令窗口 - 输入snippets-选择Preferences:Configure User Snippets-选择·c.json·

  
  

• 更改如下：

  {
  

// Place your snippets for c here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the // same ids are connected. // Example: // “Print to console”: { // “prefix”: “log”, // “body”: [ // “console.log(’$1’);”, // “$2” // ], // “description”: “Log output to console” // } “Function comment”: { “prefix”: “funcom”, “body”: [ “/” “ Description: " “Input Parameter: " “ Output Parameter: " “Return: " “/ " ], “description”: “function comment” } ```

• prefix:输入时的缩写，触发器
• body:内容
• description:描述

参考资料

VSCode 利用 Snippets 设置超实用的代码块 - 掘金

配置

首先我们需要下载和编译 QEMU 源码

./configure --enable-debug --target-list=riscv32-softmmu,riscv32-linux-user --enable-kvm

一定要加上--enable-debug，编译出的程序才带有调试信息，不用设置安装路径，编译时会自动在 qemu 文件夹下自动创建一个build文件夹，编译后的程序也在build文件夹下。

用 VSCode 打开qemu-6.X.X文件夹，Ctrl+Shift+D打开调试配置。如果参考过VSCode 中调试程序这篇文章，接下来就很容易。我们只需要将launch.jason文件中的program属性改为${workspaceFolder}/build/qemu-system-riscv32即可。

调试

打开qemu-6.X.X/softmmu/main.c文件，在main函数入口处打上断点，即可开始调试。

现在只需要点击屏幕上的图标，就可以快速的进行单步调试。

如果需要进行命令行操作，在屏幕下方打开DEBUG CONSOLE，输入-exec+正常命令行下的命令即可在命令行中进行更多的调试。如查看断点信息-exec info breakpoints

本文主要涉及 VSCode 的相关配置，编译及调试工具需要提前安装好。

• 已经安装好riscv-toolchain，包括riscv64-unknown-elf-gcc，riscv64-unknown-elf-gdb
• 已经安装好qemu，包括riscv32-softmmu,riscv32-linux-user,riscv64-softmmu,riscv64-linux-user
• 已经安装好g++,gdb

调试流程简介

对于我这样的新手，要调试一个项目源码最怕的就是开始，也就是怎么能把项目跑起来。

我们以一个简单的test项目，看看在 VSCode 里怎么跑起来。

拿到源码后，将其以文件夹形式，加入到 VSCode 中，文件 - 打开文件夹 - 选择 test 项目文件夹。项目就会在 VSCode 中打开，但是此时我们还无法编译运行，我们需要在 VSCode 上 构建出一个 C 语言的编译与调试环境。

首先得安装一个插件C/C++，打开插件中心Ctrl+Shit+X，搜索，安装。

然后输入F5，会弹出对话框，选择C++(GDB)，继续选择g++。VSCode 会自动创建.vscode文件夹，已经两个文件launch.json和tasks.json。

launch.json用来配置调试环境，tasks.json主要用来配置编译环境，当然也可以配置其他任务。task.json里配置的每个任务其实就相当于多开一个控制台。

配置tasks.json

因为我们先要编译源码，生成.out或者.exe文件，才能调试，所以先进行编译任务配置。

自动生成的文件是个配置模板，我们可以根据自己的实际情况进行配置，也有一部分可以保持默认。

// tasks.json
{
    // https://code.visualstudio.com/docs/editor/tasks
    "version": "2.0.0",
    "tasks": [
        {
             // 任务的名字，注意是大小写区分的
             //会在launch中调用这个名字
            "label": "C/C++: g++ build active file", 
             // 任务执行的是shell
            "type": "shell", 
             // 命令是g++
            "command": "g++", 
             //g++ 后面带的参数
            "args": [
                "'-Wall'",
                "-g",           // 生成调试信息，否则无法进入断点
                "'-std=c++17'",     //使用c++17标准编译
                "'${file}'",        //当前文件名
                "-o",               //对象名，不进行编译优化
                "'${fileBasenameNoExtension}.exe'",  //当前文件名（去掉扩展名）
            ],
        }
    ]
}

如果项目是通过 Makefile 编译的，那就更加简单，只需要配置一个任务即可。

{
  "version": "2.0.0",
  "tasks": [
    {
       //任务的名字方便执行
      "label": "Make Project",
      "type": "shell",
      "command": "make",
      "args":[
          //8线程编译
          "-j8",
      ],
    },
  ]
}

运行该任务时就会执行make命令进行编译。

配置launch.json

// launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            //调试任务的名字
            "name": "g++ - Build and debug active file", 
            //在launch之前运行的任务名，这个名字一定要跟tasks.json中的任务名字大小写一致
            "preLaunchTask": "C/C++: g++ build active file",  
            "type": "cppdbg",
            "request": "launch",
            //需要运行的是当前打开文件的目录中，
            //名字和当前文件相同，但扩展名为exe的程序
            "program": "${fileDirname}/${fileBasenameNoExtension}.exe", 
            "args": [],
            // 选为true则会在打开控制台后停滞，暂时不执行程序
            "stopAtEntry": false,
            // 当前工作路径：当前文件所在的工作空间
            "cwd": "${workspaceFolder}",
            "environment": [],
            // 是否使用外部控制台
            "externalConsole": false,  
            "MIMode": "gdb",
            "setupCommands": [
                {
                    "description": "Enable pretty-printing for gdb",
                    "text": "-enable-pretty-printing",
                    "ignoreFailures": true
                }
            ]
        }]
}

运行

经过以上配置后，我们打开main.cpp文件，在cout处打一个断点，按F5，即可编译，运行，调试。一定要打开main.cpp文件，不能随便打开文件就开始哦。因为我们在配置时使用了一些预定义，比如${file}表示当前文件，所以只有打开需要调试的文件才能开始。

程序将会在cout语句停下来。

我们可以注意一下界面下方的控制台，可以更直观了解launch.jason和tasks.jason。

右边的框，就是我们在tasks.jason中配置的任务，左边的框就是我们在tasks.jason中command以及args的内容，他就是帮我们提前写好编译的选项。然后在 shell 中运行。

编译调试 RISC-V 程序

了解以上这些，就可以按需配置所需的环境了。我们还是从tasks.jason开始。因为开发用的电脑是x86的，所以先要编译出riscv的程序，再用模拟器模拟出rsicv的环境，然后在模拟的环境中运行程序，最后才能开始调试。

假设已经安装好开头所提到的工具。首先配置tasks.jason：

{
    "version": "2.0.0",
    "tasks": [
        {
            // 编译当前代码
            "type": "shell",
            "label": "C/C++(RISCV): Build active file",
            // 编译器的位置
            "command": "/opt/riscv/bin/riscv64-unknown-elf-g++",
            "args": [
                "-Wall", // 开启所有警告
                "-g", // 生成调试信息s
                "${file}",
                "-o",
                "${workspaceFolder}/debug/${fileBasenameNoExtension}" // 我选择将可执行文件放在debug目录下
            ],
            // 当前工作路径：执行当前命令时所在的路径
            "options": {
                "cwd": "${workspaceFolder}"
            },
            "problemMatcher": [
                "$gcc"
            ]
        },
        {
            // 启动qemu供调试器连接
            "type": "shell",
            "label": "Run Qemu Server(RISCV)",
            "dependsOn": "C/C++(RISCV): Build active file",
            "command": "qemu-system-riscv64",
            "args": [
                "-g",
                "65500", // gdb端口，自己定义
                "${workspaceFolder}/debug/${fileBasenameNoExtension}"
            ],
        },
        {
            // 有时候qemu有可能没法退出，故编写一个任务用于强行结束qemu进程
            "type": "shell",
            "label": "Kill Qemu Server(RISCV)",
            "command": "ps -C qemu-riscv64 --no-headers | cut -d \\  -f 1 | xargs kill -9",
        }
    ]
}

tasks.jason是可以配置多个任务的，第一个任务用来编译成riscv架构下的程序，第二个任务用来启动 qemu，让程序在 qemu 上运行起来。

第一个任务中，command就是配置编译器riscv64-unkonown-elf-gcc的属性，第二个任务中，command是配置 qemu 模拟器qemu-system-riscv32的属性。第三个任务中，用来配置结束 qemu 模拟器的命令。

接下来配置launch.jason：

{
    "version": "0.2.0",
    "configurations": [
        { 
            "name": "C/C++(RISCV) - Debug Active File",
            "type": "cppdbg",
            "request": "launch",
            "program": "${workspaceFolder}/debug/${fileBasenameNoExtension}",
            "args": [],
            "stopAtEntry": false,
            "cwd": "${workspaceFolder}",
            "environment": [],
            "externalConsole": false,
            "MIMode": "gdb",
            "setupCommands": [
                {
                    "description": "为 gdb 启用整齐打印",
                    "text": "-enable-pretty-printing",
                    "ignoreFailures": true
                }
            ],
            // RISC-V工具链中的gdb
            "miDebuggerPath": "/opt/riscv/bin/riscv64-unknown-elf-gdb", 
            // 这里需要与task.json中定义的端口一致
            "miDebuggerServerAddress": "localhost:65500" 
        }
    ]
}

我们在配置x86下的调试环境时，launch.jason中有个"preLaunchTask": "C/C++: g++ build active file"，属性，这个属性的目的是在启动调试之前，先执行任务名字为"C/C++: g++ build active file"任务，也是就编译的任务。

因为启动 qemu 会导致阻塞，所以这里没有加preLaunchTask，在启动调试之前，先把 qemu 运行起来。输入Ctrl+Shift+P，打开 VSCode 命令行。输入Run Task，

点击第一个，选择任务，我们可以看到出现的三个任务就是我们在tasks.jason中配置的三个任务。选择第一个 Build，编译出程序，再重复操作，选择第三个执行 QEMU 任务。

预定义变量

官网