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

是否免費

這個一定要放在最前面說，webstrome是收費的，而vscode 是免費的文章源自四五設計網-http://www.133122.cn/38868.html

優缺點對比

優點文章源自四五設計網-http://www.133122.cn/38868.html

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

缺點文章源自四五設計網-http://www.133122.cn/38868.html

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

插件生態

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

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

自動修復功能

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

Git/GitHub集成

SCode 的Git支持一直不太行，就算加了插件GitLens 也無法比得上WebStorm。文章源自四五設計網-http://www.133122.cn/38868.html

下面由兩張圖對比下：文章源自四五設計網-http://www.133122.cn/38868.html

vscode文章源自四五設計網-http://www.133122.cn/38868.html

文章源自四五設計網-http://www.133122.cn/38868.html

WebStorm

前端支持

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

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

使用性能

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

易用性

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

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

// 快速創建文件（vscode）
ctrl + n
// 搜索文件（vscode）
ctrl + p
// 復制當前行（vscode）
shift + alt + ↓

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

性能

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

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

調試功能

在調試功能方面，WebStorm明顯更為優秀。WebStorm提供了非常好的調試體驗，可以設置斷點、單步執行代碼等。而VSCode的調試功能功能較為基礎，需要安裝插件才能實現調試。

// 設置斷點（WebStorm）
F8
// 開啟調試（vscode）
F5

在線編輯器

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

運行環境支持

VSCode的運行環境不僅有Windows和macOS，還支持Linux系統。而WebStorm則僅支持Windows和macOS運行環境。

安裝成本

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

東家

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

結論

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