VSCode安裝與使用

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 擴充插件。

  1. 點選 Extension 擴充插件圖示,安裝必須且常用的擴充插件。
  2. 左下角顯示預設的 Python 版本,表示安裝成功。
  3. 右邊大區塊的開始是用重點與最新消息,可瀏覽進一步使用說明。

你可以在先用篩選器找出 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個地方可以客製化設定,依優先前順序如下: 

  1. 專案設定 : 在左區塊的 .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。
  • 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

FAQ-VSCodet常見問題


參考資料

特色、摘要,Feature、Summary:

關鍵字、標籤,Keyword、Tag:

  • Tools,ToolsCoding,VSCode,IDE,

留言

這個網誌中的熱門文章

Ubuntu 常用指令、分類與簡介

iptables的觀念與使用

網路設定必要參數IP、netmask(遮罩)、Gateway(閘道)、DNS

了解、分析登錄檔 - log

Python 與SQLite 資料庫

Blogger文章排版範本

Pandas 模組

如何撰寫Shell Script

查詢指令或設定 -Linux 線上手冊 - man

下載網頁使用 requests 模組