工欲善其事，必先利其器。想要優(yōu)雅且高效的編寫代碼，必須熟練使用一款前端開發(fā)工具。但前端開發(fā)工具數(shù)不勝數(shù)，像HBuilder、Sublime Text、WebStorm、Visual Studio Code......等等,其中VSCode以其輕量且強大的代碼編輯功能和豐富的插件生態(tài)系統(tǒng)，獨受前端工師的青睞。網(wǎng)上有很多vscode的配置以及使用博客，但都沒有本篇那么詳細且全面。

軟件下載

直接在官網(wǎng)進行下載，后者下載我們準備好的。

Visual Studio Code insider 32/64位 v1.100.0 官方最新安裝版

• 類型：編程工具
• 大?。?/span>102MB
• 語言：簡體中文
• 時間：2025-04-09

查看詳情

首頁

vscode設(shè)置成中文

vscode默認的語言是英文，對于英文不好的小伙伴可能不太友好。簡單幾步教大家如何將vscode設(shè)置成中文。

• 按快捷鍵“Ctrl+Shift+P”。
• 在“vscode”頂部會出現(xiàn)一個搜索框。
• 輸入“configure language”，然后回車。
• “vscode”里面就會打開一個語言配置文件。
• 將“en-us”修改成“zh-cn”。
• 按“Ctrl+S”保存設(shè)置。
• 關(guān)閉“vscode”，再次打開就可以看到中文界面了。

當然如果你不愿意設(shè)置，也可以直接安裝它的中文插件，還是很人性化的。

VScode用戶設(shè)置

1. 打開設(shè)置

文件--首選項--設(shè)置，打開用戶設(shè)置。VScode支持選擇配置，也支持編輯setting.json文件修改默認配置。個人更傾向于編寫json的方式進行配置，下面會附上我個人的配置代碼

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

• （1）editor.fontsize用來設(shè)置字體大小，可以設(shè)置editor.fontsize : 14;
• （2）files.autoSave這個屬性是表示文件是否進行自動保存，推薦設(shè)置為onFocusChange——文件焦點變化時自動保存。
• （3）editor.tabCompletion用來在出現(xiàn)推薦值時，按下Tab鍵是否自動填入最佳推薦值，推薦設(shè)置為on;
• （4）editor.codeActionsOnSave中的source.organizeImports屬性，這個屬性能夠在保存時，自動調(diào)整 import 語句相關(guān)順序，能夠讓你的 import 語句按照字母順序進行排列，推薦設(shè)置為true,即"editor.codeActionsOnSave": { "source.organizeImports": true }；
• （5）editor.lineNumbers設(shè)置代碼行號,即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,
  // 重新設(shè)定tabsize
  "editor.tabSize": 2,
  //失去焦點后自動保存
  "files.autoSave": "onFocusChange",
  // #值設(shè)置為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", //也可以設(shè)置為“auto”，效果會不一樣
          "wrap_line_length": 200,
          "end_with_newline": false,
          "semi": false,
          "singleQuote": true
      },
      "prettier": {
          "semi": false,
          "singleQuote": true
      }
  }
}

最近經(jīng)常有人微信問我，這個配置代碼寫在哪里？

新版的vscode設(shè)置默認為UI的設(shè)置，而非之前的json設(shè)置。如果你想復制我上面這段代碼進行配置，可以進行下面的修改

文件>首選項>設(shè)置 > 搜索workbench.settings.editor，選中json即可改成json設(shè)置；

禁用自動更新

文件 > 首選項 > 設(shè)置（macOS：代碼 > 首選項 > 設(shè)置，搜索update mode并將設(shè)置更改為none。

開啟代碼提示設(shè)置

第一步：點擊左下角點擊設(shè)置圖標，找到并點擊“setting”

第二步：到搜索框里搜索“prevent”--->并取消此項的勾選

常用的快捷鍵

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

