前言
作為一個FE開發(fā)者，在日常工作中用的最多的可能就是WebStorm與VsCode，我在工作的這幾年一直使用的是WebStorm進行開發(fā)，今天為大家?guī)砦夜ぷ髦惺褂玫囊恍￤ebstorm插件以及一些可以提效的配置方法，希望能夠幫助使用WebStorm的朋友們更加高效工作，多余時間可以多摸摸??！
最終效果展示
image
插件推薦
下面會詳細介紹每一個插件的安裝、使用建議，推薦指數(shù)?
.ignore: 版本管理工具的忽略文件插件
- 插件描述：支持創(chuàng)建多種.ignore文件，會默認設(shè)置到需要忽略的文件或文件夾，我常用的是.gitignore，用于常見前端常見的需要忽略提交的文件，如node_modules，dist等；支持將文件旋選中右鍵進行添加到.gitignore；
- 安裝方式：webstorm內(nèi)部插件市場搜索
.ignore或官方地址下載到本地進行安裝 - 官方地址：https://plugins.jetbrains.com/plugin/7495--ignore
- 使用效果：個人感覺很實用，會非常方便，有時候如果已經(jīng)將文件添加到git提交緩存中的時候，需要使用命令清除緩存把文件撤銷出來，這個插件可以幫助你完成這一步。更多功能需要自己使用進行發(fā)掘
-
推薦指數(shù)：??????????
image
Power Mode II: 打字特效
- 插件描述：炫酷的打字效果，除了炫酷，沒任何卵用，屏幕抖動的看著難受；
- 安裝方式：webstorm內(nèi)部插件市場搜索
Power Mode II或官方地址下載到本地進行安裝 - 官方地址：https://plugins.jetbrains.com/plugin/8251-power-mode-ii
- 使用效果：裝13可以，效果不大
-
推薦指數(shù)：????
image
activate-power-mode: 打字特效
- 插件描述：與Power Mode II類似，效果更爆炸
- 安裝方式：webstorm內(nèi)部插件市場搜索
activate-power-mode或官方地址下載到本地進行安裝 - 官方地址：https://plugins.jetbrains.com/plugin/8330-activate-power-mode
- 使用效果：頭暈式摸魚
- 推薦指數(shù)：????
[站外圖片上傳中...(image-468ec5-1628130055435)]
CodeSearch: 右鍵搜索(通過Google搜索,墻內(nèi)不能用)
- 插件描述：選中某段內(nèi)容，可以直接右鍵通過搜索引擎搜索進行搜索；需要配置搜索引擎，可以配置Baidu, Google, StackOverflow and GitHub四種
- 安裝方式：webstorm內(nèi)部插件市場搜索
codeSearch或官方地址下載到本地進行安裝 - 官方地址：https://plugins.jetbrains.com/plugin/12578-codesearch
- 使用效果：實用性挺高，很方便的幫助搜索，安裝以后就可以選中要搜索的東西
-
推薦指數(shù)：??????????
image.png
image.png
Rainbow Brackets: 括號換色提示插件
- 插件描述：代碼中如果嵌套較深的話，找前面的括號與后面對應的地方會很麻煩，這款插件使用不同顏色進行標記，可以很方便的找到對應的開始和結(jié)尾的括號
- 安裝方式：webstorm內(nèi)部插件市場搜索
.ignore或官方地址下載到本地進行安裝 - 官方地址：https://plugins.jetbrains.com/plugin/10080-rainbow-brackets
- 使用效果：個人感覺比較方便，可以快速定位，并且代碼界面也會看起來更好看一點，愉悅心情，開心coding；
-
推薦指數(shù)：????????
image
Translation: 翻譯插件
- 插件描述：翻譯插件，可以便捷的在WebStorm中進行翻譯，省去了去瀏覽器進行翻譯的操作，也支持右鍵方式選中翻譯
- 安裝方式：webstorm內(nèi)部插件市場搜索
Translation或官方地址下載到本地進行安裝 - 官方地址：https://plugins.jetbrains.com/plugin/8579-translation
- 使用效果：翻譯更便捷啦，但是還是要多動腦子想一想呀
-
推薦指數(shù)：????????
image.png
image.png
AceJump: 光標快速定位
- 插件描述：AceJump 允許您將插入符號快速導航到編輯器中可見的任何位置，使用方式快捷鍵：Ctrl+;
- 安裝方式：webstorm內(nèi)部插件市場搜索
AceJump或官方地址下載到本地進行安裝 - 官方地址：https://plugins.jetbrains.com/plugin/7086-acejump
- 使用效果：用的不是很多，得使用快捷鍵，也不是很方便，馬馬虎虎吧，看個人喜好
-
推薦指數(shù)：????
image
Material Theme UI: 設(shè)置主題，不好的是大部分是暗色主題，亮色的特別亮，但是支持的文件圖標不錯
- 插件描述：眾所周知，一款很出名的主題
- 安裝方式：webstorm內(nèi)部插件市場搜索
Material Theme UI或官方地址下載到本地進行安裝 - 官方地址：https://plugins.jetbrains.com/plugin/8006-material-theme-ui
- 使用效果：根據(jù)個人喜好吧，自己喜歡的才是最好的
-
推薦指數(shù)：????????
image
CodeGlance: 右側(cè)小地圖導航，像sublime text中一樣的那個，可以配置寬度
- 插件描述：可以在打開的窗口右邊顯示小地圖，用于快速定位跳轉(zhuǎn)，尤其是針對很多行的文件，就很方便的；
- 安裝方式：webstorm內(nèi)部插件市場搜索
CodeGlance或官方地址下載到本地進行安裝 - 官方地址：https://plugins.jetbrains.com/plugin/7275-codeglance
- 使用效果：可以配置小地圖寬度，可以設(shè)置固定寬，也可以拖拉設(shè)置寬度
-
推薦指數(shù)：??????????
image.png
Codota: AI代碼生成，自動聯(lián)想，支持javaScript和java；
- 插件描述：代碼聯(lián)想，不用過多解釋了
- 安裝方式：webstorm內(nèi)部插件市場搜索
Codota或官方地址下載到本地進行安裝 - 官方地址：https://plugins.jetbrains.com/plugin/7638-codota-ai-autocomplete-for-java-and-javascript
- 使用效果：我用的覺得還行，它可以快捷顯示之前輸入過的內(nèi)容，或者快捷生成函數(shù)等，可以提升寫代碼的速度
-
推薦指數(shù)：??????????
image
Atom Material Icons: 文件圖標、系統(tǒng)圖標會更好看；
- 插件描述：為文件夾、文件增加圖標，讓編譯器看起來更美觀，也是一款可以愉快coding的好用插件
- 安裝方式：webstorm內(nèi)部插件市場搜索
Atom Material Icons或官方地址下載到本地進行安裝 - 官方地址：https://plugins.jetbrains.com/plugin/10044-atom-material-icons
- 使用效果：針不戳啊針不戳
-
推薦指數(shù)：??????????
image.png
GitToolBox: git提交記錄插件，鼠標在某行代碼的時候可以看見是誰在什么時候提交的，提交信息是什么；
- 插件描述：沒記錯的話VsCode里面也有一款類似的插件，可以看見每行代碼是誰、在什么時候提交的，提交message是什么，不用再使用Annote with Git Blame了
- 安裝方式：webstorm內(nèi)部插件市場搜索
GitToolBox或官方地址下載到本地進行安裝 - 官方地址：https://plugins.jetbrains.com/plugin/7499-gittoolbox
- 使用效果：方便啊方便，非常方便的?。∫豢从衎ug，就知道是誰寫的這垃圾代碼了！
-
推薦指數(shù)：??????????
image.png
Paste images into MarkDown: 在編寫markdown時，如果需要添加圖片，則復制以后可直接使用ctrl+v或command+v進行粘貼，會彈出一個彈框設(shè)置圖片名稱、路徑，十分方便
- 插件描述：在WebStorm寫markdwon文檔的時候，有時候需要增加圖片可能要先將圖片放到文件夾，再在markdown中引用，那么這個插件可以很好的解決問題，剪貼板上有圖片信息，直接ctrl+V進行粘貼
- 安裝方式：webstorm內(nèi)部插件市場搜索
Paste images into MarkDown或官方地址下載到本地進行安裝 - 官方地址：https://plugins.jetbrains.com/plugin/8446-paste-images-into-markdown
- 使用效果：提升效率的利器，還可以設(shè)置圖片存儲路徑，是否是圓角、圖片大小等
-
推薦指數(shù)：??????????
image.png
好啦，可以寫出來的常用的就這些基本插件啦，更多的插件可以去我的博客了解：https://blog.wangboweb.site/2019/08/17/63952.html
設(shè)置一下
字體以及UI、展示風格
image.png
文件模板設(shè)置
詳情：https://blog.wangboweb.site/2021/08/04/60426.html
image.png
配置信息備份
可以備份到云上，也可以備份到j(luò)etbrains 賬戶上
image.png
設(shè)置背景圖片
image.png
總結(jié)
大概就是這么多了，其實很多功能在日常開發(fā)中不一定會用到，但是一旦發(fā)現(xiàn)了，就會很順手，需要自己多多探索，打造一個適合自己的編譯器，才能真正的提高開發(fā)效率，這樣就有更多的機會去摸魚魚?。。?/p>
另外有人翻譯了WebStorm的官方幫助文檔，有需要的可以去看看。
中文幫助文檔：https://www.kancloud.cn/zxhy/webstorm/182199
官方英文幫助文檔：https://www.jetbrains.com/help/webstorm/meet-webstorm.html
