史上最全vscode配置使用教程

阿新 • • 發佈：2022-04-13

史上最全vscode配置使用教程

灰藍宇墨上海閃店聯資訊科技有限公司前端工程師

工欲善其事，必先利其器。想要優雅且高效的編寫程式碼，必須熟練使用一款前端開發工具。但前端開發工具數不勝數，像HBuilder、Sublime Text、WebStorm、Visual Studio Code......等等,其中VSCode以其輕量且強大的程式碼編輯功能和豐富的外掛生態系統，獨受前端工師的青睞。網上有很多vscode的配置以及使用部落格，但都沒有本篇那麼詳細且全面。

軟體下載

直接在官網進行下載

Visual Studio Code - Code Editing. Redefined

code.visualstudio.com/

首頁

vscode設定成中文

vscode預設的語言是英文，對於英文不好的小夥伴可能不太友好。簡單幾步教大家如何將vscode設定成中文。

按快捷鍵“Ctrl+Shift+P”。
在“vscode”頂部會出現一個搜尋框。
輸入“configure language”，然後回車。
“vscode”裡面就會開啟一個語言配置檔案。
將“en-us”修改成“zh-cn”。
按“Ctrl+S”儲存設定。
關閉“vscode”，再次開啟就可以看到中文介面了。

當然如果你不願意設定，也可以直接安裝它的中文外掛，還是很人性化的。

VScode使用者設定

1. 開啟設定

檔案--首選項--設定，開啟使用者設定。VScode支援選擇配置，也支援編輯setting.json檔案修改預設配置。個人更傾向於編寫json的方式進行配置，下面會附上我個人的配置程式碼

這裡解析幾個常用配置項：

（1）editor.fontsize用來設定字型大小，可以設定editor.fontsize : 14;

（2）files.autoSave這個屬性是表示檔案是否進行自動儲存，推薦設定為onFocusChange——檔案焦點變化時自動儲存。

（3）editor.tabCompletion用來在出現推薦值時，按下Tab鍵是否自動填入最佳推薦值，推薦設定為on;

（4）editor.codeActionsOnSave中的source.organizeImports屬性，這個屬效能夠在儲存時，自動調整 import 語句相關順序，能夠讓你的 import 語句按照字母順序進行排列，推薦設定為true,即"editor.codeActionsOnSave": { "source.organizeImports": true }；

（5）editor.lineNumbers設定程式碼行號,即editor.lineNumbers ：true；

我的個人配置，供參考：

{
  "files.associations": {
  "*.vue": "vue",
  "*.wpy": "vue",
  "*.wxml": "html",
  "*.wxss": "css"
  },
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
  "git.enableSmartCommit": true,
  "git.autofetch": true,
  "emmet.triggerExpansionOnTab": true,
  "emmet.showAbbreviationSuggestions": true,
  "emmet.showExpandedAbbreviation": "always",
  "emmet.includeLanguages": {
  "vue-html": "html",
  "vue": "html",
  "wpy": "html"
  },
  //主題顏色 
  //"workbench.colorTheme": "Monokai",
  "git.confirmSync": false,
  "explorer.confirmDelete": false,
  "editor.fontSize": 14,
  "window.zoomLevel": 1,
  "editor.wordWrap": "on",
  "editor.detectIndentation": false,
  // 重新設定tabsize
  "editor.tabSize": 2,
  //失去焦點後自動儲存
  "files.autoSave": "onFocusChange",
  // #值設定為true時，每次儲存的時候自動格式化；
  "editor.formatOnSave": false,
   //每120行就顯示一條線
  "editor.rulers": [
  ],
  // 在使用搜索功能時，將這些資料夾/檔案排除在外
  "search.exclude": {
      "**/node_modules": true,
      "**/bower_components": true,
      "**/target": true,
      "**/logs": true,
  }, 
  // 這些檔案將不會顯示在工作空間中
  "files.exclude": {
      "**/.git": true,
      "**/.svn": true,
      "**/.hg": true,
      "**/CVS": true,
      "**/.DS_Store": true,
      "**/*.js": {
          "when": "$(basename).ts" //ts編譯後生成的js檔案將不會顯示在工作空中
      },
      "**/node_modules": true
  }, 
  // #讓vue中的js按"prettier"格式進行格式化
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
          // #vue元件中html程式碼格式化樣式
          "wrap_attributes": "force-aligned", //也可以設定為“auto”，效果會不一樣
          "wrap_line_length": 200,
          "end_with_newline": false,
          "semi": false,
          "singleQuote": true
      },
      "prettier": {
          "semi": false,
          "singleQuote": true
      }
  }
}

