vscode奇淫记(上)

每次换editor都是一种煎熬,从最早的eclipse,sublime,webstorm到现在在用的atom,换编辑器的驱动是寻找更酷炫和轻量的平衡点,其实我真的蛮喜欢atom的,酷炫!那我这次打算入手vscode的原因有以下几点

  • 部门同事基本上都在用它 ╯□╰
  • 社区和atom一样活跃(最诱惑我的地方是写node能打断点以及ts编译的速度)
  • 今天atom全局搜索存在的包文件竟然没找到!!

说换一种editor是一种煎熬是因为你需要配置样式和插件并掌握部分快捷键和高级功能,下面我会介绍一些入坑奇淫记。

使用命令行秒开sublime,atom,vscode

这个部分其实是小技巧。

我们可以使用 code . 启动vscode。

提示:对于Mac用户,我们需要通过设置使您能够从终端内启动VS Code.首选运行VS code并打开命令面板( ⇧⌘P ),然后输入 shell command 找到: Install ‘code' command in PATH 。

vscode奇淫记(上)

接下来我来介绍另一种方法,使 subl . atom . code . 分别能启动sublime、atom、vscode

sudo nano .zshrc

在文件末尾加上:

alias atom='/Applications/Atom.app/Contents/MacOS/Atom'
alias subl='/Applications/SublimeText.app/Contents/SharedSupport/bin/subl'
alias code='/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code'

command+x再输入y,保存。重启iterm2.

打开包内容后一直找到可以执行的文件(就是可以打开应用的文件), 然后把当前路径复制到.zshrc中用alias设置,alias就是设置别名,有空格就用 \ 转义。

现在就能分别使用相应的命令秒开各种编辑器了。

定制自己的VS code

ps:我是一个会因为找不到自己喜欢的高亮主题而放弃一款编辑器的重度强迫症者。

  • 一定要挑选等宽字体。(推荐如下几个)
    • Source Code Pro(我当前用的)
    • Menlo
    • Consolas
    • Monaco
    • Courier New
  • 设置合适的字体大小和行高
  • 挑选一个满意的代码高亮主题(推荐如下)
    • Material(我当前用的)
    • one Dark
    • Monokai
  • 挑选一个可爱的文件图标主题
    • Material Theme Icons
    • VScode great Icons

vscode奇淫记(上)

配置文件

command+, 呼出配置界面,我的配置文件如下

vscode奇淫记(上)

虽然VScode支持中文,还是建议用编辑器默认的英文,毕竟做这行~,一些比较难看懂的英文配置,看这篇文章

前面几点是界面的配置,上文已经说了,再来讲几点

我把terminal.external.osxExec设置为用iTerm.app打开,否则它默认是用系统自带的控制台打开(比较丑)。

来看看我的iTerm2界面,(如果有朋友有需求我以后可以写写iTerm2+om-my-zsh的奇淫计)

vscode奇淫记(上)

还有"workbench.activityBar.visible": false这点,把活动栏给隐藏掉,我感觉这个一是占位,二是不美观,所以把它隐藏掉了。当然可以直接输入下面这命令来隐藏或显示活动栏

Toggle Activity Bar Visibility

快捷键

关于快捷键,推荐一个插件KeyMap,这样不管你从sublime,atom还是其他编辑器转过来的,可以把先前在你用的编辑器上的快捷键原封不动的继承过来。这样子就可以完美的过度到VScode。

在此之上,VScode的一些常用快捷键罗列如下,官方英文

因为用了KeyMap插件,所以我大部分快捷键是从atom上继承过来的,所以有些快捷键就在迈向新纪元编辑器里了,

【COMMAND +P 模式】

  • 直接输入文件名,快速打开文件
  • ? 列出当前可执行的动作
  • ! 显示Errors或Warnings
  • :跳转到行数,也可以Ctrl+G直接进入
  • @跳转到symbol(搜索变量或者函数),也可以Ctrl+Shift+O直接进入
  • @:根据分类跳转symbol,查找属性或函数,也可以Ctrl+Shift+O后输入:进入
  • #根据名字查找symbol,也可以Ctrl+T

左侧相关

  • command+shift+E 打开资源 
  • command+shift+F 打开搜索
  • ctrl+shift+G 打开git
  • command+shift+D 打开调试
  • command+shift+X 打开扩展 

 其他

  • 自动保存:File -> AutoSave ,或者Ctrl+Shift+P,输入 auto
  • command+shift+V 实时预览md文件

TODO

等我上手一段时间,我会写篇实用插件使用心得以及用vscode打断点调试的技巧

作者:牧云云
出处:http://www.cnblogs.com/MuYunyun/"
本文版权归作者和博客园所有,欢迎转载,转载请标明出处。
如果您觉得本篇博文对您有所收获,请点击右下角的 [推荐],谢谢!

上一篇:深入Redux架构


下一篇:深入React组件生命周期