使用 vscode 实现写代码双手不用离开键盘

一、shell code 操作
首先从 vscode 中安装 code 命令:打开命令面板(shift+command+P)输入 shell code 会展示下图中的选项:


选择 在 PATH 中 安装 “code” 命令 ,就可以在命令行中使用 code 命令了,可以使用 code -h 查看可选命令

下面介绍几个常用的命令:

  1. code . 从新的 window 中打开当前目录;也可以配合 -r 命令在上一个 window 中打开当前目录,注意 -r 会覆盖上一个 window 已经打开的目录
  2. code -d 对比两个文件,例如在 shell 中输入 code -r -d a.txt b.txt,来对比 a.txt 和 b.txt 的内容
  3. * | code -,code 命令还可以接受来自管道中的数据,例如在 shell 中输入 ll | code -,就会将 ll 命令的结果在 vscode 以文件的形式打开
  4. code -g 打开某一个文件并定位到指定行,例如在 shell 中输入 code -r -g package.json:15,来打开当前目录中的 package.json 文件并定位到第15行
  5. code -w 命令会一直等待打开的文件被关闭后才会结束

二、快捷键操作之移动光标

  1. option + 左右方向键,跳转到一个单词的首或尾
  2. command + 左右方向键,跳转到一行的首或尾
  3. command + shift + 上下方向键,选中当前光标位置到文始或文末位置
  4. command + shift + 9,选择括号中的内容,这个我自己的自定义快捷键,可自行修改
  5. command + option + \,在一对括号始末进行跳转
  6. control + -,移动到上次操作时的光标位置,配合 f12 做快捷查看变量或者函数定义很方便!
  7. ctrl + g,跳转到指定行

三、快捷键之行操作

  1. shift + control + k,删除当前代码行,这个快捷键对应的配置名称是"删除行",大家可以自己配置自定义快捷键
  2. command + x,剪切当前行,注意直接把光标移动到需要剪切的行,不要选中任何字符
  3. command + shift + d,复制当前行
  4. command + enter,从当前行的下面开始新一行,不管光标是当前行的任意位置,都可以直接跳转到下面的新行
  5. command + shift + enter,从当前行的上面开始新一行,特点同上
  6. command + control + 上下方向键,移动当前行

四、快捷键之其他常用
1、option + shift + a,块注释代码
2、command + shift + f,在全局搜索光标选中的字符
3、command + f,搜索字符,这里要强调的是,如果你想搜索光标所在的字符,不需要选中该字符,直接将光标定位到该字符然后直接使用快捷键,默认就是搜索当前光标所在的单词,这个细节看似很简单,但是习惯之后可以节省很多时间

  1. command + g,配合上面的"搜索字符"操作,用来跳转到下一个匹配项
  2. command +shift + g,配合上面的"搜索字符"操作,用来跳转到上一个匹配项
  3. command + p,快速打开某一个文件,根据文件名或文件路径检索,个人认为记住文件名或文件路径比记住文件在项目中位置更简单一些
  4. command + p + filename:line,快速打开某一个文件并定位到指定行
  5. command + d,选中与当前选中代码相同的代码块,这是一个多光标操作,在对相同字符做批量操作的时候相当实用!
  6. shift + f12,查看当前选中的字符都有哪些地方引用
  7. option + space,触发建议,也就是手动弹出代码提示,这个我自己的自定义快捷键,可自行修改
  8. option + 拖动光标,可以从当前光标位置选中多行,看着很神奇其实没啥用的功能。。。
    12、command + 数字键,快速切换文件
    13、common + option + s,同时保存所有文件

用户可以自定义代码片段

Log Wrapper 插件,快速打印log

五、vscode 一些技巧
1、强制创建可闭合的代码区域

// #region
const render = () => ReactDOM.render(
  <Counter
    value={store.getState().counter}
    onIncrement={() => store.dispatch({ type: 'INCREMENT', payload: 'payload value' })}
    onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
  />,
  rootEl
)
// #endregion

2、Refactor Promises to Async/Await
3、balance 快捷键,选中 html 代码块

六、vscode 常用插件
1、Atom Keymap:在 vscode 应用 atom 的快捷键位,对于从 atom 转为 vscode 的小伙伴真的是太方便了,毕竟记快捷键不是每个人都愿意干的事
2、Auto Rename Tag:html 标签自动更改命名
3、Auto-Open Markdown Preview:当打开 markdown 文件时会自动打开预览功能
4、Beautify:美化代码格式
5、Better Comments:将一些特殊注释用不同的颜色区分,使注释内容更明显
6、Bracket Pair Colorizer:每一个对括号用不用颜色区分
7、change-case:快速将字符串格式改为大驼峰、小驼峰、下划线分隔等等方式
8、Color Highlight:css color rgba,16进制 快速切换
9、Document This:快速生成函数注释
10、File Peek:快速查看变量的定义,支持跨文件查看和修改
11、git blame:快速查看某一行代码的提交记录
12、guides:代码行标尺
13、Import Cost:展示引用模块的体积
14、Markdown All In One:编写 markdown 的一些快捷键
15、Markdown Preview Enhanced:markdown 预览功能
16、open in browser:vscode 上可以直接打开浏览器预览
17、Open iTerm2:vscode 上可以在 iTerm2 上打开指定文件
18、Quokka.js:打开一个可以直接展示运行结果的文件,不太好描述,但是是一个很实用的插件!强烈推荐!
19、Vs Color Picker:可以使用这个插件选择自定义的颜色

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,012评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,589评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,819评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,652评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,954评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,381评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,687评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,404评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,082评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,355评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,880评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,249评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,864评论 3 232
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,007评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,760评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,394评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,281评论 2 259

推荐阅读更多精彩内容