建立自己的Mac工作站-VSCode设置篇
1. 本文的优势
尽管是也为了自己做整理，但是写文章之前，我还是问了自己这样一个问题：论坛上有很多VSCode相关配置，为什么要重复造个轮子？本文希望避免像论坛中大部分文章一样单讲VSCode快捷键或者插件，而是从“我们对VSCode的功能需求”入手，在每个功能分类上对相应的VSCode的配置、快捷键和插件进行归类整理，并改为自己的快捷键。这么做会有两个好处：
- 方便读者快速找到自己需要的部分，查漏补缺
- 增强记忆，不容易忘——用不出来的快捷键等于没有快捷键
- 易修订——后续有需要更新或者新增的项，直接更新在相应的需求分类中即可
废话不多说，马上开始。
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开发上提供一点帮助。
转载自:https://juejin.cn/post/6872135890626412552