- 超詳細VSCode安裝教程(Windows)
- 博主的VSCode專欄:分享使用VS Code的基本操作與各種技巧
其實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
使用多光標編輯可以同時編輯文檔的多個部分,極大地提高了工作效率
- 框式選擇
- 鍵盤同時按下 Shift + DownArrow(下鍵)、Shift + RightArrow(右鍵)、Shift + UpArrow(上鍵)、Shift + LeftArrow(左鍵) 的任意組合可選擇文本塊
- 也可以用鼠標選擇文本時按 Shift + Alt 鍵
- 或使用鼠標中鍵拖動選擇(可用性很高)
- 添加光標
- 按 Ctrl + Alt + UpArrow 在行上方添加新光標
- 或按 Ctrl + Alt + DownArrow 在行下方添加新光標
- 您也可以使用鼠標和 Alt + Click 在任何地方添加光標(可用性很高)
- 在所有出現的字符串上創建光標
- 選擇字符串的一個實例,例如我用鼠標選中所有background,然後按 Ctrl + Shift + L,文本中所有的background都將被選中(可用性很高)
IntelliSense
Visual Studio Code 預裝了強大的JavaScript和TypeScript智能感知。
在代碼示例中,將文本光標放在錯誤下劃線的上面,會自動調用IntelliSense(類似下圖)
這只是智能提示的冰山一角,還有懸停在函數名上可以看到參數及其註釋(如果有)等等,它會潛移默化的帶給你極大幫助
其他語言在安裝對應插件後,會附帶對應語言的IntelliSense
Line Actions
- 分別使用 Shift + Alt + DownArrow 或 Shift + Alt + UpArrow 複製光標所在行並將其插入當前光標位置的上方或下方
- 分別使用 Alt + UpArrow 和 Alt + DownArrow 向上或向下移動選定行(可用性很高)
- 用 Ctrl + Shift + K 刪除整行(可用性很高)
- 通過按 Ctrl + / 來註釋掉光標所在行、切換註釋(可用性很高)
Rename Refactoring
重命名符號(如函數名或變量名)
- 將光標選中符號,按F2鍵
- 或者 選中該符號,鼠標右鍵 > Rename Symbol
重命名操作將在項目中的所有文件中發生(可用性很高)
Formatting
代碼如果沒有良好的編寫格式,閱讀起來是一個折磨
Formatting可以解決編寫格式問題:無論你的代碼的格式寫的有多麼糟糕,它可以將代碼格式化爲閱讀性良好的格式
- 格式化整個文檔 Shift + Alt + F (可用性很高)
- 格式化當前行 Ctrl + K Ctrl + F(即先按Ctrl,再按K,最後按F)
- 鼠標右鍵 > Format Document (格式化整個文檔)
- 將格式化操作設置爲自動化(保存時自動格式化整個文檔):
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
願你,願我扶搖直上九萬里