代碼編輯器——Visual Studio Code
一、介紹
Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器,支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性,支持插件擴展,並針對網頁開發和雲端應用開發做了優化。軟件跨平臺支持 Win、Mac 以及 Linux。
二、常用快捷鍵
1.主命令框
F1
或 Ctrl+Shift+P
: 打開命令面板。在打開的輸入框內,可以輸入任何命令,例如:
- 按一下
Backspace
會進入到Ctrl+P
模式 - 在
Ctrl+P
下輸入>
可以進入Ctrl+Shift+P
在 Ctrl+P
窗口下還可以:
- 直接輸入文件名,跳轉到文件
?
列出當前可執行的動作!
顯示Errors
或Warnings
,也可以Ctrl+Shift+M
:
跳轉到行數,也可以Ctrl+G
直接進入@
跳轉到symbol
(搜索變量或者函數),也可以Ctrl+Shift+O
直接進入@
根據分類跳轉symbol
,查找屬性或函數,也可以Ctrl+Shift+O
後輸入:進入#
根據名字查找symbol
,也可以Ctrl+T
2.編輯器與窗口管理
- 打開一個新窗口:
Ctrl+Shift+N
- 關閉窗口:
Ctrl+Shift+W
- 同時打開多個編輯器(查看多個文件)
- 新建文件
Ctrl+N
- 文件之間切換
Ctrl+Tab
- 切出一個新的編輯器(最多
3
個)Ctrl+\
,也可以按住Ctrl
鼠標點擊Explorer
裏的文件名 - 左中右
3
個編輯器的快捷鍵Ctrl+1
Ctrl+2
Ctrl+3
3
個編輯器之間循環切換Ctrl+
- 編輯器換位置,
Ctrl+k
然後按Left
或Right
3.代碼編輯
-
格式調整
- 代碼行縮進
Ctrl+[
、Ctrl+]
Ctrl+C
、Ctrl+V
復制或剪切當前行/當前選中內容- 代碼格式化:
Shift+Alt+F
,或Ctrl+Shift+P
後輸入format code
- 上下移動一行:
Alt+Up
Alt+Down
- 向上向下復制一行:
Shift+Alt+Up
或Shift+Alt+Down
- 在當前行下邊插入一行
Ctrl+Enter
- 在當前行上方插入一行
Ctrl+Shift+Enter
-
光標相關
- 移動到行首:
Home
- 移動到行尾:
End
- 移動到文件結尾:
Ctrl+End
- 移動到文件開頭:
Ctrl+Home
- 移動到定義處:
F12
- 定義處縮略圖:只看一眼而不跳轉過去
Alt+F12
- 移動到後半個括號:
Ctrl+Shift+]
- 選擇從光標到行尾:
Shift+End
- 選擇從行首到光標處:
Shift+Home
- 刪除光標右側的所有字:
Ctrl+Delete
- 擴展/縮小選取範圍:
Shift+Alt+Left
和Shift+Alt+Right
- 多行編輯(列編輯):
Alt+Shift+鼠標左鍵
,Ctrl+Alt+Down/Up
- 同時選中所有匹配:
Ctrl+Shift+L
Ctrl+D
下一個匹配的也被選中 (在 sublime 中是刪除當前行,後面自定義快鍵鍵中,設置與Ctrl+Shift+K
互換了)- 回退上一個光標操作:
Ctrl+U
-
重構代碼
- 找到所有的引用:
Shift+F12
- 同時修改本文件中所有匹配的:
Ctrl+F12
- 重命名:比如要修改一個方法名,可以選中後按
F2
,輸入新的名字,回車,會發現所有的文件都修改了 - 跳轉到下一個
Error
或Warning
:當有多個錯誤時可以按F8
逐個跳轉 - 查看
diff
: 在explorer
裏選擇文件右鍵Set file to compare
,然後需要對比的文件上右鍵選擇Compare with file_name_you_chose
-
查找替換
- 查找
Ctrl+F
- 查找替換
Ctrl+H
- 整個文件夾中查找
Ctrl+Shift+F
-
顯示相關
- 全屏:
F11
- zoomIn/zoomOut:
Ctrl +/-
- 側邊欄顯/隱:
Ctrl+B
- 顯示資源管理器
Ctrl+Shift+E
- 顯示搜索
Ctrl+Shift+F
- 顯示 Git
Ctrl+Shift+G
- 顯示 Debug
Ctrl+Shift+D
- 顯示 Output
Ctrl+Shift+U
6.其他
- 自動保存:
File -> AutoSave
,或者Ctrl+Shift+P
,輸入auto
三、常用插件(前端類)
1. Open-In-Browser
由於 VSCode 沒有提供直接在瀏覽器中打開文件的內置界面,所以此插件在快捷菜單中添加了在默認瀏覽器查看文件選項,以及在客戶端(Firefox,Chrome,IE)中打開命令面板選項。
2. Quokka
Quokka 是一個調試工具插件,能夠根據你正在編寫的代碼提供實時反饋。它易於配置,並能夠預覽變量的函數和計算值結果。另外,在使用 JSX 或 TypeScript 項目中,它能夠開箱即用。
3. Faker
使用流行的 JavaScript 庫 – Faker,能夠幫你快速的插入用例數據。Faker 可以隨機生成姓名、地址、圖像、電話號碼,或者經典的亂數假文段落,並且每個類別還包含了各種子類別,你可以根據自身的需求來使用這些數據。
4. CSS Peek
使用此插件,你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時,選擇“ Go to Definition 和 Peek definition ”選項,它便會給你發送樣式設置的 CSS 代碼。
5. HTML Boilerplate
通過使用 HTML 模版插件,你就擺脫了為 HTML 新文件重新編寫頭部和正文標簽的苦惱。你只需在空文件中輸入 html,並按 Tab 鍵,即可生成幹凈的文檔結構。
6. Prettier
Prettier 是目前 Web 開發中最受歡迎的代碼格式化程序。安裝了這個插件,它就能夠自動應用 Prettier,並將整個 JS 和 CSS 文檔快速格式化為統一的代碼樣式。如果你還想使用 ESLint,那麽還有個 Prettier – Eslint 插件,你可不要錯過咯!
7. SVG Viewer
此插件在 Visual Studio 代碼中添加了許多實用的 SVG 程序,你無需離開編輯器,便可以打開 SVG 文件並查看它們。同時,它還包含了用於轉換為 PNG 格式和生成數據 URI 模式的選項。
8. TODO Highlight
這個插件能夠在你的代碼中標記出所有的 TODO 註釋,以便更容易追蹤任何未完成的業務。在默認的情況下,它會查找 TODO 和 FIXME 關鍵字。當然,你也可以添加自定義表達式。
9. Icon Fonts
這是一個能夠在項目中添加圖標字體的插件。該插件支持超過 20 個熱門的圖標集,包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
10. Minify
這是一款用於壓縮合並 JavaScript 和 CSS 文件的應用程序。它提供了大量自定義的設置,以及自動壓縮保存並導出為.min文件的選項。它能夠分別通過 uglify-js、clean-css 和 html-minifier,與 JavaScript、CSS 和 HTML 協同工作。
11. Change Case
雖然 VSCode 內置了開箱即用的文本轉換選項,但其只能進行文本大小寫的轉換。而此插件則添加了用於修改文本的更多命名格式,包括駝峰命名、下劃線分隔命名,snake_case 命名以及 CONST_CAS 命名等。
12. Regex Previewer
這是一個用於實時測試正則表達式的實用工具。它可以將正則表達式模式應用在任何打開的文件上,並高亮所有的匹配項。
13. Language and Framework Packs
VSCode 默認支持大量的主流編程語言,但如果你所使用的編程語言不包括在內,也可以通過下載擴展包來自動添加。同時,你還可以添加一些像 React Native 與 Vue 的相關 Web 開發插件包。
14.vscode-Path Intellisense------文件路徑提示。
15.vscode-Vue 2 Snippets------vue2的語法高亮,語法提示。
16.Auto Close Tag — 自動閉合HTML標簽
17.Auto Rename Tag — 修改HTML標簽時,自動修改匹配的標簽
18.beautify— javascript, JSON, CSS, Sass, HTML 代碼高亮
19.Debugger for Chrome — 調試JavaScript
待補…………………………
代碼編輯器——Visual Studio Code