快捷键

Command + K, Command + S // 打开vscode快捷键列表
Command + Shift + P // 打开vscode命令行面板

全局

Control + R // 切换项目
Command + P // 打开文件
Command + Shift + N // 同时打开另一个IDE
Command + Shift + F // 全局查找
Command + Shift + H // 全局替换
复制代码

基本

Option + Shift + Down // 复制改行到下一行
Command + Shift + K // 删除当前行
Command + Enter // 切换到下一行行首
Command + Left/Right // 跳转到改行行首/行尾
Command + K, Command + 0/4 // 折叠全部/部分代码
Command + K, Command + J // 展开全部代码
Command + / // 注释当前行/空白行添加注释
Option + Shift + A // 添加块状注释(不会注释当前行)
复制代码

多光标与选择

Option + 点击多处 // 出现多光标
复制代码

查找替换

Command + F // 查找
Command + Option + F // 替换
Command + G // 跳转到下一个查找项位置
Command + Shift + G // 跳转到上一个查找项位置
复制代码

进阶

Option + Shift + F // 格式化
复制代码

导航

Ctrl + G // 跳转至某行
Ctrl + - // 后退
Ctrl + Shift + - // 前进
复制代码

编辑器管理

Command + \ // 编辑器分屏
Command + 数字 // 切换分屏
Ctrl + 数字 // 切换一个编辑器下不同文件
复制代码

文件管理

Command + K, Command + W // 关闭所有文件
Command + O // 打开finder新文件
复制代码

显示

Ctrl + Shift + G // git,显示更改文件差异
Ctrl + Shift + V // markdown文件预览
复制代码

调试

Ctrl + Shift + D // 打开调试
复制代码

终端

Ctrl + ` // 打开终端
复制代码

插件

VSCode最有特色的就是丰富多彩的插件库

change-case

Quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word
快速改变当前选中或者单词的显示样式(驼峰,常量,下划线等等)

用法:

1. 选中单词
2. Command + Shift + P 打开命令面板
3. 输入commands即可查看所有样式预览

总结:
常量很好用,可以用来给vuex里面store的mutations,actions作为派发任务名。

chinese language

vscode中文化

用法:

1. Command + Shift + P 命令行输入language
2. 在locale.json中配置"locale":"zh-CN"

code runner

运行不同语言的代码

快捷键:

Option + Control + N // 当前代码跑起来
Option + Control + M // 中止执行
复制代码

colorInfo

在颜色代码悬停时,显示颜色面板

用法:

// settings.json
"colorInfo.excludedFields": ["cmyk","alpha",
],
复制代码

CSSPeak

方便的找到文件中元素的样式定义 由于mac没有f12,故现在只用Command+点击跳转来查看

ESLint

这个不用多说,后续会进一步完善

HTML Boilerplate

html模板生成器

HTML Snippets

this extension adds rich language support for the HTML Markup to VS Code
提供了大量对html标记语言的支持

div + Tab ==> 

复制代码

Icon Fonts

可以方便使用cdn+内置字体图标库实现一些常用字体图标 用法:

cdnjs + 字体图标库 + Tab // 添加字体图标外链
fa-check + Tab // 快速选择到字体图标
复制代码

这里有一个值得注意的地方,fontAwesome库不知道为什么在vscode里面快捷输入经常出现比如fab fa-cart-plus的类名,实际上却是fa fa-cart-plus

markdown all in one

vscode内置markdown编辑器

open in browser

在浏览器中打开,默认浏览器可在open-in-browser.default设置

Option + B // 在默认浏览器中打开
Option + Shift + B // 选择浏览器
复制代码

prettier

代码格式化的规范 后期会在补入

quokka.js

一个时时校验js代码逻辑的利器,PRO版需付费购买

快捷键:

Command + K, Q // 开启quokka模式
Command + K, S // 关闭
复制代码

Regex Previewer

一个时时检查正则校验的工具,开启右侧面板

快捷键:

Option + Command + M // 还可以手点test regex 
复制代码

SVG Viewer

svg预览 后续关于图片等的知识会再补充

TODO Highlight

通过在注释中添加FIXME:/TODO:可以给代码添加标记,防止上线前有忘记修改的地方

指令:

list highlighted annotations 
复制代码

vscode ele jump

元素跳转

vutur

使用vue必装

vue2 snippets

vue代码快捷方式,必装