Vscode 使用技巧总结

发布时间： 更新时间： 总字数：2479 阅读时间：5m 作者： 分享 复制网址

Vscode 使用技巧总结

安装

查看版本：

Code -> About Visual Studio Code

Version: 1.55.2 (Universal)
Commit: 3c4e3df9e89829dce27b7b5c24508306b151f30d
Date: xxx
Electron: xxx
Chromium: xxx
Node.js: xxx
V8: xxx
OS: Darwin x64 22.3.0
Sandboxed: No

说明：

  • Commit 为 Github release 的 Git Commit Id
    • node server 下载时的 commit id 也是这个 id

使用

  • 主题和文件图标配置 左下角<轮子> -> Theme -> Color Theme/File Icon Theme

快捷键

Code -> Preference -> Keyboard Shortcuts，然后设置对应的选项，例如：

  • File: Reveal Active File in Side Bar : cmd + L 快速在左侧栏目锁定当前文件的位置

优化配置

  • tab 转 4 个空格：点击左下角 Spaces -> Indent Using Spaces -> 4
  • 显示tab：打开setting -> 在搜索框中输入 renderControlCharacters -> 勾选复选框
  • 显示空格：打开setting -> 在搜索框中输入 renderWhitespace -> 勾选复选框
  • 自动删除行尾空格：打开setting -> 在搜索框中输入 files.trimTrailingWhitespace -> 勾选复选框

打开调试日志

  • 运行 F1 > Preferences: Configure Runtime Arguments > 回车
  • 在文件 argv.json 中添加 "log-level": "trace"
  • 重启 vscode：关闭所有 vscode 代码窗口，然后打开一个新的 vscode 窗口
  • 运行 F1 > Output: Focus on Output View 或点击菜单 View > Output
  • 下新窗口中，右上角，选择 Extension Host channel 等，可以查看对应的日志

说明：最终修改的文件是 ~/.vscode/argv.json

命令行

  • Windows
# 查看 status
code -s

# 打开文件夹
code .
  • Mac
code --help

# 查看 status
code status

# 打开文件夹
open . -a Visual\ Studio\ Code

# 打开文件夹，忽略 ssl cert 验证
code . --ignore-certificate-errors

Task

VSCode Task 用来实现任务自动化

  • 运行 ctrl/command + shift + p 选中对应的 tasks 就能执行
  • 使用参考
{
  "label": "名字",  // 界面上展示的Task标签
  "type": "shell",  // 进程 process or 终端 shell
  "command": "echo hello world",  // 执行的命令
  "args": [],  // 命令参数
  "options": {  // 运行选项，cwd（当前工作目录）、env（环境变量）和shell的值
      "cwd": "${workspaceFolder}/hack"
  },
  "dependsOn":[],  // 运行顺序
  "presentation": {  // 其他选项
      "echo": true,  // 输出
      "reveal": "always",  // 控制集成终端是否显示，always、never、silent
      "focus": true,  // 是否获得焦点
      "panel": "shared",  // 共享输出结果，shared：共享终端、dedicated 专用的终端、new 创建新的终端
      "showReuseMessage": true,  // Task在运行前，是否清除终端的输出
      "clear": false  // 运行前清屏
  }
}

Golang 使用

  • go test 使用
  • VScode golang run test 时，设置方式环境变量，参考：
    • Settings -> Extensions -> Go 中配置，如
      • go.testTimeout/go.testEnvFile/go.testEnvVars
      • python.envFile
    • 也可以通过 .vscode/settings.json 指定环境变量（运行测试用例时，自动注入的环境变量）：
{
  "go.testEnvVars": [
    "key1": "value1",
    "key2": "value2"
  ]
}
  • vscode 安装 golang 插件后，可以直接生成测试用例，参考 gotests
    • 选择方法右键：Go: Generate Unit Tests For Function/File
    • ctl + shift + p 输入：> Python: Select Interpreter
  • gopls 是vscode-go的自动补全工具，可以在settings.json中配置，如源码提示等

Python

  • 选择编译器：ctl + shift + p 输入：> Go: Generate Unit Tests For Function/File

launch.json 指定程序入口

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch",
      "type": "go",
      "request": "launch",
      "mode": "auto",  // debug
      // "remotePath": "",
      // "port": 2345,
      // "host": "127.0.0.1",
      "program": "${workspaceFolder}/main.go",
      "cwd": "${workspaceFolder}",
      "args": [],
      "showLog": true
      "env": {
          "GOPATH":"/home/xiexianbin/.golang/dev"
      },
    }
  ]
}

