目錄

1.圖標插件?Atom Material Icons

?2.Translation

3.彩色括號 Rainbow Brackets

4.高亮括號 HighlightBracketPair

?5.代碼縮略圖 CodeGlance2

6.正則插件 any-rule

7.換主題插件 Material Theme UI Lite

?8.彩色進度條 Nyan Progress Bar

9.Key promoter

10.idea px 2 rem

---

1.圖標插件?Atom Material Icons

Enable File Icons 文件圖標
Enable Directory Icons 目錄圖標
Enable UI Icons 頂部UI 圖標

?

?2.Translation

????????對于英語不是很好的開發者，在取變量名或者文件名字的時候會犯難。那么就可以給編輯器裝一個這個翻譯插件。使用也很方便，可以直接選中中文右鍵翻譯，也可以直接選中用快捷鍵Ctrl+shift+Y。

3.彩色括號 Rainbow Brackets

可以實現配對括號相同顏色。

4.高亮括號 HighlightBracketPair

會在左側代碼行數那顯示括號范圍，比彩虹括號插件更加直觀而且不容易看花眼。

?5.代碼縮略圖 CodeGlance2

6.正則插件 any-rule

安裝好后使用方法：
法一：右鍵->AnyRule
法二：Alt+a
會打開下圖彈窗就可選擇對應或搜索正則即可?

7.換主題插件 Material Theme UI Lite

?Material Theme UI 主題 Atom One Dark 更推薦這個
a. 找到下面的 Tabs ——> Tab Height ，設置為 26，這個高度是我平時開發覺得的最舒服的高度。
b. 找到下面的 Compact ，勾選 Compact Statusbar 和 Compact Menus ，這個緊湊度最舒服
c. 找到下面的 Components ，勾選 Accent Scrollbars 、 Transparent Scrollbars 和 Tabs Shadow，這個設置最舒適。

.ignore
直接在文件列表中右鍵，可以快速根據模板生成一系列的 .ignore 文件，比如 .dockerignore、.gitignore 等等。

GitToolBox
其實就是給 ide 擴展了一下 git 相關的功能，比如會自動幫你 fetch 最新的代碼（我之前都是兩下 shift，然后輸入 fetch 查找到對應的命令然后回車，麻煩），單行代碼后面顯示提交信息等等。
在代碼中 會有對應log顯示

?8.彩色進度條 Nyan Progress Bar

9.Key promoter

推薦理由：只要是鼠標操作能夠用快捷鍵替代的，Key Promoter 會彈出提示框，告知你用什么快捷鍵替代。

10.idea px 2 rem

為了保證網頁的響應式設計，我們在H5開發中用的單位一般都是rem

????????在代碼中選中xx px，MAC電腦按快捷鍵option + d，Windows 為alt + d，則可以實現自動將xx px轉換為xx rem

參考鏈接：https://blog.csdn.net/qq_45222331/article/details/126185606

總結

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

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