帶你快速瞭解VSCode的特性,極大提高開發效率


其實VSCode編輯器本身自帶了一個功能Interactive Editor Playground :可以讓你快速瞭解VSCode的特性,並且是可以交互的),

但很可惜它的內容是全英文的(將VSCode設置爲中文也沒用哦~),

我將每一部分截圖下來,併爲你說明關鍵內容,教你學會使用 Interactive Editor Playground

  • 還有一些顯而易見的特性,我不會再用文字敘述一遍(它們都是潛移默化的)
  • 在下文中會涉及到大量快捷鍵的介紹,如果看不懂快捷鍵請自行百度
  • 鼠標 = 文本光標 = 光標

本文成於2020年4月22日,隨着VSCode的版本更迭,此部分內容可能會略有差異(小更改不影響觀看,有較大影響的更新請在評論區告之,我會及時更新的)

打開VSCode > Help > Interactive Playground
在這裏插入圖片描述
你將會打開 Interactive Editor Playground 頁面

互動式編輯遊樂場

在這裏插入圖片描述
VS代碼中的核心編輯器包含許多特性。此頁高亮顯示了10個特性,每個特性介紹中都提供了代碼行供你編輯

接下來的10行內容(你可以理解爲目錄,對應10個特性)

  • 多光標編輯(Multi-Cursor Editing)- 選擇一塊區域,選擇所有匹配項,添加其餘光標等
  • 智能感應(intelliSense)- 獲取代碼和外部模塊的代碼幫助和參數建議
  • 行操作(Line Actions )- 快速移動行以重新排序代碼
  • 重命名重構(Rename Refactoring)- 快速重命名代碼庫中的符號(比如變量名、函數名)
  • 格式化(Formatting)- 使用內置文檔和選擇格式使代碼看起來很棒
  • 代碼摺疊(Code Folding) - 通過摺疊其他代碼區域,關注代碼中最相關的部分
  • 錯誤和警告(Errors and Warnings)- 寫代碼時請參閱錯誤和警告
  • 片段(Snippets)- 花更少的時間輸入片段
  • Emmet - 只需要敲一行代碼就能生成你想要的完整HTML結構等(極大方便前端開發)
  • JavaScript Type Checking- 使用零配置的TypeScript對JavaScript文件執行類型檢查。

Multi-Cursor Editing

在這裏插入圖片描述
使用多光標編輯可以同時編輯文檔的多個部分,極大地提高了工作效率

  1. 框式選擇
    • 鍵盤同時按下 Shift + DownArrow(下鍵)、Shift + RightArrow(右鍵)、Shift + UpArrow(上鍵)、Shift + LeftArrow(左鍵) 的任意組合可選擇文本塊
    • 也可以用鼠標選擇文本時按 Shift + Alt 鍵
    • 或使用鼠標中鍵拖動選擇(可用性很高
  2. 添加光標
    • 按 Ctrl + Alt + UpArrow 在行上方添加新光標
    • 或按 Ctrl + Alt + DownArrow 在行下方添加新光標
    • 您也可以使用鼠標和 Alt + Click 在任何地方添加光標(可用性很高
  3. 在所有出現的字符串上創建光標
    • 選擇字符串的一個實例,例如我用鼠標選中所有background,然後按 Ctrl + Shift + L,文本中所有的background都將被選中(可用性很高

IntelliSense

在這裏插入圖片描述
Visual Studio Code 預裝了強大的JavaScript和TypeScript智能感知。

在代碼示例中,將文本光標放在錯誤下劃線的上面,會自動調用IntelliSense(類似下圖)

這只是智能提示的冰山一角,還有懸停在函數名上可以看到參數及其註釋(如果有)等等,它會潛移默化的帶給你極大幫助

其他語言在安裝對應插件後,會附帶對應語言的IntelliSense

Line Actions

在這裏插入圖片描述

  1. 分別使用 Shift + Alt + DownArrow 或 Shift + Alt + UpArrow 複製光標所在行並將其插入當前光標位置的上方或下方
  2. 分別使用 Alt + UpArrow 和 Alt + DownArrow 向上或向下移動選定行(可用性很高
  3. 用 Ctrl + Shift + K 刪除整行(可用性很高
  4. 通過按 Ctrl + / 來註釋掉光標所在行、切換註釋(可用性很高

Rename Refactoring

在這裏插入圖片描述
重命名符號(如函數名或變量名)

  1. 將光標選中符號,按F2鍵
  2. 或者 選中該符號,鼠標右鍵 > Rename Symbol

重命名操作將在項目中的所有文件中發生可用性很高

Formatting

在這裏插入圖片描述
代碼如果沒有良好的編寫格式,閱讀起來是一個折磨

Formatting可以解決編寫格式問題:無論你的代碼的格式寫的有多麼糟糕,它可以將代碼格式化爲閱讀性良好的格式

  1. 格式化整個文檔 Shift + Alt + F (可用性很高
  2. 格式化當前行 Ctrl + K Ctrl + F(即先按Ctrl,再按K,最後按F)
  3. 鼠標右鍵 > Format Document (格式化整個文檔)
  4. 將格式化操作設置爲自動化(保存時自動格式化整個文檔):Ctrl + , 輸入 editor.formatOnSave
    在這裏插入圖片描述

Code Folding

在這裏插入圖片描述
在大文件中,爲了提高可讀性,摺疊代碼段通常是很有用的

推薦使用鼠標,將鼠標移到代碼左側(紅色方框包裹處),會出現摺疊和展開的圖標(可用性很高

鼠標操作,自己嘗試一下,秒懂

快捷鍵:

  • 摺疊 Ctrl + Shift + [
  • 展開 Ctrl + Shift + ]

摺疊代碼段是基於基於縮進

Errors and Warning

在這裏插入圖片描述
錯誤和警告將在你出現錯誤時,高亮該代碼行

在代碼示例中可以看到許多語法錯誤(如果沒有,請你隨便修改它,讓它出現錯誤)

按F8鍵可以按順序在錯誤之間導航,並查看詳細的錯誤消息(可用性很高

Snippets

在這裏插入圖片描述
通過使用代碼片段,可以大大加快編輯速度

在代碼編輯區,你可以嘗試輸入try並從建議列表中選擇try catch

然後按Tab鍵或者Enter,創建try->catch塊

你的光標將放在文本error上,以便編輯。如果存在多個參數,請按Tab鍵跳轉到該參數。

Emmet

在這裏插入圖片描述
Emmet將代碼片段的概念提升到了一個全新的層次(前端開發的大寶貝)

你可以鍵入類似Css的可動態解析表達式,並根據在abrevision中鍵入的內容生成輸出

比如說:

然後Enter

JavaScript Type Checking

在這裏插入圖片描述
有時候Javascript類型檢查可以幫助您發現被你忽視的錯誤,只需在文件頂部添加

// @ts-nocheck

願你,願我扶搖直上九萬里

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章