以下以Windows為主，windows的 Ctrl，mac下?lián)Q成Command就行了

對于 行 的操作：

• 重開一行：光標在行尾的話，回車即可；不在行尾，ctrl + enter 向下重開一行；ctrl+shift + enter 則是在上一行重開一行
• 刪除一行：光標沒有選擇內(nèi)容時，ctrl + x 剪切一行；ctrl +shift + k 直接刪除一行
• 移動一行：alt + ↑ 向上移動一行；alt + ↓ 向下移動一行
• 復制一行：shift + alt + ↓ 向下復制一行；shift + alt + ↑ 向上復制一行
• ctrl + z 回退

對于 詞 的操作：

選中一個詞：ctrl + d

搜索或者替換：

• ctrl + f ：搜索
• ctrl + alt + f： 替換
• ctrl + shift + f：在項目內(nèi)搜索

通過Ctrl + ` 可以打開或關(guān)閉終端

Ctrl+P 快速打開最近打開的文件

Ctrl+Shift+N 打開新的編輯器窗口

Ctrl+Shift+W 關(guān)閉編輯器

Home 光標跳轉(zhuǎn)到行頭

End 光標跳轉(zhuǎn)到行尾

Ctrl + Home 跳轉(zhuǎn)到頁頭

Ctrl + End 跳轉(zhuǎn)到頁尾

Ctrl + Shift + [ 折疊區(qū)域代碼

Ctrl + Shift + ] 展開區(qū)域代碼

Ctrl + / 添加關(guān)閉行注釋

Shift + Alt +A 塊區(qū)域注釋

插件安裝

在輸入框中輸入想要安裝的插件名稱，點擊安裝即可。安裝后沒有效果，可以重啟vscode

必備插件1、open in browser

在瀏覽器里預覽網(wǎng)頁必備。運行html文件

View In Browser 已被棄用，可以使用open in browser 直接運行html文件

2、vscode-icons

改變編輯器里面的文件圖標

3、Auto Rename Tag

自動修改匹配的 HTML 標簽。

4、Path Intellisense

智能路徑提示，可以在你輸入文件路徑時智能提示。

5、Markdown Preview

實時預覽 markdown。

6、stylelint

CSS / SCSS / Less 語法檢查

7、Import Cost

引入包大小計算,對于項目打包后體積掌握很有幫助

8、Prettier

比Beautify更好用的代碼格式化插件

可以配置.prettierc.js文件,配合eslint、git hooks 一起使用，提升項目代碼的規(guī)范性

module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 不使用縮進符，而使用空格
    useTabs: false,
    // 使用 4 個空格縮進
    tabWidth: 4,
    tabSize: 4,
    // 行尾需要有分號
    semi: true,
    // 使用單引號
    singleQuote: true,
    // 對象的 key 僅在必要時用引號
    quoteProps: 'as-needed',
    // jsx 不使用單引號，而使用雙引號
    jsxSingleQuote: false,
    // 末尾不需要逗號 'es5'  none
    trailingComma: 'es5',
    // 大括號內(nèi)的首尾需要空格
    bracketSpacing: true,
    // jsx 標簽的反尖括號需要換行
    jsxBracketSameLine: false,
    // 箭頭函數(shù)，只有一個參數(shù)的時候，也需要括號
    arrowParens: 'always',
    // 每個文件格式化的范圍是文件的全部內(nèi)容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要寫文件開頭的 @prettier
    requirePragma: false,
    // 不需要自動在文件開頭插入 @prettier
    insertPragma: false,
    // 使用默認的折行標準
    proseWrap: 'preserve',
    // 根據(jù)顯示樣式?jīng)Q定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 換行符使用 lf 結(jié)尾是 \n \r \n\r auto
    endOfLine: 'lf',
}; 

9、code runner

直接運行.js等文件，在控制臺輸出結(jié)果

點擊右上角的運行按鈕

Vue插件

vetur

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

VueHelper

snippet代碼片段

volar

開發(fā)vue2的時候使用vetur 幫我們提供良好的代碼智能提示，但使用vue3的時候 vetur 并不能給我們提供良好的代碼提示，所以volar順應(yīng)而生。與vetur相同，volar是一個針對vue的vscode插件，不過與vetur不同的是，volar提供了更為強大的功能（使用的時候需要把vetur 設(shè)置為禁用狀態(tài)，或者直接卸載）

還可以配合TypeScript Vue Plugin (Volar)一起使用

提供了編輯器快捷分割和vite預覽功能

點擊右上方三角代碼將切成兩塊script style是一塊template是一塊

點擊vite 圖標還支持快速預覽功能

其它插件

1、CSScomb

CSS 書寫順序規(guī)則，這里我推薦騰訊 AollyTeam 團隊的規(guī)范：

簡單說下這個插件怎么用：

在項目的根目錄下創(chuàng)建一個名為csscomb.json的文件，然后添加一些配置項。也可以將配置項寫入項目的 package.json 文件中的 csscombConfig 字段。

至于添加的配置項，CSScomb 提供了示例配置文件：

其中的 sort-order 就是 CSS 屬性書寫順序，可以按照自己遵循的規(guī)范設(shè)置，所以我直接替換成了騰訊的。

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 重度使用者必備，尤其是多人協(xié)作時：哪一行代碼，何時、何人提交都有記錄。

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

4、css-auto-prefix

自動添加 CSS 私有前綴。

5、change-case

轉(zhuǎn)換命名風格。

6、CSS Peek

定位 CSS 類名。

7、vscode-json

處理 JSON 文件，用法看圖：

8、Regex Previewer

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

9、韭菜盒子

大家如果平時也買買基金和股票，上班又不好一直看手機，推薦安裝個韭菜盒子，一邊寫代碼一邊看股票

安裝之后，你的vscode左側(cè)會多出一個圖標，點擊它添加自己關(guān)注的基金和股票

設(shè)置同步

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

首先要想在不同的設(shè)備間同步你的插件, 需要用到 Token 和Gist id

Token 就是你把插件上傳到 github 上時, 讓你保存的那段字符，Gist id 在你上傳插件的那臺電腦上保存著。

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

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

現(xiàn)在手把手教大家配置：

• 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-->選擇高級設(shè)置-->編輯本地擴展設(shè)置-->編輯token
• 5、Ctrl+Shift+P打開命令框-->輸入sync-->找到update/upload settings，上傳成功后會返回Gist ID，保存此Gist ID.

• 6、在 VSCode 里，依次打開: 文件 -> 首選項 -> 設(shè)置，然后輸入 Sync 進行搜索:能找到你gist id

• 7、若需在其他機器上DownLoad插件的話，同樣，Ctrl+Shift+P打開命令框，輸入sync，找到Download settings，會跳轉(zhuǎn)到Github的Token編輯界面，點Edit，regenerate token，保存新生成的token，在vscode命令框中輸入此Token，回車，再輸入之前的Gist ID，即可同步插件和設(shè)置

開啟一個本地服務(wù)

第一種方式

1.安裝Debugger for Chrome插件

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

3.在命令行里輸入 live-server即可

第二種方式

在寫前端頁面中，經(jīng)常會在瀏覽器運行HTML頁面，從本地文件夾中直接打開的一般都是file協(xié)議，當代碼中存在http或https的鏈接時，HTML頁面就無法正常打開，為了解決這種情況，需要在在本地開啟一個本地的服務(wù)器。 本文是利用node.js中的http-server，開啟本地服務(wù)，步驟如下：

1.安裝http-server

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

2.開啟 http-server服務(wù)

終端進入目標文件夾，然后在終端輸入：

$ 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.關(guān)閉 http-server服務(wù)

按快捷鍵CTRL-C 終端顯示^Chttp-server stopped.即關(guān)閉服務(wù)成功。

最新評論