说明：

  • program 参数：
    • ${workspaceFolder} 工作区文件夹的根路径
    • "${fileDirname}" 表示当前文件

Snippet 代码片段

Snippet（代码段） 本质是模板，解决重复代码反复输入问题

新代码片段方式：

  • 轮子 -> User Snippets -> New Snippets for xxx ...

  • Code -> Preferences -> Configure User Snippets -> xxx

  • cmd + shift + p

  • 代码示例，项目级别的在 .vscode/xxx.code-snippets

{
	"code": {
		"scope": "markdown",
		"prefix": "code",
		"body": [
			"```",
			"$1",
			"```"
		],
		"description": "code"
	},
}

参数说明：

  • scope 代码片段语言
    • 常用的有 javascript,typescript,html,css,vue,vue-html, json,markdown等
    • 多个使用 , 分隔
    • "" 表示所有文件都生效
  • prefix 前缀，代码片段名称，输入此名字时调用定义的代码片段
  • body 一个数组，模板的主体内容，每一行一个字符串
  • description 描述
  • $1 生成代码后光标的初始位置
    • 支持多个，按tab键可以在按照定义的顺序切换
    • $2, $3, ..., $n
    • $0 结束位置
  • ${1: placeholders} 生成代码后光标的初始位置
    • 1 表示光标开始的序号，字符表示生成代码后光标会直接选中字符
  • \t 制表符
  • \n 换行
  • ${1|one,two,three|} 占位符(Placeholders) 可以有多选值
    • 使用 , 分隔，选项的开始和结束用管道符号(|)将选项包含
    • 当插入代码片段，选择 制表位(Tabstops) 会列出所有选项
  • 常用变量
CURRENT_YEAR 当前年(四位数)
CURRENT_MONTH 当前月
CURRENT_DATE 当前日
CURRENT_DAY_NAME_SHORT 当天的短名称（Mon）
CURRENT_HOUR 当前小时
CURRENT_MINUTE 当前分钟
CURRENT_SECOND 当前秒

TM_SELECTED_TEXT 当前选定的文本或空字符串
TM_CURRENT_LINE 当前行的内容
TM_CURRENT_WORD 光标下的单词的内容或空字符串
TM_LINE_INDEX 基于零索引的行号
TM_LINE_NUMBER 基于一索引的行号
TM_FILENAME 当前文档的文件名
TM_FILENAME_BASE 当前文档的文件名（不含后缀名）
TM_DIRECTORY 当前文档的目录
RELATIVE_FILEPATH 当前文件的相对目录
TM_FILEPATH 当前文档的完整文件路径
CLIPBOARD 剪切板里的内容

RANDOM 6位随机10进制数
RANDOM_HEX 6位16进制数
UUID 一个版本4的UUID

BLOCK_COMMENT_START 块注释开始标识，如 PHP /* 或 HTML <!--
BLOCK_COMMENT_END 块注释结束标识，如 PHP */ 或 HTML -->
LINE_COMMENT 行注释，如 PHP // 或 HTML <!-- -->

插件

https://marketplace.visualstudio.com/vscode

常用的插件：

  • autoDocstring
    • ctrl+shift+2 可以插入 python 注释
  • Bookmarks
  • Draw.io Integration : 编辑 .drawio, .dio, .drawio.svg or .drawio.png
  • vscode-drawio
  • EditorConfig
  • ms-vscode.remote-server : 远程开发利器
  • humao.rest-client : REST API Client
  • zaaack.markdown-editor 像 typora 一样所见即所得的编辑 markdown 文件，表格开发十分方便
  • code-eol : 显示换行符 \n, \r\n, and \r
    • LF 下箭头
    • CRLF 先下后左箭头
  • Github Copilot ai 插件
  • mgesbert.indent-nested-dictionary 缩进 JSON 和 Python 字典
    • > Indent Nested Dictionary
  • ms-vscode-remote.remote-containers 链接本地容器
  • remote-tunnels 内网穿透隧道
  • ms-toolsai.jupyter
  • markdown-spellcheck 通过 .spelling 文件检查拼写
  • markdownlint 配置参考
  • golangci-lint
  • clang-format 格式化工具

离线安装

  • 上传方式

