前言
作為一個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: 括號換色提示插件
- 插件描述：代碼中如果嵌套較深的話链瓦，找前面的括號與后面對應(yīng)的地方會很麻煩拆魏，這款插件使用不同顏色進行標(biāo)記，可以很方便的找到對應(yīng)的開始和結(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: 光標(biāo)快速定位
- 插件描述：AceJump 允許您將插入符號快速導(dǎo)航到編輯器中可見的任何位置突梦，使用方式快捷鍵：Ctrl+;
- 安裝方式：webstorm內(nèi)部插件市場搜索
AceJump或官方地址下載到本地進行安裝 - 官方地址：https://plugins.jetbrains.com/plugin/7086-acejump
- 使用效果：用的不是很多诫舅，得使用快捷鍵，也不是很方便宫患，馬馬虎虎吧刊懈，看個人喜好
-
推薦指數(shù)：????
image
Material Theme UI: 設(shè)置主題，不好的是大部分是暗色主題娃闲，亮色的特別亮虚汛，但是支持的文件圖標(biāo)不錯
- 插件描述：眾所周知，一款很出名的主題
- 安裝方式：webstorm內(nèi)部插件市場搜索
Material Theme UI或官方地址下載到本地進行安裝 - 官方地址：https://plugins.jetbrains.com/plugin/8006-material-theme-ui
- 使用效果：根據(jù)個人喜好吧皇帮，自己喜歡的才是最好的
-
推薦指數(shù)：????????
image
CodeGlance: 右側(cè)小地圖導(dǎo)航卷哩，像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: 文件圖標(biāo)谷丸、系統(tǒng)圖標(biāo)會更好看；
- 插件描述：為文件夾应结、文件增加圖標(biāo)刨疼，讓編譯器看起來更美觀，也是一款可以愉快coding的好用插件
- 安裝方式：webstorm內(nèi)部插件市場搜索
Atom Material Icons或官方地址下載到本地進行安裝 - 官方地址：https://plugins.jetbrains.com/plugin/10044-atom-material-icons
- 使用效果：針不戳啊針不戳
-
推薦指數(shù)：??????????
image.png
GitToolBox: git提交記錄插件鹅龄，鼠標(biāo)在某行代碼的時候可以看見是誰在什么時候提交的揩慕，提交信息是什么；
- 插件描述：沒記錯的話VsCode里面也有一款類似的插件扮休，可以看見每行代碼是誰迎卤、在什么時候提交的，提交message是什么玷坠，不用再使用Annote with Git Blame了
- 安裝方式：webstorm內(nèi)部插件市場搜索
GitToolBox或官方地址下載到本地進行安裝 - 官方地址：https://plugins.jetbrains.com/plugin/7499-gittoolbox
- 使用效果：方便啊方便蜗搔，非常方便的！八堡！一看有bug樟凄，就知道是誰寫的這垃圾代碼了！
-
推薦指數(shù)：??????????
image.png
Paste images into MarkDown: 在編寫markdown時秕重，如果需要添加圖片不同，則復(fù)制以后可直接使用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萨醒、展示風(fēng)格
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ā)效率综慎，這樣就有更多的機會去摸魚魚！Ｇ诼示惊！
另外有人翻譯了WebStorm的官方幫助文檔，有需要的可以去看看愉镰。
中文幫助文檔：https://www.kancloud.cn/zxhy/webstorm/182199
官方英文幫助文檔：https://www.jetbrains.com/help/webstorm/meet-webstorm.html
