VSCode 前端必備插件

Debugger for Chrome
讓 vscode 映射 chrome 的 debug功能，靜態頁面都可以用 vscode 來
打斷點調試
根目錄下建立文件.vscode/launch.json{"version": "0.2.0","configurations": [{"type": "chrome","request": "launch","name": "Launch Chrome","url": "http://localhost:8080","webRoot": "${workspaceFolder}"}] }

jQuery Code Snippets
jquery 重度患者必須品

Path Intellisense
自動路勁補全，默認不帶這個功能的

ESlint
ESlint 接管原生 js 提示，可以自定制提示規則。

beautify
格式化代碼的工具

Atuo Rename Tag
修改 html 標簽，自動幫你完成尾部閉合標簽的同步修改，不過有些bug。

Auto Close Tag
自動閉合尾部的標簽

GitLens
豐富的git日志插件

Chinese (Simplified) Language Pack for Visual Studio Code
VSCode 中文資源包

vscode-fileheader
頂部注釋模板，可定義作者、時間等信息，并會自動更新最后修改時間，快捷鍵Ctrl+Alt+i

"fileheader.Author": "william", "fileheader.LastModifiedBy": "william"

filesize
在底部狀態欄顯示當前文件大小，點擊后還可以看到詳細創建、修改時間

Bracket Pair Colorizer
讓括號擁有獨立的顏色，易于區分?？梢耘浜先我庵黝}使用。

Code Runner
可以運行C/C++/JAVA/JS/PHP等編程語言，快捷鍵Ctrl+Alt+N
文件運行在終端

"code-runner.runInTerminal": true

Minify
css、js、html壓縮插件
使用：F1運行文件縮小器 Minify。

Markdown Preview Enhanced
Markdown預覽插件

Vue插件

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

"vetur.format.defaultFormatterOptions": {"prettier": {"semi": false, // 不加分號"singleQuote": true // 用單引號} }

VueHelper
snippet代碼片段

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

vscode-element-helper
一款 Element 的 VS Code 插件，對Element-UI提供全方位的支持

微信小程序插件

minapp
微信小程序標簽、屬性的智能補全（同時支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）

wechat-snippet
微信小程序代碼輔助,代碼片段自動完成

Nodejs 一些必備的第三方模塊

live-server
這是一個具有實時重新加載功能的小型開發服務器。使用它來破解HTML / JavaScript / CSS文件，但不能用于部署最終站點。

webpack(4.x)

webpack-cli

gulp

browser-sync
Browsersync能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less等）并自動刷新頁面。更重要的是 Browsersync可以同時在PC、平板、手機等設備下進項調試。

vue-cli

• 2022年9月15日 增加VSCode配置

"[javascript]": {// "editor.defaultFormatter": "HookyQR.beautify","editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}

總結

以上是生活随笔為你收集整理的VSCode 前端必备插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。