經常會有小夥伴過來私信我，讓我給他們推薦一下前端開發工具，我幾乎都是毫不猶豫地就說 " WebSotrm "，原因我當時也沒給他們細講，因為這款開發工具功能實在是太全了，一句兩句說不清楚，是以我準備寫一篇文章告訴大家為什麼要選擇WebStorm
- 公衆号：前端印象
- 不定時有送書活動，記得關注~
- 關注後回複對應文字領取：【面試題】、【前端必看電子書】、【資料結構與算法完整代碼】、【前端技術交流群】
WebStorm
- 一、介紹WebStorm
- 二、WebStorm的亮點
-
- （1）自動儲存
- （2）浏覽器快捷方式
- （3）檔案操作曆史記錄
- （4）代碼格式化
- （5）内嵌git
- （6）超強的文法提示
- （7）代碼高亮
- （8）個性化配置
- （9）拼寫檢查/重複代碼檢查
- （10）内置伺服器功能
- （11）代碼和檔案關聯能力
- （12）自帶檔案模闆
- （13）無需配置直接上手
- 三、WebStorm缺點
- 四、安裝WebStorm
-
- （1）準備好相關檔案
- （2）安裝webstorm
- 五、結束語
一、介紹WebStorm
WebStorm 是 jetbrains 公司旗下一款JavaScript 開發工具。被廣大中國JS開發者譽為“Web前端開發神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等。
這段簡介看着是不是特别的厲害？
其實 jetbrains 公司旗下還有很多産品都跟WebStorm類似，例如
PyCharm
、
PHPStorm
等
二、WebStorm的亮點
WebStorm 是我在前端開發中用的最多的一款開發工具，它的功能特别特别的多，這裡我就來說一下我認為的它的亮點之處
（1）自動儲存
有沒有聽過這樣一句話——”程式員最怕遇到突然停電了，萬一代碼沒儲存，直接就涼了“
是以，很多程式員都會養成這樣一個習慣，在寫代碼的過程中，每隔一小段時間就手動儲存一下，或者不自覺地就按了
ctrl + s
。
但是WebStorm就解決了這樣一個傳統的問題。我們在檔案中所有的操作，都會被自動地存儲下來，不需要手動儲存，是以即使遇到突然停電或者電腦當機，也不用害怕，因為我們的檔案早就被自動儲存好了。
（2）浏覽器快捷方式
這個功能也可以說是非常的友善了，比如我們在寫了一個
index.html
檔案後，我們要去電腦上找到這個檔案，然後打開方式選擇浏覽器打開，但在WebStorm中， 在檔案編輯的右側有着各浏覽器浏覽快捷方式，可以直接點選打開
來給大家看看樣子
（3）檔案操作曆史記錄
寫代碼的過程中，我們可能最怕的就是不知道什麼情況就誤删了某個檔案，但又因為檔案太多根本就不知道到底少了哪些檔案
為此，WebStorm就提供了一個本地的檔案操作曆史紀錄，這是其它編輯器都沒有的功能，它可以查詢到之前你對檔案都做了哪些操作，然後可以選擇檢視并恢複該檔案
我們來看一下具體的動圖示範
是不是非常的友善，是以用了WebStorm後，我就再也沒有擔心過檔案誤删的情況了
（4）代碼格式化
對于很多新入坑前端開發或者初入程式設計的小夥伴，可能還有點不太熟悉代碼的風格是怎樣的，也就是哪裡需要空格 、哪裡需要空一行 等代碼的格式問題。
但是WebStorm裡有一個代碼格式化的功能可以幫助你自動調整整個代碼的結構，你隻需要在寫好代碼後按一下這個鍵就可以了，下面我們來示範一下看看
首先我們寫一段代碼，不注意空格和空行的問題，整個代碼看起來就十分的臃腫難以閱讀
現在我們使用一下代碼格式化功能，如圖點選即可，或者可以使用快捷鍵
ctrl + alt + L
我們來看看代碼格式化以後變成了什麼樣子
是不是瞬間就變得美觀了很多，你們可以對比一下前後的差別
是以這個功能挺适合剛入門的小夥伴的
（5）内嵌git
作為一個程式員，我們一般都會把自己的項目代碼托管到
github
上，是以我們都會下載下傳
git
工具
然後點選
Git Bash Here
，再在裡面輸入一些
git
指令，這樣很不友善
但在
WebStorm
中，可以下載下傳
git
，并在其内部自帶的終端裡輸入
git
指令。
與此同時，
WebStorm
還會将被
git
托管的檔案進行顔色高亮顯示
例如：
以下則是在終端裡輸入
git
指令的示例圖
總之我感覺是非常友善的，還能看到哪些檔案被改過，哪些檔案是新增加的，代碼編寫以及代碼管理都在一個頁面上，就很省事
（6）超強的文法提示
總的來說，所有的編輯器裡面，
WebStorm
的文法提示算是比較全的了，而且還帶有記憶功能，就是說你經常用的文法可能會給你優先提示出來，這也大大節省了開發的時間，
就拿前端常用的布局
flex
來舉例子，我在做元素布局時經常會用它做垂直水準居中
看了上面這個動圖，有沒有感覺這樣強大的文法提示用起來很爽呢，這會讓你根本就不需要去拼寫完整的單詞，直接用軟體給你提示的即可
更重要的是，
WebStorm
文法的更新也非常快。例如有些文法是最近才新增的，是以有可能還沒有很快地更新到編輯器裡，導緻明明正确的文法卻被編輯器提示有錯誤。
就拿我最近看到的一個例子來說，前端的架構
Vue
最近準備從
Vue2
更新到
Vue3
，是以難免有一些文法的新增，我在使用
vscode
這款編輯器的時候，發現
Vue3
新增的文法都被報錯了，但其實是可以正常運作的，後來我就換回
WebStorm
，就沒有報錯了。
顯而易見，
WebStorm
在文法的更新上還是非常快的。
（7）代碼高亮
不得不說，我還是挺喜歡
WebStorm
的代碼高亮以及它的字型樣式的，我可以拿幾個編輯器來做一下對比
- 記事本
- WebStorm
- vscode
- sublime text
- HBuilder
這裡呢，每個編輯器的風格不一樣，大家可以自行看一下，但我個人還是更喜歡
WebStorm
（8）個性化配置
上面剛說了一些編輯器的樣子，其實我們可以不局限于這樣的風格，還可以在設定裡面自己調整編輯區的背景色 、字型大小 、行距等，反正是怎麼舒服就怎麼調整呗
這裡我就不教大家如何修改了，到時候想修改哪個直接去設定裡找即可。
（9）拼寫檢查/重複代碼檢查
- 拼寫檢查
有時我們可能在寫代碼時不注意，拼錯了個單詞，
WebStorm
會給我們用波浪線提示出來
例如
圖中想拼寫
number
，但卻拼成了
numberr
，就會被提示，告訴我們是不是拼寫錯誤了，友善我們檢查
- 重複代碼檢查
這個功能用的最多的就是在檢視變量引用上面了，假設我們剛開始設了一個變量，然後在下面的代碼裡有很多次都用到了這個變量。突然，我們想給這個變量換個名字，那麼就需要更改下面所有引用到該變量的地方的變量名，但是真的很難找。
是以我們可以利用這個功能，滑鼠點選這個變量名，那麼代碼中所有與該變量名相同的代碼都會被提示出來
如圖
我們點選了變量
number
，接下來所有用到了該變量的地方都被标記了出來
（10）内置伺服器功能
很多的前端編輯器打開檔案，顯示的路徑都是本地檔案路徑，如圖
此時是沒有伺服器環境的，但要知道，在前端開發時，測試一些功能是需要在伺服器環境下才能進行的，那麼一般的選擇就是自己搭建一個本地伺服器，然後再測試我們的檔案代碼，當然，我以前就是這麼幹的，覺得特别麻煩。
後來我知道了
WebStorm
有這樣一個功能，我欣喜若狂，親自試驗一下，發現真的是自帶伺服器環境。如圖
看，這樣打開的檔案就是着伺服器環境的了
（11）代碼和檔案關聯能力
這個功能也是我要好好吹一吹的。現在的前端變得越來越工程化，是以開發中會用到子產品化開發的概念，即把一個檔案導入另一個檔案中進行使用，如圖
此時，我們将
HelloWorld.vue
檔案移動到别的檔案夾裡去
我們可以看到，在我們移動了被導入的檔案後，之前我們寫的導入路徑也自動跟着變化了，根本就不需要我們去手動更改，這就是
WebStorm
自帶的代碼與代碼檔案追蹤功能
（12）自帶檔案模闆
在
WebStorm
裡，我們右鍵點選檔案夾，然後再在
new
裡可以找到很多檔案的模闆，點選即可命名建立，而且建立好的都是完整的模闆，不需要我們再手動去輸入
（13）無需配置直接上手
正是因為
WebStorm
的功能豐富，已經将很多前端常用的功能添加進去了，是以當我們下載下傳好以後，直接可以進行開發，無需安裝什麼常用插件去擴充功能。
我印象最深的就是，我以前使用
sublime text
這款編輯器，下載下傳好了以後，還要在裡面的配置檔案裡輸入一些東西，才可以擴充一些功能，例如一鍵生成
html
檔案模闆
其實
WebStorm
也是支援另外自己安裝插件擴充功能的
可以在這裡面挑選一些自己想要的插件
三、WebStorm缺點
當然了，我也不是偏心的人，雖說是推薦
WebStorm
，但我也不能光說它的優點。其實每一款編輯器都有各自的優點，當然也有自己的缺點
WebStorm
最大的缺點就有兩點：
- 非常地吃記憶體。每次打開
WebStorm
- 軟體體積大。畢竟
WebStorm
WebStorm
四、安裝WebStorm
接下來我會分步驟給大家講解如何安裝
WebStorm
說明： 因為
WebStorm
版本會一直進行更新，是以我就給大家準備了穩定
WebStorm 2020.1
版本安裝包。
關注我的微信公衆号：Lpyexplore的程式設計小屋，回複：webstorm，即可擷取相關檔案。
（1）準備好相關檔案
首先在我公衆号下載下傳好檔案，如圖
（2）安裝webstorm
接下來就按照以下步驟進行安裝即可
這裡安裝位置可以自行選擇，懶得選擇的就直接預設c盤就行
然後這裡的配置資訊可以按照我這樣勾選
然後不用管，直接點
install
就行
靜靜等待幾分鐘
然後勾選第二個，千萬别點第一個哈，第一個可是重新開機電腦
好了，到此為止，
WebStorm
就已經安裝好啦
五、結束語
好了，本篇對
WebStorm
的講解就到這裡了，希望大家能了解到這款編輯器的特色。
如果想要
WebStorm
的小夥伴可以關注我的公衆号，回複 ：webstorm，即可下載下傳。
創作不易，喜歡的加個關注，點個收藏，給個贊~ 帶你們在Python爬蟲的過程中學習Web前端