vscode-tips - 开发环境初始化配置

1. VsCode 在 vim 下中文插入中文标签【】补全，光标位置错误问题

处理方式: 取消 mac 下的搜狗拼音配置下 - 中文标点配对

PS. VsCode 自动括号补齐: “Auto Closing Brackets” 开关

2. VsCode 下 vim 适配 mac 的.vimrc配置

2.1. vim 移动

参考: https://cloud.tencent.com/developer/article/1672272

2.2. vscode vim

参考: https://github.com/VSCodeVim/Vim#mac

参考：https://zhuanlan.zhihu.com/p/430603620

实际的配置，我直接用了默认的.vimrc配置

1
2

// vim
"vim.vimrc.enable": true,

2.3. mac ~/.vimrc 配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

"setting .vimrc
syntax enable
"filetype plugin indent on

set nocompatible
set tabstop=4       " Size of a hard tabstop (ts)
set shiftwidth=4    " Size of an indentation (sw)
set expandtab       " Always uses spaces instead of tab characters (et)
set softtabstop=4   " Number of spaces a <Tab> counts for. When 0, featuer is off (sts).
set autoindent      " Copy indent from current line when starting a new line.
set smarttab        " Inserts blanks on a <Tab> key (as per sw, ts and sts).
set hls

" 解决删除键异常问题
set backspace=indent,eol,start

" 行首/行尾, 前/后/上/下光标移动
inoremap <C-A> <Esc>0i
inoremap <C-E> <Esc>$a
inoremap <C-F> <Right>
inoremap <C-B> <Left>
inoremap <C-N> <Down>
inoremap <C-P> <Up>
inoremap <C-D> <Del>

2.4. mac defaults

帮助文档 : defaults help

Set preferences, the macOS user defaults system works with both the OS and with individual applications.

参考: https://ss64.com/osx/defaults.html

3. 很棒的字体配置

3.1. 编辑器字体配置

参考: https://github.com/microsoft/cascadia-code

安装:

1. 下载: https://github.com/microsoft/cascadia-code/releases，解压后选择ttf下任意一个.ttf文件，比如CascadiaCode.ttf双击安装
2. 打开 VSCODE 配置，我是直接通过ctrl+shift+p输入加入自己喜欢的字体就 OK 了（按照最前的优先），比如我选择了CascadiaCode-Regular字体，其他都是调整过的

ps.

• CascadiaCode-Regular: cascadia-code 字体(推荐)
• HannotateSC-W5: 默认苹果支持
• Meslo LG M for Powerline: 特殊字符支持

1

"editor.fontFamily": "CascadiaCode-Regular,HannotateSC-W5,PingFangSC-Regular,PingFangSC-Medium,HanziPenSC-W5,HannotateSC-W7,TencentSansW3,Meslo LG M for Powerline",

3.2. Terminal 字体控制

1

"terminal.integrated.fontFamily": "monospace, Meslo LG M for Powerline",

4. Mac 在 VSCODE 下的 zsh 工具命令行乱码问题

vscode 包括编辑器和Terminal两部分的字体配置，zsh 的一些 git 样式包含一些特殊字符，依赖特定的字库，缺失的时候就会展示乱码：

比如我配置了特殊字符 ，依赖字体Meslo LG M for Powerline ，因此要正常展示这个字符的话，需要在字体里面加上对应的字符集：

vscode 可以通过cmd+,，选择字体monospace, Menlo, Meslo LG M for Powerline列表作为第一个字体名称

5. vscode 插件

5.1. PlantUml 插件

利用快捷键alt+D支持预览，这里支持远程/本地渲染，后面有时间可以搞下:

A plantuml server. See Use PlantUML Server as render.

Requirements for Local render It’s necessary to have following installed:

Java : Platform for PlantUML running. Graphviz : PlantUML requires it to calculate positions in diagram.

5.2. vim 插件

快捷中配置中的关键字: extension.vim

5.3. markdown 插件

• markdown all in one: 支持序号等功能
• markdown shortcuts: 快捷键

5.4. git 插件

• git graph
• git history

5.5. theme

关键词theme

6. 快捷键

6.1. vscode 快捷键

• cmd+shift+p: 快速查询内容
  • theme: 样式设置，现在用的是One Dark Pro
  • keyboard: 快捷键设置
  • number: 配合 markdown, 快速插入序号
  • setting.json: vscode json 配置文件

6.2. keyboard

vim插件可以支持: keybinding 和 when 两个属性, when 用于指定在何时使用快捷键

• 比如关键词: editorTextFocus && vim.active && vim.use<C-d> && !inDebugRepl && vim.mode != 'Insert', 其中的vim.mode可以很好的区分插入/命令行/视图模式，这样可以解决与 VSCODE 默认快捷键冲突的问题

6.3. format 指定类型的文件

安装一个prettier-code formatter插件，配合cmd+shift+f快捷键，支持快速格式化操作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

...
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
...