最近經常有人微信問我，這個配置程式碼寫在哪裡？

新版的vscode設定預設為UI的設定，而非之前的json設定。如果你想複製我上面這段程式碼進行配置，可以進行下面的修改

檔案>首選項>設定 > 搜尋workbench.settings.editor，選中json即可改成json設定；

禁用自動更新

檔案 > 首選項 > 設定（macOS：程式碼 > 首選項 > 設定，搜尋update mode並將設定更改為none。

開啟程式碼提示設定

第一步：點選左下角點選設定圖示，找到並點選“setting”

第二步：到搜尋框裡搜尋“prevent”--->並取消此項的勾選

常用的快捷鍵

高效的使用vscode,記住一些常用的快捷鍵是必不可少的，我給大家羅列了一些日常工作過程中用的多的快捷鍵。

以下以Windows為主，windows的 Ctrl，mac下換成Command就行了

對於行的操作：

重開一行：游標在行尾的話，回車即可；不在行尾，ctrl + enter 向下重開一行；ctrl+shift + enter 則是在上一行重開一行
刪除一行：游標沒有選擇內容時，ctrl + x 剪下一行；ctrl +shift + k 直接刪除一行
移動一行：alt + ↑ 向上移動一行；alt + ↓ 向下移動一行
複製一行：shift + alt + ↓ 向下複製一行；shift + alt + ↑ 向上複製一行
ctrl + z 回退

對於詞的操作：

選中一個詞：ctrl + d

搜尋或者替換：

ctrl + f ：搜尋
ctrl + alt + f：替換
ctrl + shift + f：在專案內搜尋

