前言

• 前端開發(fā)比較推薦的兩款編輯器JetBrains的WebStorm和微軟的VsCode，本人之前開發(fā)一直用的VsCode，日常開發(fā)其實基本上就滿足了，但有幾個地方對于我來說一直都是痛點，體驗感非常不好。

• 首先是Git分支管理和提交，雖然有插件但是跟JetBrains的Git工具完全沒得比，并且電腦配置差點每次想回滾或者查看前后差異都要卡老半天。平時開發(fā)基本不用，都是在終端輸入命令操作。

• 其次是Vue的一些JS代碼調(diào)試，雖然網(wǎng)上有一些VsCode如何支持調(diào)試的教程，但我弄了老半天都沒弄好，很難弄。WebStorm針對調(diào)試這一塊只要簡單配置下就可以直接使用了，都不需要下載什么插件。

• 最后還有一些其他的功能，比如JetBrains的本地文件修改歷史查看，代碼格式化，eslint都不需要裝插件只要指定配置文件路徑就可以直接使用

缺點

• 當(dāng)然WebStorm的缺點是非常吃內(nèi)存，我對比了下VsCode打開同樣的項目一般400M左右就搞定了，但WebStorm卻要1.5G左右，電腦配置差點的建議不要使用，并且像JetBrains提供的軟件很吃硬盤

• 另一個VsCode打開速度很快，跟WebStorm基本不是一個檔次的。平時查看開源項目建議還是直接使用VsCode把，如果要持續(xù)開發(fā)的話，有條件的建議使用WebStorm，可以減少一些配置和插件，直接上手使用。

• WebStorm還是需要軟件付費的，雖然互聯(lián)網(wǎng)時代，網(wǎng)上隨便一搜就能找到破解版的。但有能力的話還是建議支持正版，這樣開發(fā)人員也有更多的精力投入開發(fā)中，帶來更好的用戶體驗和強大的功能。

下載安裝

官網(wǎng)：https://www.jetbrains.com/webstorm/

歷史版本：https://www.jetbrains.com/webstorm/download/other.html

破解：https://www.lookdiv.com/box/%E8%A7%A3%E5%8E%8B%E8%BF%99%E4%B8%AA%E6%96%87%E4%BB%B6%E5%A4%B9%E5%88%B0%E6%A1%8C%E9%9D%A2%E6%89%93%E5%BC%80w.zip

常見配置

個人WebStorm版本號

內(nèi)存卡頓

排除node_modules文件夾

啟動

不推薦使用這種方式，WebStorm會啟動Node js環(huán)境，占用內(nèi)存很大

建議通過終端啟動，占用內(nèi)存很少

格式化代碼

設(shè)置保存自動格式化代碼

如果沒有找到prettier，添加依賴 npm install --save-dev --save-exact prettier

一般情況下就好了，如果需要自定義的話就在跟目錄下建一個.prettierrc文件配置你的項目文件格式化內(nèi)容，重啟下項目保存后生效

{"printWidth": 120,"semi": false,"singleQuote": true }

Eslint配置

相關(guān)依賴

我這里配置文件有繼承vue的配置規(guī)則，所有要引用eslint-plugin-vue "eslint": "^8.14.0", "eslint-plugin-vue": "^8.7.1",npm install --save-dev eslint@8.14.0 npm install --save-dev eslint-plugin-vue@8.7.1

示例：

.eslintrc.json

{"env": {"browser": true,"es2021": true},"extends": ["plugin:vue/essential"],"parserOptions": {"ecmaVersion": "latest","sourceType": "module"},"plugins": ["vue"],"rules": {"semi": [2, "never"],"comma-dangle": 0,"no-console": 0,"quotes": [2, "single"],"no-undef": 0,"no-debugger": 0,"import/no-unresolved": 0,"import/extensions": 0,"no-param-reassign": 0,"vue/multi-word-component-names": 0,"vue/no-multiple-template-root": 0,"import/no-extraneous-dependencies": 0} }

.eslintignore

assets mock

Git使用

略，跟IDEA使用一樣

調(diào)試

調(diào)試之前記得先啟動項目，然后新增配置項

簡單設(shè)置下項目啟動URL即可，配置好后點擊debug，會自動打開瀏覽器跳轉(zhuǎn)啟動頁面，這時候可以調(diào)試了

這時候就可以打斷點了，但運行的時候就會走到這里來，這里跟IDEA執(zhí)行可以一步步執(zhí)行不一樣，試了老半天會跳到vue源碼里面去，只能一個個打斷點看變量，感覺有點弱智

后面發(fā)現(xiàn)要配合瀏覽器自帶的調(diào)試使用？？？

插件推薦

離線插件下載地址：https://plugins.jetbrains.com/

CodeGlance Pro

https://plugins.jetbrains.com/plugin/18824-codeglance-pro/versions

Atom Material Icons

https://plugins.jetbrains.com/plugin/10044-atom-material-icons

Chinese (Simplified) Language Pack / 中文語言包

https://plugins.jetbrains.com/plugin/13710-chinese-simplified-language-pack----

One Dark theme

自己去官網(wǎng)選一個合適的主題 https://plugins.jetbrains.com/search?orderBy=downloads&tags=Theme

https://plugins.jetbrains.com/plugin/11938-one-dark-theme

后續(xù)補充

總結(jié)

以上是生活随笔為你收集整理的webstorm使用指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。