標籤：

VSCode 最佳實踐

04-24

本文不適合 VSCode 新人, 且內容比較雜, 可能造成閱讀不便

基本操作

  • 命令面板是最常用的, mac 下快捷鍵為 cmd+shift+p 或者 F1, 幾乎所有事情都可以在這裡完成, 前提是你要熟悉命令的英文表述
  • 適當的增加你覺得舒服的快捷鍵綁定, 不要害怕跟其他快捷鍵衝突, 適合自己的就是最好的
  • mac 下 cmd+p 快速跳轉文件, 其他用法輸 ?
    • @/#{symbol} 跳轉到 當前文件/workspace 中的 symbol
    • :{Number} 跳轉到任意行
    • 熟練使用這些快捷操作可以明顯減少你碰滑鼠的次數
  • cmd+k m 切換語言模式
  • cmd+shift+m 切換問題面板, cmd+j 切換集成終端
  • 換一個好看的配色以及一個好看且等寬的字體, 能極大地提高你編碼的效率

"workbench.iconTheme": "material-icon-theme","workbench.colorTheme": "One Dark Pro Vivid","material-icon-theme.folders.theme": "specific","material-icon-theme.folders.color": "#26a69a","material-icon-theme.hidesExplorerArrows": true,"material-icon-theme.activeIconPack": "react_redux","editor.fontFamily": "Hack-Italic, Menlo, Input Sans Narrow, Monaco, Courier New, monospace",

  • Zen Mode 可以讓你更專註與當前工作, 快捷鍵是 cmd+k z, 記不住可以在命令面板搜(這是我非常喜歡的功能, 讓人感到很舒服)
  • Side by side editing VSCode 支持最多分為三列, 快捷鍵 cmd+1/2/3
  • 文件類型關聯, 比如某奇葩語法明明是 html 非要搞成 wxml, 明明是 css 非要搞成 wxss

"file.associations": { ".wxss": "css}

  • 除了可以使用 cmd+d 來增加游標, 也可以使用 opt+cmd+up/down/click 來向上/下/點擊位置增加游標
  • shift+opt+up/down 複製到上/下一行, opt+up/down 移動到上/下一行, 這都是很常用的了
  • cmd+u 可以回退到上一次游標的位置, 很有用
  • 使用 alt+cmd+[ 或者 alt+cmd+] 可以進行快速代碼摺疊/展開
  • shift+cmd+v 能快速預覽 markdown 文件
  • 跳轉到定義, 可以 F12 或者 cmd+click 反正都很麻煩, 都需要動右手
  • Git 支持, Git Lens 一個插件解決所有問題
  • Git diff review 時, 建議點擊右上角的 ... 選擇切換到 inline mode
  • 建議將 vscode 設置為 gitdiff 默認 tool

git config --global merge.tool code

  • CLI 命令: code 或者 code-insiders
    • 每次都輸入 code-insiders 太長了, 所以一般 alias icode=code-insiders
    • code . 算是比較常用的, 即使用 vscode 打開當前目錄
    • code --disable-extensions . 遇到問題的時候你可能需要這個命令
    • code --diff <file1> <file2>
    • 其他請參考 code -h

插件在精不在多

這裡其實應該稱之為 擴展 而不是 插件

$ icode --list-extensionsEditorConfig.EditorConfigHookyQR.beautifyPKief.material-icon-theme # 文件 icon 很精美 Stephanvs.dot # 作圖用的 WakaTime.vscode-wakatime # 庖丁解牛, 可以分析你花時間在哪些項目哪些分支哪些模塊上 abusaidm.html-snippetsandys8.jest-snippetsbungcip.better-tomlchristian-kohler.path-intellisense # 路徑補全 dbaeumer.vscode-eslinteamodio.gitlenseg2.tslinteg2.vscode-npm-scriptflowtype.flow-for-vscodehollowtree.vue-snippetsjoelday.docthiskumar-harsh.graphql-for-vscodelukehoban.Goms-python.pythonms-vscode.cpptoolsoctref.veturspywhere.guidestimothymclane.react-redux-es6-snippetsvscodevim.vimwayou.vscode-todo-highlightxabikos.JavaScriptSnippetszhuangtongfa.Material-theme

debug 調試之道

  • 初學者總覺得調試配置起來很難, 其實不然, 只要花時間看文檔, 寫個 launch.json 很容易
  • 正確區分 launch 和 attach
  • 只要你所編寫的語言支持 language-server-protocol 都可以在 vscode 中進行調試
  • 打斷點很簡單, 右鍵可以設置 條件斷點, 在表達式為 true 時觸發
  • 經常會有人疑惑為什麼寫的前端項目打斷點不會斷: 運行時在你的瀏覽器, vscode 無能為力 , 調試前端項目盡量使用 chrome devtool, 不要受某些高下載量的擴展(debugger in chrome)的影響

VSCodeVim - 真正的 editor

多記些快捷鍵對腦子有好處, 但總移動你的右手和低頭卻對身體有害, 所以跟我一樣, 擁抱 vim 吧

  • 擴展市場搜索 vim 選擇安裝量最大的插件
  • gd - Go to definition, 跳轉到定義
  • gb - 找出與游標下相同的下一個單詞, 並添加一個游標, 類似 vscode 原生的 cmd + d
  • af - VISUAL 模式命令, 依據語法分析, 將選擇區域向外擴展
  • gh - 等同於將滑鼠移至游標所在單詞, 方便查看定義以及報錯
  • 當你開啟 vim-easymotion 後有更多騷操作 ("vim.easymotion": true)
    • <leader><leader> t/T <char> 能夠向前/向後快速到達可見範圍內的某字元(<char>)的位置
    • <leader><leader> w/b 向前/向後到達可見範圍內任何單詞的開頭
    • <leader><leader> e/ge 向前/向後到達可見範圍內任何單詞的結尾
    • <leader><leader> k/j 向前/向後到達可見範圍內任何行的行首
    • 更多騷操作查看文檔 VSCodeVim/#vim-motion
  • 快速注釋 vim-commentary 默認開啟
    • VSCode 或是 INSERT MODE 下可以使用 cmd + / 快速注釋游標所在/選中行, NORMAL 模式下 gcc 可以快速注釋當前行, gc2j 注釋以下兩行, VISUAL 模式 gc 可快速注釋選中行
    • gCC 使用塊級注釋, 注釋當前行, 其他類似
  • vim-sneak 游標快速移動
    • s/S <char><char> 快速向前/向後移動游標到第一次出現 <char><char> 字元的位置
  • 代碼摺疊, 建議設置 "vim.foldfix": true(這能修復游標經過摺疊代碼時自動展開的 bug, 但會帶來副作用)
    • [N]zo 會遞歸展開游標下的 N 層摺疊, zO 會展開游標下所有摺疊
    • [N]zc 會遞歸關閉游標下的 N 層摺疊, zC 會關閉游標下所有摺疊
    • zM 全部摺疊, zR 全部展開
  • VSCodeVim 中沒有 Buffer 概念, window 概念和 vim 也不太一樣
    • 設置快捷鍵後 Cmd+h 和 Cmd+l 分別為當前 window 下打開上一個/下一個 editor(Buffer)

推薦閱讀：

TAG:VisualStudioCode | 編程 | 代碼編輯器 |