VSCode和WebStorm一直是開發(fā)者們爭論的話題，兩個編輯器各有優(yōu)劣。在這篇文章中，我們將從多個方面，詳細(xì)闡述VSCode和WebStorm的優(yōu)缺點，從而找到更好的選擇。

是否免費

這個一定要放在最前面說，webstrome是收費的，而vscode 是免費的文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/38868.html

優(yōu)缺點對比

優(yōu)點文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/38868.html

• webstrome：優(yōu)點太多，專門為前端開發(fā)人員打造的神器，在此不過多介紹。
• vscode：免費且開源，這也是大部分大前端選擇VSCode的原因，覺得哪里用的不爽分分鐘自己寫個插件解決。啟動速度以及打開項目速度非常快，幾乎同樣的配置同樣的工程，VSCode的打開速度遠(yuǎn)遠(yuǎn)快于WebStorm。插件非常多，而且VSCode本身就基于Electron開發(fā)，所以大前端自己寫插件顯得不是那么困難。

缺點文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/38868.html

• webstrome：收費！這是WebStorm最大的缺點，收費還不便宜，個人版一年大概要300多人民幣。啟動速度以及打開工程速度緩慢，有時候打開一個小項目都要等1分鐘甚至更長時間，更別說一個龐大的項目。非常吃資源，占用的內(nèi)存遠(yuǎn)高于VSCode。
• vscode：幾乎沒有什么太大的缺點，所有感覺是缺點的地方都是因為和WebStorm進(jìn)行對比，如果你沒有用過WebStorm，你根本不會察覺到這些缺點。

插件生態(tài)

VSCode的生態(tài)無疑非常好，基于Web技術(shù)構(gòu)建的編輯器同樣可以使用Web技術(shù)開發(fā)插件，而 Web開發(fā)人員的數(shù)量也確實非常龐大。且由于其輕量跨平臺的特性，受到很多開發(fā)者的喜愛，將之作為主力文件編輯器或者將其打造成IDE使用。文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/38868.html

WebStorm官方給出的插件總數(shù)是1607，而VSCode吾輩并未找到插件的總數(shù)量，但顯而易見，VSCode的插件數(shù)量應(yīng)該遠(yuǎn)遠(yuǎn)高于這個數(shù)字。而且你可以看到WebStorm下載量第一的插件僅僅只下載過5,558,762次，而VSCode的熱門插件的下載數(shù)量是以M來計算的文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/38868.html

自動修復(fù)功能

我們在日常開發(fā)中經(jīng)常會遇到一些低級問題，而編輯器其實是有可能幫我們自動修復(fù)的，VSCode沒有原生的自動修復(fù)功能，必須使用插件才行文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/38868.html

Git/GitHub集成

SCode 的Git支持一直不太行，就算加了插件GitLens 也無法比得上WebStorm。文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/38868.html

下面由兩張圖對比下：文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/38868.html

vscode文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/38868.html

文章源自四五設(shè)計網(wǎng)-http://www.wasochina.com/38868.html

WebStorm

前端支持

VSCode生態(tài)很好，基本上很多語言/框架都有支持，而且官方也有一些非常優(yōu)秀的插件。但是，有一些地方很重要，VSCode 對于HTML/CSS/JavaScript這些Web 基本元素的支持相比于WebStorm 確實不太好

對于HTML/CSS之間的代碼提示、跳轉(zhuǎn)這些基本功能，VSCode其實并沒有做好?，F(xiàn)代前端說是不再寫HTML了，但實際上終究還是要寫（即便是JSX還是要符合寫HTML的直覺的），VSCode代碼提示在這里明顯不太夠看

使用性能

WebStorm 確實很吃內(nèi)存，尤其是項目剛剛打開的時候，索引會瘋狂地吃CPU/內(nèi)存/硬盤

易用性

VSCode的易用性是相對更好的，因為它被設(shè)計得更為簡單，不像WebStorm那樣擁有過多的功能。VSCode的操作更直觀、快速，快捷鍵便于用戶記憶，對于輕量級的開發(fā)者，VSCode是一個不錯的選擇。

同時，VSCode的插件庫豐富，擴(kuò)展性非常好，用戶可以根據(jù)自己的需求，定制自己的編輯器。在這方面，WebStorm則顯得遜色一些。

// 快速創(chuàng)建文件（vscode）
ctrl + n
// 搜索文件（vscode）
ctrl + p
// 復(fù)制當(dāng)前行（vscode）
shift + alt + ↓

而對于大型項目，WebStorm的易用性則更佳，因為它對于項目的導(dǎo)航和文件管理都提供了非常好的支持。WebStorm具有很好的智能提示和代碼補(bǔ)全功能，而這些功能對于開發(fā)者來說非常重要。

性能

VSCode作為一款輕量級的編輯器，因此它的性能表現(xiàn)較好，即使在處理大型項目時也不會出現(xiàn)卡頓的情況。而WebStorm則需要更多的內(nèi)存和處理器資源，因為它提供了更為豐富的功能，從而在處理大型項目時表現(xiàn)更加優(yōu)異。

根據(jù)個人使用經(jīng)驗，VSCode可以勝任中小型項目的開發(fā)，但對于大型項目，WebStorm更為適宜。

調(diào)試功能

在調(diào)試功能方面，WebStorm明顯更為優(yōu)秀。WebStorm提供了非常好的調(diào)試體驗，可以設(shè)置斷點、單步執(zhí)行代碼等。而VSCode的調(diào)試功能功能較為基礎(chǔ)，需要安裝插件才能實現(xiàn)調(diào)試。

// 設(shè)置斷點（WebStorm）
F8
// 開啟調(diào)試（vscode）
F5

在線編輯器

在線編輯器是現(xiàn)代web開發(fā)的趨勢，VSCode雖然推出了在線編輯器，但是WebStorm的在線編輯器功能更加出色。WebStorm提供了智能提示、語法高亮、代碼補(bǔ)全等一系列在線編輯器所需的功能，而且在線編輯器的使用體驗也非常順暢。

運行環(huán)境支持

VSCode的運行環(huán)境不僅有Windows和macOS，還支持Linux系統(tǒng)。而WebStorm則僅支持Windows和macOS運行環(huán)境。

安裝成本

如已經(jīng)提到的，VSCode是一款輕量級、簡單易用的編輯器，而且它是免費的。相較之下，WebStorm的價錢比較高，也需要更高的配置要求。

東家

VSCode背后站著微軟，俗成M$，開發(fā)了宇宙最強(qiáng)IDE Visual Studio。而WebStorm則是基于JetBrains平臺專門為前端進(jìn)行特殊處理優(yōu)化的IDE，背后則是業(yè)界最智能的IDE的開發(fā)公司JetBrains（捷克公司）。

結(jié)論

總的來說，VSCode和WebStorm兩個編輯器各自有優(yōu)劣。如果你的項目規(guī)模較小，需要一個輕量級的編輯器，那么VSCode是個很好的選擇。如果你的項目規(guī)模較大，需要一個功能更為強(qiáng)大的編輯器，那么WebStorm是更好的選擇。一般而言，VSCode和WebStorm都有各自的使用場景，開發(fā)者可以依據(jù)自己的開發(fā)需求選擇適合自己的編輯器。