VScode-最常用的插件 - - 必備

常用插件:

如果喜歡中文就安裝中文,如果不喜歡就自動忽略.

chinese

 

一、Open-In-Browser

這個是必須安裝的 打開瀏覽器看效果使用的 快捷鍵是alt+b

二、Quokka

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

三、CSS Peek

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

四、HTML Boilerplate

通過使用 HTML模版插件,你就擺脫了爲 HTML 新文件重新編寫頭部和正文標籤的苦惱。你只需在空文件中輸入 html,並按 Tab 鍵,即可生成乾淨的文檔結構。 --如果不安裝這個插件也可以直接使用內置的 !+tab

五、Prettier

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

快捷鍵是 shift+alt+f

六、Color Info

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

七、TODO Highlight

這個插件能夠在你的代碼中標記出所有的 TODO 註釋,以便更容易追蹤任何未完成的業務。在默認的情況下,它會查找 TODO 和 FIXME 關鍵字。當然,你也可以添加自定義表達式。

八、Icon Fonts

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

九、Minify

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

十、Themes

當然,在衆多的實用插件中,豈能少了漂亮的主題呢?你每天都會與你的 VSCode 編輯器進行“親密的接觸”,爲何不把它打扮得更漂亮些呢?這裏有一些幫助你更改側邊欄的配色方案,以及圖標的相關主題,與大家分享:

 

十一、HTML Snippets

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

十二、HTML CSS Support

讓HTML標籤上寫class智能提示當前項目所支持的樣式

十三、JQuery Code Snippets

jquery提示工具

 

十四、Path Intellisense 

自動路徑補全、默認不帶這個功能

十五、Npm Intellisense

require 時的包提示

 

十六、Document this 

Js的註釋模板

十七、ESlint

ESlint接管原聲js提示,可以自定製體會規則。這個比較高玩

十八、Project Manager

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

十九、Typings Installer

安裝vscode 的代碼提示依賴庫,基於typtings的,比如提示angular或者jQuery只能感知、至於什麼是typtings自己去百度。

二十、Bootstrap 4 Sinnpet

常用bootstrap的可以下

二十一、Auto Rename Tag

修改html標籤,自動幫你完成尾部閉合標籤的同步修改,和webstorm一樣。

 

二十二、JavaScript Atom Grammar

使用atom風格的語法高亮、對於習慣瀏覽atom風格代碼高亮的人實用。 

這個看個人需求吧。不是一定需要下載的

二十三、code runner

這個是好東西,且用且珍惜。

二十四、Easy less

使用less的盆友一定要安裝這個,不要安裝錯了。

 

二十五、Vetur —— 語法高亮、智能感知、Emmet等 
包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化選中代碼,兩個Ctrl需要同時按着)

二十六、Bracket Pair Colorizer

讓括號擁有獨立的顏色,易於區分。可以配合任意主題使用。

二十七、Image preview

懸停時顯示圖像預覽

 

如果需要開發小程序 可以安裝一下這些插件, 

但是我還是建議大家去使用HBuilder...

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章