VSCode使用经验

发表于 更新于
本文字数： 4.7k 阅读时长 ≈ 8 分钟

Mac和Linux下的快捷键有区别，这对啥都是痛点，而我莫名地不喜欢改掉默认的按键，所以特别痛。

骚操作和配置

这里只记录一些比较灵活，但是新手不容易想到的地方。像cmd + enter无视光标位置直接向下换行（增加 shift，向上）、cmd + option + f当前页面替换（option换成shift是全局搜索）这类比较普遍的操作就不提了。

文档操作——有效提升生产率

  • 前进/后退（搜快捷键用这俩关键词）
    1. 后退到光标历史前的位置（跨文件！）ctrl + -；Linux下是ctrl + alt + -
    2. 前进到光标历史后的位置（跨文件！）shift + ctrl + -；Linux下是ctrl + shift + -
  • 跳转到行：ctrl + g
  • 复制带格式的代码块
    1. 有时候会发现复制了之后缩进很不如人意，自己调整简直要命
    2. 出现这个问题的本质是复制源和目标源不一致，需要从源的第一行的行首，注意是行的最开始，而不是这一行第一个字符
    3. 这样整块复制下来之后，那些内部的缩进就能全部复制下来，接下来整体去通过tab或者shift + tab来调整缩进也会很正常。
  • 选中代码块：极其酷炫的功能！
    1. 左键选中代码块开始的左上角
    2. shift + 左键选中右下角。
    3. 可以利用这个操作选中多列的同一个位置，技巧是配合option按键先选末尾，再选开头。
  • 多处同时编辑
    1. 选词操作cmd + d
      • 直接操作，可以选中光标所在位置的最小单词
      • 选中某个单词后，继续使用，可以选中相同的其他单词
    2. 鼠标单击的同时按option可以让光标灵活的多选，更可以配合cmd + d，来选择性的取消一些选择！
  • 行操作
    1. 复制当前行shift + option + 方向键下
    2. 剪切当前行cmd + x，注意，光标只能停留在那行，不能选中任何文档。
    3. 删除当前行shift + cmd + k
    4. 移动行：option + ↑或者option + ↓
    5. 复制行：shift + option + ↑或者shift + option + ↓

快捷功能

  1. 通过快捷键cmd + p然后输入>号（这其实就是相当于shift + cmd + p），可以打开命令输入框，能做很多事，比如快速修改配置——举个例子，输入“空格”，可以找到“查看：切换呈现空格”，可以显示出代码里所有空格。
  2. 通过cmd + k然后cmd + s就能打开快捷键列表，可以查看和修改
  3. 预览Markdown文档shift + cmd + v
  4. 在Linux里，预览Markdown是shift + ctrl + v，这个快捷键同时可以让你在Terminal里粘贴内容。

Snipper：自定义代码片段

  1. 首选项 -> 用户代码片段

  2. 以 vue 文件为例，选择代码片段文件为 vue.json，输入：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    {
      "Vue component": {
        "prefix": "vuec",
        "body": [
          "<template>",
          "\t$1",
          "</template>",
          "<script>",
          "export default {",
          "\t",
          "}",
          "</script>",
          "<style lang=\"scss\" scoped>",
          "</style>",
          ""
        ]
      }
    }

  3. 上面的prefix就是 Snipper 的关键了，输入prefix的内容之后按TAB键就能让这个 Snipper 生效。

  4. 通过使用$1决定 Snippet 插入后光标所在位置。VSCode 支持光标的多选，如果你需要光标多选，在需要的地方写$1 即可。
  5. 凡是在开发过程中经常用的片段，都可以添加为 Snippet，能极大提升生产力。
  6. 明明不愿意改默认快捷键的我却相当喜欢这个功能

在Terminal里使用VSCode打开文件

  1. 只需要把 code 命令添加到 PATH 里，而这个配置可以让VSCode帮我们完成
  2. 通过shift + cmd + p，输入shell
  3. 找到“在 PATH 中安装 code 命令”，确定，就完成了…
  4. 从此可以在命令行里使用 code，比如code .打开当前目录；code [path]打开某个目录

