总结了一些平时经常使用且好用的 VS Code 的插件和编辑技巧分享出来。html
文章详情可查阅个人博客：lishaoy.net ，欢迎你们访问。vue
外观
主题
这里我分享两款主题：react
效果如图：git
Material Theme
效果如图：github
An Old Hope Theme
图标
- Material Icon Theme 固然，这两款主题的文件管理器（左侧）的 icon 小图标使用的是 Material Icon Theme
字体及其余
其余和外观相关的设置以下：web
{
"editor.multiCursorModifier": "ctrlCmd", "editor.formatOnPaste": false, "workbench.activityBar.visible": false, "workbench.iconTheme": "eq-material-theme-icons-darker", "workbench.colorCustomizations": {}, "materialTheme.cache.workbench.settings": { "themeColours": "Darker", "accentPrevious": "Acid Lime" }, "workbench.colorTheme": "Material Theme Darker", "material-icon-theme.angular.iconsEnabled": true, "material-icon-theme.folders.icons": "specific", "editor.lineHeight": 24, "editor.fontLigatures": true, "editor.fontFamily": "FiraCode-Medium" } 复制代码
特别注意的是 "editor.lineHeight": 24, 和 "editor.fontFamily": "FiraCode-Medium" 。typescript
"editor.lineHeight": 24, ： 设置代码的行间距，这里比默认的稍大些，就这一点小小的改变，让代码看起来清爽整洁。npm
"editor.fontFamily": "FiraCode-Medium" ： 设置字体，这种字体会让代码看起来更形象生动，以下json
FiraCode-Medium字体
红色竖线左边是使用了 FiraCode-Medium 字体的效果，红色竖线右边是没有使用 FiraCode-Medium 字体的效果服务器
关于 FiraCode-Medium 字体更多效果可查阅 github.com/tonsky/Fira… 地址。
代码管理
格式化
- Beautify ：格式化的时候，给出格式化文本选项，以下
Beautify
- Prettier ：我的比较喜欢这个，看起来代码更清晰，以下
Prettier
固然，你们能够自定义快捷键，也能够按 ⌘ - ⇧ - P 来搜索相关命令
代码检查
- ESLint ：检查
js语法规范，你可使用不一样的规范，如 airbnb 、standard 、google。 - TSLint ：检查
typescript语法规范。 - Stylelint ：检查
CSS/SCSS/Less语法规范。 - Markdownlint ：检查
markdown语法规范。
自动补全
如下插件点击连接能够查看gif动图，详细了解具体功能。
- Emmet ：你们应该很熟悉这个插件了（很好用），VS Code 已经内置了，很到位。
- Auto Close Tag ：自动闭合
html等标签 （</...>）。 - Auto Rename Tag ：修改
html标签时，自动修改闭合标签。 - Path Intellisense ：自动提示补全路径。
代码片断
- snippets ：搭建能够本身安装各类代码片断（vue、react、angular等），这里就不列举。
功能扩展
如下的功能扩展插件大部分都有gif动图，可点击连接了解详细功能
- Bracket Pair Colorizer ：让代码的各类括号呈现不一样的颜色。
- Code Runner ：能够在编辑器里直接运行代码，查看结果。
- Color Picker ：能够直接在编辑器里打开色板，选择各类模式的颜色。
- Document This ：能够给函数、类等自动的加上详细的注释。
- Git History ：方便的查看git版本管理的详细信息。
- Live Server ：能够一键在本地启动服务器。
- Settings Sync ：重点介绍下这个插件，若是你有两台电脑（好比，家里和公司）都使用 VS Code ，但是在公司或家里对 VS Code 安装了插件或者修改了配置，回到家或公司又要从新弄一次，这个插件就能解决问题，同步多台电脑设置。
只须要把配置上传到GitHub，在另外一个地方下载配置便可，以下
Settings Sync
编辑技巧
光标
- 把光标移到文件的首部活尾部
⌘ - ↑ 或 ⌘ - ↓
- 把光标移动到行的首部或者尾部
⌘ - ← 或 ⌘ - →
- 按单词移动
⌥ - ← 或 ⌥ - →
- 按单词大小写分解移动光标
⌥ - ⌃ - ← 或 ⌥ - ⌃ - →
选择
- 选择行以上或如下所有内容
⇧ - ⌘ - ↑ 或 ⇧ - ⌘ - ↓
- 选择到行首或行尾的内容
⇧ - ⌘ - ← 或 ⇧ - ⌘ - →
- 按字母或单词选择
- ⇧ - ← 、 ⇧ - → 按字母选择
- ⇧ - ⌥ - ← 、 ⇧ - ⌥ - → 按单词选择
⇧ - ← 、 ⇧ - → 或 ⇧ - ⌥ - ← 、 ⇧ - ⌥ - →
- 伸缩选择
⇧ - ⌃ - ⌘ - ← 或 ⇧ - ⌃ - ⌘ - →
- 选择匹配单词
⌘ - D 或 ⌘ - U
行
- 向上或向下移动行
⌥ - ↑ 或 ⌥ - ↓
- 复制或删除行
⌥ - ⇧ - ↓ 或 ⌘ - ⇧ - K
- 多行合并成一行
⌘ - J
- 缩进或伸缩行
⌘ - [ 或 ⌘ - ]
- 在当前行之上或下插入行
⌘ - ↩ 或 ⌘ - ⇧ - ↩
多行
- 鼠标点击，多行编辑
按 ⌘ 选择编辑点，按 ⎋ 退出多行编辑
⌘
- 使用快捷键多行编辑
⌘ - ⌥ - ↓ 或 ⌘ - ⌥ - ↑
- 在所选择的行的结尾插入编辑点
⇧ - ⌥ - I
- 选择栏位
按 ⇧ - ⌘ 再选择栏位
⇧ - ⌘
高级
- 查看类或方法的定义
- 按 ⌥ 点击，能够在新页面查看
- 按 ⇧ - ⌥ - ⌘ 点击，能够在新组查看
- 按 ⇧ - F12 点击，能够在当前页面查看
查看定义
- 折叠代码
⌥ - ⌘ - ] 或 ⌥ - ⌘ - [
- 去掉选择行的尾部空格
⌘ - K 、 ⌘ - X
- 定位到指定行号
⌃ - G
- 在文件里查找类或方法
@
最后，若是记不住这些快捷键，能够按 ⌘ - K 、 ⌘ - S 搜索对应快捷键绑定
搜索快捷键