每次換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 。
接下來我來介紹另一種方法,使 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
配置文件
command+, 呼出配置界面,我的配置文件如下
雖然VScode支持中文,還是建議用編輯器默認的英文,畢竟做這行~,一些比較難看懂的英文配置,看這篇文章
前面幾點是界面的配置,上文已經說了,再來講幾點
我把terminal.external.osxExec設置為用iTerm.app打開,否則它默認是用系統自帶的控制台打開(比較丑)。
來看看我的iTerm2界面,(如果有朋友有需求我以后可以寫寫iTerm2+om-my-zsh的奇淫計)
還有"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打斷點調試的技巧