前言

• 前端開(kāi)發(fā)比較推薦的兩款編輯器JetBrains的WebStorm和微軟的VsCode，本人之前開(kāi)發(fā)一直用的VsCode，日常開(kāi)發(fā)其實(shí)基本上就滿(mǎn)足了，但有幾個(gè)地方對(duì)于我來(lái)說(shuō)一直都是痛點(diǎn)，體驗(yàn)感非常不好。

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

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

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

缺點(diǎn)

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

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

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

下載安裝

官網(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

常見(jiàn)配置

個(gè)人WebStorm版本號(hào)

內(nèi)存卡頓

排除node_modules文件夾

啟動(dòng)

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

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

格式化代碼

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

如果沒(méi)有找到prettier，添加依賴(lài) npm install --save-dev --save-exact prettier

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

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

Eslint配置

相關(guān)依賴(lài)

我這里配置文件有繼承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)試之前記得先啟動(dòng)項(xiàng)目，然后新增配置項(xiàng)

簡(jiǎn)單設(shè)置下項(xiàng)目啟動(dòng)URL即可，配置好后點(diǎn)擊debug，會(huì)自動(dòng)打開(kāi)瀏覽器跳轉(zhuǎn)啟動(dòng)頁(yè)面，這時(shí)候可以調(diào)試了

這時(shí)候就可以打斷點(diǎn)了，但運(yùn)行的時(shí)候就會(huì)走到這里來(lái)，這里跟IDEA執(zhí)行可以一步步執(zhí)行不一樣，試了老半天會(huì)跳到vue源碼里面去，只能一個(gè)個(gè)打斷點(diǎn)看變量，感覺(jué)有點(diǎn)弱智

后面發(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 / 中文語(yǔ)言包

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

One Dark theme

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

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

后續(xù)補(bǔ)充

總結(jié)

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

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