Code/File -> Preferences -> EXTENGIONS -> 左侧栏目右上角按钮 -> Install from VSIX...

  • 命令行方式
  1. 访问 https://marketplace.visualstudio.com/vscode
  2. 搜索插件
  3. 进入插件详情页，点击 Download Extension 下载
  4. 将插件发到 vscode 的安装目录，如：C:\Microsoft VS Code\
  5. cmd 中执行安装
code --install-extension <abc>.vsix

远程容器或Linux开发

常用插件：

  • Remote-SSH: ms-vscode.remote-server
  • Dev Containers: ms-vscode-remote.remote-containers

使用 Vscode 连接 Linux/容器时的动作：

  • 在Linux/容器内，链接到 https://update.code.visualstudio.com/ 下载 node-server 安装包
    • 下载的命令：wget --tries=1 --connect-timeout=7 --dns-timeout=7 -nv -O vscode-server.tar.gz https://update.code.visualstudio.com/commit:3c4e3df9e89829dce27b7b5c24508306b151f30d/server-linux-x64/stable
    • 在Linux/容器中的日志目录：~/.vscode-server/data/logs
    • 查看链接 cd ~/.vscode-server/ grep "update.code.visualstudio.com" -r .
    • 查看链接到外网情况 sudo ss -tnp | grep code
  • 若被链接的Linux/容器不能上网，会在 vscode 的节点下载安装包
    • 显示的日志 Setting up SSH Host xxx: Downloading VS Code Server locally
    • 缓存的目录 /tmp/vsch-xiexianbin/serverCache/3c4e3df9e89829dce27b7b5c24508306b151f30d/vscode-server-linux-x64.tar.gz

vsode 节点手动下载 vscode-server-linux-x64.tar.gz 脚本：

serverCachePath="/tmp/vsch-`whoami`/serverCache/`code -v | sed -n '2p'`/" url="https://vscode.cdn.azure.cn/stable/`code -v | sed -n '2p'`/vscode-server-linux-x64.tar.gz"
wget -O ${serverCachePath}/vscode-server-linux-x64.tar.gz $url

vscode-server 安装包手动下载

PS：以下部分，可以通过 OpenResty 缓存update.code.visualstudio.com的下载包到本地，实现加速下载。

主要介绍配置服务器端，第一次远程时会默认在服务器创建 ~/.vscode-server (正式版)或 ~/.vscode-server-insiders (insider)目录，登录服务器端，执行如下命令获取 commit-id（github Release Tag commit-id）：

$ ll ~/.vscode-server/bin/
total 4
drwxr-xr-x 6 root root 4096 Apr 28 11:28 3c4e3df9e89829dce27b7b5c24508306b151f30d  # 获取commit:id
  • stable 插件下载地址
https://update.code.visualstudio.com/commit:<ID>/server-linux-x64/stable
  • insider 插件下载地址
https://update.code.visualstudio.com/commit:<ID>/server-linux-x64/insider

vscode 插件国内加速：使用 vscode.cdn.azure.cn 取代 az764295.vo.msecnd.net

wget https://vscode.cdn.azure.cn/stable/<commit-id>/<vscode-server-linux-x64.tar.gz>

示例下载地址：

https://update.code.visualstudio.com/commit:3c4e3df9e89829dce27b7b5c24508306b151f30d/server-linux-x64/stable

解析文件到服务器端 ~/.vscode-server/bin/3c4e3df9e89829dce27b7b5c24508306b151f30d/ 中：

tar -zxvf vscode-server-linux-x64.tar.gz -C /tmp
mv /tmp/vscode-server-linux-x64/* ~/.vscode-server/bin/3c4e3df9e89829dce27b7b5c24508306b151f30d/

然后重新使用 remote-ssh 登录服务器即可正常使用。

remote-ssh 默认安装插件

settings.json

  "remote.SSH.defaultExtensions": [
    "ms-python.python"
  ],

变种

F&Q

remote-ssh git cli

  • 使用 Remote-SSH 插件，vscode报错：
> You seem to have git 1.8.3.1 installed. Code works best with git >= 2
  • 解决方式

安装最新版本的 git，CentOS 参考git 客户端安装最新的版本

XHR failed

错误日志：

error while fetching extensions.XHR failed

链接网络错误，一般由于网络代理导致，可以编辑 settings.json 中 http_proxy/https_proxy 参数

最近更新
相关文章
最新评论
Home Archives Categories Tags Statistics
本文总阅读量 次 本站总访问量 次 本站总访客数 人