VSCode安裝與使用
VSCode安裝與使用
大綱
- 下載安裝 VSCode 在 Windows 上
- 建立專案目錄、開啟VSCode
- 安裝 Python 相關擴充插件
- 選擇 Color Theme主題外觀
- 客製化設定
- 好用的 Extension 擴充插件
- Shotcut 快捷鍵
- FAQ-VSCode
前言
Visual Studio Code 簡稱 VS Code,VS Code 是一個由微軟開發 IDE,支援各平台的免費程式碼編輯器,它支援測試程式、Git 版本控制、代碼補全、豐富的插件 ...... 等等常用功能,幾乎可以開發任何程式語言,實用工具非常多,全球使用者佔據絕對優勢,並且奪得了 2021 年 StackOverflow 上的使用者統計第一名。
下載安裝 VSCode 在 Windows 上
安裝非常簡單,網路上也有非常多的介紹文章,這裡就不做詳細介紹了。
- 1:雙擊 下載 選擇合適的版本後,執行安裝,以安裝 Windows 版本為例。
- 2:勾選同意,然後點擊下一步。
- 3:選擇安裝位置,我這裡選擇的是D盤
- 4:下一步
- 5:勾選創建快捷方式,下一步
- 6:點擊安裝,開始安裝
- 7: 等待安裝結束。
另外,VSCode 也有網也版本,詳細說明請參閱►2021/10/22微軟發表網頁版VS Code(外連結)。
建立專案目錄、開啟VSCode
我們在 C:\Users\Administrator\Desktop\Code\Python\ 路徑下建立一個 Folder 目錄 startUp。點擊滑鼠右鍵,用 VSCode 開啟:
安裝 Python 相關擴充插件
開啟後,我們先安裝必須且常用的 Extension 擴充插件。
- 點選 Extension 擴充插件圖示,安裝必須且常用的擴充插件。
- 左下角顯示預設的 Python 版本,表示安裝成功。
- 右邊大區塊的開始是用重點與最新消息,可瀏覽進一步使用說明。
你可以在先用篩選器找出 Most Popular 最常用擴充插件
這裡我們建議安裝常用且必須的擴充插件如下,
- Python,Pylance►這個插件必裝。強大功能有 : 智能補全、代碼檢查、代碼格式、調試、測試、Jupyter Notebook協作、環境自動啟用、重構...等功能。
- Jupyter,Jupyter Keymap►
- Kite Plugin for VS Code►學習如何使用 Kite 插件。
- AREPL for python►
- Python Docstring Generator►
- Python Test Explorer for Visual Studio Code►
- Code Runner►自動執行程式。
選擇 Color Theme 主題外觀
使用快捷鍵 "Ctrl+K Ctrl+T" 在指令行中選擇您要的主題外觀,或用 "Ctrl+Shift+P" 來到指令行=> 搜尋關鍵字 "theme",↓ / ↑ 上下方方向鍵時會顯示背景主題顏色,挑選您喜好的主題顏色。
客製化設定
在 VS Code 的設定有3個地方可以客製化設定,依優先前順序如下:
- 專案設定 : 在左區塊的 .vscode/settings.json。
好用的 Extension 擴充插件
General 通用
- Beautify►為 VS Code 美化代碼。
- Bracket Pair Colorizer►用於著色匹配括號的可客制化擴充插件。
- Prettier - Code formatter
- indent-rainbow►使縮格更易於閱讀
- Material Icon Theme►Material Design Icons。
- Chinese Lorem►生成繁體中文 lorem ipsum 文本並將其插入到 Visual Studio Code 中。
- Docker►使創建、管理和除錯調試容器化應用程序變得容易。
- GitLens — Git supercharged►增強 Visual Studio Code 中內置的 Git 功能——通過 Git blame annotations和一目了然地可視化代碼作者身份。
- REST Client►
- Test Adapter Converter►
- Test Explorer UI►在側欄中運行測試。
- Code Runner►自動運行程式。
Coding AI Assistant
- Tabnine►自動完成的全語言 AI 助手更快地編寫代碼。
- Kite AutoComplete AI Code►AI自動編碼助手Kite Plugin for VS Code。
- GitHub Copilot►AI程序員。
Html/CSS
- Auto Rename Tag►自動重命名配對的 HTML/XML 標籤。
- CSS Peek►允許查看 CSS ID 和類別字串作為從 html 文件到相應 CSS 的定義。 允許 peek 和 goto 定義。
- HTML CSS Support►CSS Intellisense for HTML。
- Live Sass Compiler►通過及時瀏覽器重新加載將 Sass 或 Scss 編譯為 CSS。
- Live Server►為靜態和動態頁面啟動具有實時重新加載功能的開發本地服務器。
JavaScript
- JavaScript (ES6) code snippets►ES6 語法中的 JavaScript 代碼片段。
Python
- Python►這個插件必裝。強大功能有 : 智能補全、代碼檢查、代碼格式、調試、測試、Jupyter Notebook協作、環境自動啟用、重構...等功能。
- Jupyter►Jupyter 筆記本支持、交互式編程和計算,支持 Intellisense、除錯...等。
- Jupyter Keymap►筆記本的 Jupyter 鍵盤映射。
- Jupyter Notebook Renderers►Jupyter Notebooks 的渲染器(帶有 plotly、vega、latex、gif、png、svg、jpeg 和其他此類輸出)。
- AREPL for python►
- Python Docstring Generator►自動為python函數生成詳細的文檔字符串。
- Python Test Explorer for Visual Studio Code►
- Pylance►Python 的高性能、功能豐富的語言服務器。
- Python Auto Venv►自動選擇在當前文件目錄中找到的虛擬環境。
- Python Indent►正確的python 縮格。
- Python Test Explorer for Visual Studio Code►在 Visual Studio Code 的側欄中運行 Python 測試。
Flutter/Dart
- Dart►Dart 語言支持和除錯器。
- Flutter►Flutter 支持和除錯器。
- Awesome Flutter Snippets►Awesome Flutter Snippets 是常用 Flutter 函數和類別的集合片段和快捷方式。
- [FF] Flutter Files►快速 scaffold flutter bloc 文件模板。
- Pubspec Assist►輕鬆添加和更新 Dart 和 Flutter 項目的依賴項。
Excel
- Excel Viewer►在 VS Code 工作區中查看 Excel 電子表格和 CSV 文件。
BackEnd/Database
- Firebase►Firestore 安全規則語法突出顯示。
- Firebase Explorer►用於探索和管理 Firebase 項目。
Shotcut 快捷鍵
General通用
- Ctrl +Shift+P 或 F1►Show Command Palette。
- Ctrl+P►Quick Open, Go to File…。
- Ctrl+K Ctrl+S►Keyboard Shortcuts。
- Ctrl+,►Setting。
- Ctrl+`►Toggle Terminal。
- Ctrl+F►Search。
- F5►Start Debugging。
- Ctrl+Shift+F►Find in Files。
- alt + F12►VSCode尋找變數之定義: 游標移到該變數,直接按alt + F12,就會快速彈出該變數之定義。
- F12►若要跳到定義處,則直接F12,游標就會帶到定義處!
- Shift + Alt + F►程式碼格式化。
- WindowKey + .► to open the emoji window。
檔案、目錄
- Ctrl+N► New File。
- Ctrl+O►Open File...。
- Ctrl+S►Save。
- Ctrl+Shift+S►Save As...。
- Ctrl+K S►Save All。
- Ctrl+F4►Close。
- Ctrl+K Ctrl+W►Close All。
編輯
- Ctrl+Z►Undo。
- Ctrl+Y►Redo。
- Ctrl+X►Cut line (Go Home )。
- Ctrl+Shift+K►Delete line。
- Ctrl+C►Copy line (Go Home)。
- Ctrl+V►Paste。
- Ctrl+L ►Select current line。
- Alt+ ↑ / ↓►Move line up/down移動整行字串。
- Alt +Shift+ ↓ / ↑►Copy line up/down快速複製這一行。
- Alt+Shift+→►Expand selection。
- Alt+Shift+←►Shrink selection。
- Alt+Shift+ (drag mouse)►Column (box) selection。
- 一次編輯多行或多個位置
- ALT + 滑鼠右鍵?左鍵?點擊編輯位置。
- ALT + SHIFT 按滑鼠右鍵?左鍵?並上或下拖曳多行。
- Ctrl+D", = 若是要一個一個來選,可以先反白關鍵字,每按一次組合鍵就會選取下一個同字串。
- Ctrl+Shift+L►同時選取相同名稱的字串統一修改。
- Tab►Bock the area, then "Tab" to Shift text left to right。
- Tab+Shift ►Bock the area, then "Shift + Tab" to Shift text right to left。
- Ctrl+/ ►Add Line comment。
- Ctrl+K Ctrl+C►Add Line comment。
- Ctrl+K Ctrl+U►Remove Linecomment。
- Ctrl+K,then Ctrl+0►Fold all。
- Ctrl+K,then Ctrl+J► UnFold All。
- Ctrl+ ← / → ►Move cursor by word。
Navigation
- Alt+ ← / →►Go back / forward。
Display
- Ctrl+B►Toggle Sidebar visibility
- F11►Toggle full screen
- Ctrl + 數字鍵 或 Ctrl+Enter► 分割編輯視窗,最多可分割出3個編輯視窗。
- Ctrl + W►關閉視窗或編輯頁
- Ctrl + `►開啟終端機
- Ctrl + Shift + `►建立一個新的終端機分頁
- VSCode前往上一個/下一個開啟的編輯頁 :
- Ctrl + Tab►前往下一個編輯頁
- Ctrl + Shift + Tab►前往前一個編輯頁
Emmet/Html Doc
- Emmet Cheat-Sheet Document
- ! or doc►Html5 Template
FAQ-VSCodet常見問題
參考資料
特色、摘要,Feature、Summary:
關鍵字、標籤,Keyword、Tag:
- Tools,ToolsCoding,VSCode,IDE,
留言
張貼留言
Aron阿龍,謝謝您的留言互動!