建立自己的Mac工作站-VSCode设置篇

5,964 阅读7分钟

1. 本文的优势

尽管是也为了自己做整理,但是写文章之前,我还是问了自己这样一个问题:论坛上有很多VSCode相关配置,为什么要重复造个轮子?本文希望避免像论坛中大部分文章一样单讲VSCode快捷键或者插件,而是从“我们对VSCode的功能需求”入手,在每个功能分类上对相应的VSCode的配置、快捷键和插件进行归类整理,并改为自己的快捷键。这么做会有两个好处:

  • 方便读者快速找到自己需要的部分,查漏补缺
  • 增强记忆,不容易忘——用不出来的快捷键等于没有快捷键
  • 易修订——后续有需要更新或者新增的项,直接更新在相应的需求分类中即可

注意:本文中的快捷键均针对Mac系统,非Mac可以参照《VSCode常用快捷键大全》,可以根据本文的2.3部分自行寻找&设置快捷键

废话不多说,马上开始。

2. 功能需求

2.1 代码规范&代码格式化

配置涉及:VSCode setting设置/EditorConfig插件/Pretter插件

在不同的项目中保持统一的代码规范&结构,和不同的开发者保持同样的代码规范一直是一个很必须的操作。Pretter插件定义了一个通用的代码规范(想深入了解可以看《Prettier看这一篇就行了》),EditorConfig插件定义了某个项目的规范(在项目根目录下生成.editorconfig配置文件),这样即使这个项目以后被其他人开发,他也需要按照这个规范来写代码。

要实现一个“统一方便”的规范,除了安装插件之外,我们还需要在Setting中设置一下:

  • 在Setting文件中进行如下设置,用来设置Pretter
 // 保存时自动格式化
 "editor.formatOnSave": true,
 // 格式化时使用prettier来格式化
 "editor.defaultFormatter": "esbenp.prettier-vscode",

尽管已经设置了保存文件自动格式化,你也可以使用Shift + Option + F来手动格式化

  • 在Setting文件中进行如下配置,用来设置EditorConfig
// 保存文件时在文件末尾插入一个新行
"files.insertFinalNewline": true,
// 保存文件时删除文件末尾的空格
"files.trimTrailingWhitespace": true,
// tab算2个空格
"editor.tabSize": 2,
// 默认换行字符是lf
"files.eol": "\n",

选中项目根目录,右键,然后选择Generate .editorconfig即可生成相应配置文件。

2.2 代码快速选中

配置涉及:VSCode 快捷键设置/Quick and Simple Text Selection插件

完成了代码规范之后,我们可以进行代码的开发了。这个过程中要频繁选中/调整某些代码。VSCode有默认的选中单词的快捷键,我们可以用Quick and Simple Text Selection来增强这一功能,让我们来快速选中单引号/双引号/冒号/括号中间的部分。

  • 选中单个单词:Command + D,多次点按可以向下找同样的单词并选中
  • 选中多个单词:Command + SHIFT + L
  • 选中某个符号之间的部分:Command + K + 符号,建议根据2.3将快捷键改为Command + 符号

2.3 显示快捷键&改快捷键

配置涉及:VSCode 快捷键设置

还没装几个插件呢,插件的快捷键就相互冲突了,这时候就需要将快捷键改成自己方便的键位。如何设置呢?

  • Code -> Preference -> 键盘快捷方式可以打开快捷键设置界面,使用快捷键Command + K + Commmand + S也能打开这个页面。在这个界面上,我们可以看到所有已经设置好的快捷键。

我们可以打开插件的Contribute项,找到命令的名称,把命令的名称粘贴到快捷键的搜索框中,然后双击搜索出的命令,就可以给它设置快捷键了。

也可以直接通过快捷键搜命令,只需要打入相应的快捷键名字即可: Command -> cmd或者command; Option -> alt; Shift->shift

2.4 代码位置定位&调整

配置涉及:VSCode 快捷键设置/Bookmarks插件

日常开发中经常要用到代码复制、移动等操作。VSCode有默认的行处理快捷键:

  • 上下行位置切换:Option + Up/Down
  • 在当前行上下复制当前行:Shift + Option + Up/Down
  • 删除当前行:Command + Shift + K,建议改为Shift + Option + Backspace

除了默认的快捷键设置,还可以用Bookmarks定义一些代码中重要的位置,并在这些位置中快速的移动。

  • 添加/删除一个书签:Opthion + Command + K,建议改为Option + K
  • 跳转到下一个书签:Opthion + Command + L,建议改为Option + L
  • 跳转到上一个书签:Opthion + Command + J,建议改为Option + J

当然,你可以在侧边栏查看所有书签并取消它们。

2.4 单词正确性&单词提示

配置涉及:Code spell Checker插件

我这周还刚犯了个错,第一次拼写publish的时候可能是打快了,写成了pulish,导致我的方法怎么也调不通了。其实英文作为字母拼接的语言,还是很需要这样一个单词拼写检查的。Code spell Checker会自动检查你的代码,对所有不在词典中的代码底下加上蓝色的波浪线。

使用快捷键可以快速将自定义的单词加入到词典中。

  • 添加单词至用户词典:没有默认快捷键,只能hover后选快速修复,建议改为Command + W

2.5 快速console

配置涉及:Turbo Console Log插件

代码中不可避免的要进行调试,调试就要写console.log。尽管我们已经有了一些代码快速提醒能力,比如说输入log就能打出console.log,但是console.log中的内容往往还需要我们自定义。这时候Turbo Console Log就非常适合懒人了。

  • 快速生成当前选中词的log:Control + Option + L,建议改为Shift + Option + L
  • 注释所有log:Shift + Option + C
  • 清除所有log的注释:Shift + Option + U
  • 删除所有log:Shift + Option + D

2.6 代码对齐

配置涉及:VSCode 快捷键设置/Bracket Pair Colorizer 2插件/Auto Rename Tag插件

很多时候代码写的很长的时候需要把一些代码块快速收起来,或者希望知道某个代码块对应的括号,或者是同时改动Tag的开始和结束标签的名字——这些代码对齐的操作就是本部分的内容。

VSCode有默认的展开/收起操作:

  • 收起单元格:Shift + Command + [
  • 展开单元格:Shift + Command + ]

使用Bracket Pair Colorizer 2能让对应的括号有不同的颜色:

使用Auto Rename Tag可以快速同时修改tag的名字:

2.7 颜色适配

*配置涉及:Beautiful UI/color-highlight

没什么好说的,Beautiful UI可以设置UI主题,我用的是Material Darker,颜色还是很艳丽的。

color-highlight给你的CSS高亮颜色部分。

2.8 Git操作

配置涉及:GitLens插件

Git增强,功能很多,主要是快速看到作者的身份,并进行不同版本代码比较。

3. 总结

单纯的装上插件,不设置自动生效,或者不使用快捷键并没有太大的意义。本文中根据不同的情况,将不同的插件/配置分类整理到一起,在尽可能保持默认按键的基础上,将快捷键分类如下,方便了记忆和使用。当然,每个人的习惯是不一样的。完全可以根据自己的喜好去设置。

  • 选中/添加单词:Command
  • 位置切换/快速console:Option,Shift + Option
  • 代码对齐:Shift + Command

希望通过本文的VSCode设置,能给大家在用VSCode开发上提供一点帮助。

本文使用 mdnice 排版