用户配置

  1. code -> 首选项 -> 设置；或者cmd + ,
  2. 做法是在左边窗口找到想要修改的配置，然后复制键值对到右侧的用户设置页，并且设置自己想要的值
  3. 后来改版了，变成各种选项的设置界面。右上角有一对花括号，点击可以像以前一样直接使用JSON格式配置
  4. 推荐一个配置吧：
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
{
  // 窗口缩放调整，0是不调整，老年人推荐来个正数
  "window.zoomLevel": 1,
  // 主题
  "workbench.colorTheme": "Visual Studio Dark",
  // 窗口上方对文件的描述格式
  "window.title": "${dirty}${activeEditorLong}${separator}${rootName}${separator}${appName}",
  // 自动换行
  "editor.wordWrap": "on",
  // tab使用2个空格缩进
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  // 是否根据文件当前的内容来决定tabSize和insertSpaces
  "editor.detectIndentation": false,
  // 粘贴的时候自动格式化
  "editor.formatOnPaste": true,
  // 防止对装饰器的警告
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  // 显示隐藏的控制字符（避免文档在渲染的时候他们被渲染成奇怪的符号，比如一个问号等）
  "editor.renderControlCharacters": true,
  // 显示所有空格符（一样也是为了方便排错，有些语言、语法对空格是很敏感的）
  "editor.renderWhitespace": "all",
  // 保存文件时是否剪裁尾随空格
  "files.trimTrailingWhitespace": false,
  // 这里我改了一点，比原本的默认值少了一个连字符`-`、增加了中文输入法的逗号句号，因为前端确实有用连字符来连接单词并作为一个单体的情形（这个选项是告诉VSCode，你只把这些特殊字符认定为分割符，比如你双击某个单词，就能体会到这个功能的冰山一角）是否设置，按个人需求
  "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.，。<>/?",
  // 以下是一些插件的配置（这算带私货么？）
  // vscode-fileheader的配置
  "fileheader.Author": "Peers Chen",
  "fileheader.LastModifiedBy": "Peers Chen",
  // 插件Translator
  "translator.captureWord": true,
  // 需要自定义Terminal的患者
  "terminal.integrated.shell.osx": "zsh"
}

一些插件

Emmet

  • 许多编辑器需要手动安装插件，比如 Sublime，VSCode则是集成了不少功能，比如最常用的Emmet，其快捷键当然也是TAB。以下针对前端开发说语法
  • HTML 语法
    • >子节点
    • +兄弟节点
    • *相同元素，后面跟数字
    • .添加 class，可以链式来个一个节点生成多个 class 值
    • :添加类型，比如:p可以指定一个 input 为 password 类型，有待发掘。
  • CSS 语法
    • 短名称的属性名和值，输入属性首字母和值的首字母
    • 属性的值是数字的时候，有时候需要在数字后写单位
    • 名字较长且含有连字符-的，输入连字符前后的首字母再加值即可。
  • JavaScript 语法：之前的版本，在.vue和.jsx文件里不能很好的生效，需要额外配置emmet.includeLanguages，新版本优化了这一点。（写这篇的时候还需要手动设置，2019更新文档特更正）

vscode-fileheader

很赞的文件注释工具

  1. 需要在用户设置里覆盖一下作者名字，主要是这两个字段：fileheader.Author和fileheader.LastModifiedBy
  2. 快捷键control + option + i（win 下ctrl + alt + i）然后每次保存文件的时候，就会刷新其信息
  3. 上面推荐的用户配置里也有对应的字段

ESLint

  • 安装 ESLint 后，编写过程里，VSCode 会根据项目的 ESLint 配置对代码进行检查（因为 ESLint 插件默认是生效的）

  • 默认下不会对.vue文件生效，所以需要先安装Vetur扩展，然后给 VSCode 的配置添加：

    1
    2
    3
    4
    5
    6
    7
    8
    "eslint.validate": [
      "javascript",
      "javascriptreact",
        {
          "language": "vue",
          "autoFix": true
        }
    ]

GitLens

  1. 查锅神器，可以直接在代码边上显示变动的情况，是谁在什么时候做了什么修改都一清二楚。
  2. 缺点，会导致时不时出现水平滚动条（因为是相当于直接增加了行的内容），所以平时最好禁用。

document this

一个函数注释工具

  1. 懒人福音，快捷键control + option + d连续按2次（win 下为ctrl + alt + d）
  2. 其实 VSCode 已经自带了：在函数上方输入/**回车就行，配置更多，但是都需要自己手写。
  3. 这个插件支持的情况很有限，比如.vue 的文件就不支持。
  4. Linux下他的快捷键和默认快捷键有冲突。见仁见智吧。

TODO Highlight

  1. 对英文输入法大写的标识有醒目的高亮表示
    • TODO:代表此处有功能待编写
    • FIXME:代表此处有代码需要修复（有错误或者不能工作）
  2. 使用方式：
    • 可以通过命令：toggle highligt来显示/隐藏高亮
    • 可以通过命令：list highlighted annotations来罗列当前 VSCode 打开的项目里的所有这些标识。
  3. 这个习惯可能是 eclips 这个 ide 开始的？在 Eclipse 中，TODO、FIXME 和 XXX 都会被 Eclipse 的 task 视图所收集。在项目发布前，检查一下 task 视图是一个很好的习惯。此外，在 Eclipse 中，我们可自定义自己的特殊注释标签。