VSCode常用插件和好用配置有哪些

VSCode常用插件和好用配置有哪些

Visual Studio Code（簡稱VSCode）是一款由微軟開發的免費、開源的代碼編輯器。它支持多種編程語言，具有豐富的插件生態系統，能夠極大地提升開發效率。本文將介紹一些常用的VSCode插件和配置，幫助你更好地使用這款強大的編輯器。

目錄

1. 常用插件
   • 1.1 代碼格式化
   • 1.2 代碼補全
   • 1.3 版本控制
   • 1.4 調試工具
   • 1.5 主題和圖標
   • 1.6 其他實用插件
2. 好用配置
   • 2.1 編輯器設置
   • 2.2 快捷鍵配置
   • 2.3 工作區配置
   • 2.4 集成終端
   • 2.5 調試配置
3. 總結

常用插件

代碼格式化

1. Prettier - Code formatter

   • 功能: 自動格式化代碼，支持多種語言（JavaScript、TypeScript、CSS、HTML等）。
   • 使用方法: 安裝后，可以通過右鍵菜單或快捷鍵格式化代碼。
   • 配置: 可以在.prettierrc文件中自定義格式化規則。

2. ESLint

   • 功能: 用于JavaScript和TypeScript的代碼檢查和格式化。
   • 使用方法: 安裝后，VSCode會自動檢測項目中的ESLint配置文件，并在編輯器中顯示錯誤和警告。
   • 配置: 可以在.eslintrc文件中自定義規則。

代碼補全

1. IntelliSense for CSS class names in HTML

   • 功能: 自動補全HTML文件中的CSS類名。
   • 使用方法: 安裝后，在HTML文件中輸入class屬性時，會自動提示項目中定義的CSS類名。

2. Python

   • 功能: 提供Python語言的代碼補全、調試、格式化等功能。
   • 使用方法: 安裝后，VSCode會自動識別Python文件并提供相應的功能。

3. TabNine

   • 功能: 基于的代碼補全工具，支持多種語言。
   • 使用方法: 安裝后，在編寫代碼時會自動提示可能的代碼片段。

版本控制

1. GitLens

   • 功能: 增強VSCode的Git功能，提供代碼作者、提交歷史、代碼比較等功能。
   • 使用方法: 安裝后，可以在代碼行旁邊看到提交信息，并通過右鍵菜單查看詳細歷史。

2. Git History

   • 功能: 查看Git提交歷史、分支、標簽等信息。
   • 使用方法: 安裝后，可以通過命令面板或右鍵菜單查看Git歷史。

調試工具

1. Debugger for Chrome

   • 功能: 在VSCode中調試JavaScript代碼，支持Chrome瀏覽器。
   • 使用方法: 安裝后，配置launch.json文件，即可在VSCode中啟動調試。

2. PHP Debug

   • 功能: 用于調試PHP代碼。
   • 使用方法: 安裝后，配置launch.json文件，即可在VSCode中啟動調試。

主題和圖標

1. Material Theme

   • 功能: 提供多種Material Design風格的主題。
   • 使用方法: 安裝后，在設置中選擇喜歡的主題。

2. vscode-icons

   • 功能: 為文件和文件夾提供豐富的圖標。
   • 使用方法: 安裝后，VSCode會自動應用圖標。

其他實用插件

1. Bracket Pair Colorizer

   • 功能: 為匹配的括號添加顏色，方便識別代碼塊。
   • 使用方法: 安裝后，VSCode會自動為括號著色。

2. Live Server

   • 功能: 啟動一個本地開發服務器，實時預覽HTML文件。
   • 使用方法: 安裝后，右鍵點擊HTML文件，選擇“Open with Live Server”。

3. Remote - SSH

   • 功能: 通過SSH遠程連接服務器，并在VSCode中編輯遠程文件。
   • 使用方法: 安裝后，通過命令面板連接遠程服務器。

好用配置

編輯器設置

1. 字體和字號

   • 配置: 在settings.json中設置editor.fontFamily和editor.fontSize，例如：

     
     "editor.fontFamily": "Consolas, 'Courier New', monospace",
     "editor.fontSize": 14
     

2. 自動保存

   • 配置: 在settings.json中設置files.autoSave，例如：

     
     "files.autoSave": "afterDelay"
     

3. 縮進和制表符

   • 配置: 在settings.json中設置editor.tabSize和editor.insertSpaces，例如：

     
     "editor.tabSize": 4,
     "editor.insertSpaces": true
     

快捷鍵配置

1. 自定義快捷鍵

   • 配置: 在keybindings.json中自定義快捷鍵，例如：

     
     {
      "key": "ctrl+shift+l",
      "command": "editor.action.selectAll",
      "when": "editorTextFocus"
     }
     

2. 常用快捷鍵

   • 格式化代碼: Shift + Alt + F
   • 查找文件: Ctrl + P
   • 查找符號: Ctrl + Shift + O
   • 切換終端: Ctrl +`

工作區配置

1. 工作區設置

   • 配置: 在工作區根目錄下創建.vscode/settings.json文件，配置工作區特定的設置，例如：

     
     {
      "files.exclude": {
          "**/.git": true,
          "**/.DS_Store": true
      }
     }
     

2. 任務配置

   • 配置: 在工作區根目錄下創建.vscode/tasks.json文件，配置自定義任務，例如：

     
     {
      "version": "2.0.0",
      "tasks": [
          {
              "label": "Build",
              "type": "shell",
              "command": "npm run build",
              "group": {
                  "kind": "build",
                  "isDefault": true
              }
          }
      ]
     }
     

集成終端

1. 終端配置

   • 配置: 在settings.json中設置terminal.integrated.shell，例如：

     
     "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe"
     

2. 終端快捷鍵

   • 新建終端: Ctrl + Shift +`

調試配置

1. 調試配置

   • 配置: 在工作區根目錄下創建.vscode/launch.json文件，配置調試選項，例如：

     
     {
      "version": "0.2.0",
      "configurations": [
          {
              "type": "node",
              "request": "launch",
              "name": "Launch Program",
              "program": "${workspaceFolder}/app.js"
          }
      ]
     }
     

2. 調試快捷鍵

   • 啟動調試: F5
   • 停止調試: Shift + F5
   • 單步跳過: F10
   • 單步進入: F11

總結

VSCode是一款功能強大的代碼編輯器，通過安裝合適的插件和配置，可以極大地提升開發效率。本文介紹了一些常用的插件和配置，涵蓋了代碼格式化、補全、版本控制、調試、主題等多個方面。希望這些內容能幫助你更好地使用VSCode，提升開發體驗。