vscode 前端常用插件


1. 安裝中文簡體VSCode插件



2. 安裝Vetur插件

Vetur支持.vue文件的語法高亮顯示,除了支持template模板以外,還支持大多數主流的前端開發腳本和插件,比如Sass和TypeScript

安裝前:

安裝后:

3. 安裝vue vscode snippets

vue語法提示,加強vue的便捷寫法

4. 安裝Auto Close Tag

自動閉合標簽

5. 安裝 Bracket Pair Colorizer

對括號進行着色,方便區分

6. 安裝 Copy Relative Path

用於復制文件的完整路徑和相對路徑

安裝后:

7. 安裝Path Intellisense

路徑自動感知,在配置文件中配置`@`后我們就可以很方便快捷的引用各種文件了

安裝后:

8. 安裝Vue Peek

用於Vue快速查看組件定義以及組件跳轉

安裝后:

9. 安裝vscode-element-helper

針對 Element 標簽的屬性以及方法進行區分,並且提供自動補全提示。

10. 安裝Auto Rename Tag

自動完成另一側標簽的同步修改

11. Beautify

格式化代碼,值得注意的是,beautify插件支持自定義格式化代碼規則

12. Debugger for Chrome

映射vscode上的斷點到chrome上,方便調試

13. Courier New

一款好看字體

14. GitLens

方便查看git日志,git重度使用者必備

15. HTML CSS Support

智能提示CSS類名以及id

16. HTML Snippets

智能提示HTML標簽,以及標簽含義

17. JavaScript(ES6) code snippets

ES6語法智能提示,以及快速輸入,不僅僅支持.js,還支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各種包含js代碼文件的時間

18. jQuery Code Snippets

jQuery代碼智能提示

19. Markdown Preview Enhanced

實時預覽markdown,markdown使用者必備

20.markdownlint

markdown語法糾錯

21. Material Icon Theme

個人認為最好的vscode圖標主題,支持更換不同色系的圖標,值得點出的是,該插件更新極其頻繁,基本和vscode更新頻率保持一致

22. open in browser

vscode不像IDE一樣能夠直接在瀏覽器中打開html,而該插件支持快捷鍵與鼠標右鍵快速在瀏覽器中打開html文件,支持自定義打開指定的瀏覽器,包括:Firefox,Chrome,Opera,IE以及Safari

23. React/Redux/react-router Snippets

React/Redux/react-router語法智能提示

24. vscode-icon

讓 vscode 資源樹目錄加

25. HTMLHint

html代碼檢測

26. Project Manager

在多個項目之前快速切換的工具

27. fileheader

頂部注釋模板,可定義作者、時間等信息,並會自動更新最后修改時間,快捷鍵ctrl+alt+i在文件開頭自動輸入作者信息和修改信息等內容

28.filesize

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

29. quokka

一個調試工具插件,能夠根據你正在編寫的代碼提供實時反饋。它易於配置,並能夠預覽變量的函數和計算值結果。另外,在使用 JSX 或 TypeScript 項目中,它能夠開箱即用

30. CSS Peek

使用此插件,你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時,選擇“ Go to Definition 和 Peek definition ”選項,它便會給你發送樣式設置的 CSS 代碼。

31. HTML Boilerplate

通過使用 HTML 模版插件,你就擺脫了為 HTML 新文件重新編寫頭部和正文標簽的苦惱。你只需在空文件中輸入 html,並按 Tab 鍵,即可生成干凈的文檔結構。

32. Prettier

Prettier 是目前 Web 開發中最受歡迎的代碼格式化程序。安裝了這個插件,它就能夠自動應用Prettier,並將整個 JS 和 CSS 文檔快速格式化為統一的代碼樣式。如果你還想使用 ESLint,那么還有個 Prettier – Eslint 插件,你可不要錯過咯!

33. Color Info

提供你在 CSS中使用顏色的相關信息。你只需在顏色上懸停光標,就可以預覽色塊中色彩模型的(HEX、 RGB、HSL 和 CMYK)相關信息了。

34. Icon Fonts

這是一個能夠在項目中添加圖標字體的插件。該插件支持超過 20 個熱門的圖標集,包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons

35. Minify

這是一款用於壓縮合並 JavaScript 和 CSS 文件的應用程序。它提供了大量自定義的設置,以及自動壓縮保存並導出為.min文件的選項。它能夠分別通過 uglify-js、clean-css 和 html-minifier,與 JavaScript、CSS 和 HTML 協同工作。使用F1 運行文件縮小器Minify

36. VueHelper

snippet代碼片段

37. Vue 2 Snippets

38. Git History

git提交歷史

39. Setting Sync

同步你得設置和插件

40. Reactjs code snippets

一個 React 自動補工具。

41. Terminal

vs code 內置的命令行插件,也比較實用。

42. npm Intellisense

用於在import語句中自動填充npm模塊。

43. npm

此擴展支持運行文件中定義的npm腳本,package.json並根據中定義的依賴項驗證已安裝的模塊package.json

44.Window Colors

每個VSCode窗口都可以獨特地自動着色。

41.live server 插件

開啟本地服務器


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM