工欲善其事必先利其器，從事前端開發已近兩年多，休閑時候收錄一些覺得常用的插件。

DOM操作

Auto Close Tag

自動閉合HTML標簽。

Auto Rename Tag

自動重命名標簽。

Autoprefixer

解析CSS，SCSS，LESS并自動添加前綴。

路徑補全

Path Intellisense

自動補全代碼中的路徑和文件名。

Npm Intellisense

自動完成導入語句中的npm模塊。

代碼片段提示

HTML Snippets

超級實用且初級的 H5代碼片段以及提示。

IntelliSense for CSS class names

HTML、CSS 類名智能命名提示。

JavaScript (ES6) code snippets

提示ES6語法片段。

美觀

vscode-icons

將項目中不同類型的文件或文件夾通過圖標區分出來。

Guides

代碼的標簽對齊線。

Bracket Pair Colorizer

讓括號擁有獨立的顏色，易于區分。

代碼格式化

Prettier - Code formatter

更漂亮的格式化。

ESLint

符合代碼風格的代碼。

移動端

px to rem

如果你有px轉rem困惑的話，只需要插件中的基數默認16px，便可一鍵轉換。轉換快捷鍵 option+z

項目管理

Project Manager

如果你的公司有非常多項目，需要來回切換的話，推薦Project Manage可以讓你輕松在項目直接替換，無需在導入項目文件夾打開。

Bookmarks

書簽，在代碼中標記/取消標記位置。

Git

GitLens

查看代碼作者的身份，無縫地導航和瀏覽 Git存儲庫。這就意味著你寫的坑，要自己填，嚴重的話還要被罵。

Git History

查看和搜索git日志以及圖形和詳細信息。

調試

Code Runner

支持C, C++, Java, JavaScript, PHP, Python等語言的代碼的立即執行。使用方法鼠標右鍵 Run Code運行該文件。

Live Server

類似搭建本地服務器頁面，修改直接生效。

html頁面下鼠標右鍵 open with Live Server打開的頁面就是。

Quokka.js

Quokka.js 會在你輸入時自動計算結果，并在 IDE 中打印結果。

Vue框架

vetur

• 語法高亮
• 片段
• Emmet
• 整理/錯誤檢查
• 格式化
• 自動完成
• 調試

Vue Peek

快速跳轉或瀏覽作為組件(從模板)或模塊導入(從腳本)引用的文件。

Vue 2 Snippets

提示Vue 2 的 API，非常方便。

React框架

React.js code snippets

用ES6語法去開發React.js應用非常方便。

提示類

Import Cost

計算引入包大小，可能引入包大太，就實現一小部分的功能，可能找其它包替代，或者自己實現該功能。

編程時間管理

WakaTime

從你的編程時間中生成數據報表。

主題

One Dark Pro

Atom中黑暗主題。非常不錯，本人一直在用。

同步VScode配置

Settings Sync

如果你有多臺設備，或者以后不想在重新配置vscode，推薦你用Settings Sync，將vscode上傳到gist，以后登錄賬號就可以一鍵完成。

不懂得操作的話，可以看 官網教程

總結

以上是生活随笔為你收集整理的npm 安装less插件_2020 VSCode插件推荐的全部內容，希望文章能夠幫你解決所遇到的問題。

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