通過Ctrl + ` 可以開啟或關閉終端

Ctrl+P 快速開啟最近開啟的檔案

Ctrl+Shift+N 開啟新的編輯器視窗

Ctrl+Shift+W 關閉編輯器

Home 游標跳轉到行頭

End 游標跳轉到行尾

Ctrl + Home 跳轉到頁頭

Ctrl + End 跳轉到頁尾

Ctrl + Shift + [ 摺疊區域程式碼

Ctrl + Shift + ] 展開區域程式碼

Ctrl + / 新增關閉行註釋

Shift + Alt +A 塊區域註釋

外掛安裝

在輸入框中輸入想要安裝的外掛名稱，點選安裝即可。安裝後沒有效果，可以重啟vscode

必備外掛

1、View In Browser

在瀏覽器裡預覽網頁必備。執行html檔案

2、vscode-icons

改變編輯器裡面的檔案圖示

3、Bracket Pair Colorizer

給巢狀的各種括號加上不同的顏色。

4、Auto Rename Tag

自動修改匹配的 HTML 標籤。

5、Path Intellisense

智慧路徑提示，可以在你輸入檔案路徑時智慧提示。

6、Markdown Preview

實時預覽 markdown。

7、stylelint

CSS / SCSS / Less 語法檢查

8、Import Cost

引入包大小計算,對於專案打包後體積掌握很有幫助

9、Prettier

比Beautify更好用的程式碼格式化外掛

Vue外掛

vetur

語法高亮、智慧感知、Emmet等

VueHelper

snippet程式碼片段

其它外掛

1、CSScomb

CSS 書寫順序規則，這裡我推薦騰訊 AollyTeam 團隊的規範：

http://alloyteam.github.io/CodeGuide/#css-declaration-orderalloyteam.github.io/CodeGuide/#css-declaration-order

簡單說下這個外掛怎麼用：

在專案的根目錄下建立一個名為csscomb.json的檔案，然後新增一些配置項。也可以將配置項寫入專案的 package.json 檔案中的 csscombConfig 欄位。

至於新增的配置項，CSScomb 提供了示例配置檔案：

https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.jsongithub.com/csscomb/csscomb.js/blob/master/config/csscomb.json

其中的 sort-order 就是 CSS 屬性書寫順序，可以按照自己遵循的規範設定，所以我直接替換成了騰訊的。

這個配置檔案裡面各個欄位的作用可以戳這裡檢視：

csscomb/csscomb.jsgithub.com/csscomb/csscomb.js/blob/master/doc/options.md

2、Turbo Console Log

快捷新增 console.log，一鍵註釋 / 啟用 / 刪除所有 console.log。這也是我最常用的一個外掛

簡單說下這個外掛要用到的快捷鍵:

ctrl + alt + l 選中變數之後，使用這個快捷鍵生成 console.log
alt + shift + c 註釋所有 console.log
alt + shift + u 啟用所有 console.log
alt + shift + d 刪除所有 console.log

3、GitLens

詳細的 Git 提交日誌。

Git 重度使用者必備，尤其是多人協作時：哪一行程式碼，何時、何人提交都有記錄。

媽媽再也不用擔心我背鍋了！

4、css-auto-prefix

自動新增 CSS 私有字首。

5、change-case

轉換命名風格。

6、CSS Peek

定位 CSS 類名。

7、vscode-json

處理 JSON 檔案，用法看圖：

8、Regex Previewer

實時預覽正則表示式的效果。

設定同步

花了一天終於把vscode配置成自己滿意的樣子，如果每換一次電腦就要重新來一次，大家一定會手撕了我。放心，早就幫大家準備好了。Settings Sync，在不同電腦間同步你的外掛。

首先要想在不同的裝置間同步你的外掛, 需要用到 Token 和Gist id

Token 就是你把外掛上傳到 github 上時, 讓你儲存的那段字元，Gist id 在你上傳外掛的那臺電腦上儲存著。

先給大家來三個快捷鍵，後面會用到

1、CTRL+SHIFT+P 我也不知道叫什麼，暫且就叫它功能搜尋功能吧
2、ALT+SHIFT+D 下載配置
3、ALT+SHIFT+U 上傳配置

現在手把手教大家配置：

1、安裝Settings Sync
2、登陸Github>settings>Developer settings>personal access tokens>generate new token，輸入名稱，勾選Gist，提交

3、儲存Github Access Token
4、開啟vscode，Ctrl+Shift+P開啟命令框-->輸入sync-->選擇高階設定-->編輯本地擴充套件設定-->編輯token

5、Ctrl+Shift+P開啟命令框-->輸入sync-->找到update/upload settings，上傳成功後會返回Gist ID，儲存此Gist ID.

6、在 VSCode 裡，依次開啟: 檔案 -> 首選項 -> 設定，然後輸入 Sync 進行搜尋:能找到你gist id

7、若需在其他機器上DownLoad外掛的話，同樣，Ctrl+Shift+P開啟命令框，輸入sync，找到Download settings，會跳轉到Github的Token編輯介面，點Edit，regenerate token，儲存新生成的token，在vscode命令框中輸入此Token，回車，再輸入之前的Gist ID，即可同步外掛和設定

開啟一個本地服務

第一種方式

1.安裝Debugger for Chrome外掛

2.使用ctrl+`快捷鍵開啟終端，然後輸入npm install -g live-server

3.在命令列裡輸入 live-server即可

第二種方式

在寫前端頁面中，經常會在瀏覽器執行HTML頁面，從本地資料夾中直接開啟的一般都是file協議，當代碼中存在http或https的連結時，HTML頁面就無法正常開啟，為了解決這種情況，需要在在本地開啟一個本地的伺服器。本文是利用node.js中的http-server，開啟本地服務，步驟如下：

1.安裝http-server

在終端輸入： $ npm install http-server -g

2.開啟 http-server服務

終端進入目標資料夾，然後在終端輸入：

$ http-server -c-1   （⚠️只輸入http-server的話，更新了程式碼後，頁面不會同步更新）
Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.8.196:8080
Hit CTRL-C to stop the server

3.關閉 http-server服務

按快捷鍵CTRL-C 終端顯示^Chttp-server stopped.即關閉服務成功。

史上最全vscode配置使用教程

軟體下載

vscode設定成中文

VScode使用者設定

常用的快捷鍵

外掛安裝

2、vscode-icons

3、Bracket Pair Colorizer

4、Auto Rename Tag

5、Path Intellisense

6、Markdown Preview

7、stylelint

8、Import Cost

9、Prettier

Vue外掛

vetur

VueHelper

其它外掛

4、css-auto-prefix

5、change-case

8、Regex Previewer

設定同步

開啟一個本地服務

相關推薦