# vscode 使用指南

vscode 编辑器使用经验

# 概述

笔者讲解 mac 环境下 vscode 的使用配置。

# 界面结构

使用 spotligh 开启 vscode.基本界面显示如下

包含如下几块

• Editor 编辑区,可以横向或纵向打开多个窗口
• Side Bar 工作时显示对应视图
• Status Bar 工作状态条
• Activity Bar 切换视图并显示当前工作文件状态
• Panels 额外的面板,显示调试,终端等信息

# 基础配置

# 配置主题

⌘K ⌘T 选择 Monokai Dimmed 主题

你可以下载如下插件美化主题:

• Material Theme 设定主题

  尤大使用的是 Palenight 主题

• Material Icon Theme 主题对应的图标,你也可以选择 vscode icon

# 配置 code 命令

1. ⌘⇧p 打开命令行面板
2. 所有 shell command install 执行此命令
3. 该命令会在环境变量创建 code 命令行工具

示例如下:

# 打开工程
code .
# 在最近窗口打开工程
code -r .
# 创建一个新窗口
code -n 
# 更换本地语言
code --local=es
# 比较文件差异
code -d <file1> <file2>
# 打开文件并定向到指定行
code -g package.json:10:5
# 查看帮助信息
code --help
# 才 vscode 输出当前命令结果
ls | code -r -

# 禁用所有插件,并打开当前目录
code --disable-extensions .

更详细的使用参见 vscode

# 终端设置

默认 mac 终端下,alt 键无法触发 shell 的多种快捷键, 而是会输出特殊字符.配置如下

1. ⌘, 打开配置
2. 搜索 terminal.integrated.macOptionIsMeta 设置为 true 即可

出处参见: https://github.com/Microsoft/vscode/issues/11314#issuecomment-384067528

# 快捷键

# 面板切换

• ⌘⇧e 文件夹窗口
• ⌘⇧f 全局搜索
• ⌘⇧g 版本控制界面
• ⌘⇧d 调试界面
• ⌘⇧x 插件界面

# 视窗控制

• ⌘b 显示和隐藏 Side Bar
• ⌘\ 纵向分屏
• ⌘w 切换窗口
• ⌘m 开启 zen 模式编辑文档,详见 zen mode

  默认快捷键为 ⌘k 无法工作,请自行修改

• ⌘p 在已添加的目录中快速打开文件

  结合 ? 获取 vscode 支持的相关命令帮助

• ⌘p⇧ 利用方式运行 vscode 函数
• ⌃tab 窗口切换,利用 shift 方向切换

# 导航控制

• ⌘o 打开文件对应的 finder
• ⌘⇧o 打开文件符号链接列表
• ⌘t 显示所有打开文件符号链接列表
• ⌘p 打开文件列表
• ⌘g 定向到特定行
• f12 显示引用的位置
• ⇧f12 显示所有引用的位置

# 光标操作

• ⌥→ 单词后
• ⌥← 单词前
• ⌘→,⌃e 行尾
• ⌘←,⌃a 行头
• ⌘↑ 开头
• ⌘↓ 结尾
• ⌘⇧\ 代码块开头,结尾来回触发
• ⌘[ 向前缩进
• ⌘] 向后缩进
• ⌘u 向后跳转光标位置

  注意该操作不能跨文件执行

• ⌃- 向前切换光标位置

  该操作可以跨文件执行

• ⌃⇧- 向前移动光标位置

# 其他快捷键

• f2 选择变量名或者函数名,按该快捷键会重构所有使用该函数或变量的命名
• ⌘⌥[ 折叠片段
• ⌘⌥] 展开片段

# 配置

vscode 配置分为如下几种

• User Settings 用户配置,全局作用范围
• Workspace Settings 作用于当前工程
• Directory Settings` 作用于当前目录 详细的配置参见 config
• files.exclude 配置 sidebar 忽略显示的文件和目录,参见 Explorer tips
• terminal.integrated.shell.osx 设定 mac 使用的 shell 建议配置为 zsh

# 调试

# node 调试

# 更改语言高亮

1. 使用 ⌘K M 打开语言面板,选择对应语言.

# 更换主题

1. 使用 ⌘K ⌘T 打开主题面板
2. 选择对应主题

# 安装扩展

1. 使用 ⇧⌘X 打开扩展
2. 查找并安装扩展

# 开发自定义扩展ld

详见 扩展开发 

# 代码片段

⌘⇧p 搜索 config snippets 设置代码片段,使用详见 代码片段

# 设置识别 npmrc 文件

由于 npmrc 格式和 ini 文件类似,采用如下方式识别 npmrc 文件

1. ⌘, 打开配置
2. 搜索 associations
3. 添加如下配置

   "files.associations": {
   	".npmrc":"ini"
   },
   

# 插件

# live server

使用 live server 实现修改实时同步到浏览器。

• ⌘l⌘o 在浏览器打开 live server

# bugs

# 在输入中英文时,有时会出现不显示的 0x08 非法字符

详见 vscode控制字符引起的问题以及解决思路.参考上述博文配置 "editor.renderControlCharacters": true 配置后特殊字符会显示为bs.这样在编辑时即可手动删掉 0x08 等不显示字符

# 参考资料

• [ ] todo 工具的学习
• vscode
• vscode can do
• vscode 编辑器
• [ ] 插件推荐 https://www.jonrcorbin.com/the-best-vs-code-extension-list-for-full-stack-developers/