位置: IT常识 - 正文

webstorm使用指南(webstorm功能)

编辑：rootadmin

webstorm使用指南前言

推荐整理分享webstorm使用指南(webstorm功能)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:webstorm用法,webstorm用法,webstorm入门,webstorm用法,webstorm怎么用,webstorm app,webstorm app,webstorm app,内容如对您有帮助，希望把文章链接给更多的朋友！

前端开发比较推荐的两款编辑器JetBrains的WebStorm和微软的VsCode，本人之前开发一直用的VsCode，日常开发其实基本上就满足了，但有几个地方对于我来说一直都是痛点，体验感非常不好。

首先是Git分支管理和提交，虽然有插件但是跟JetBrains的Git工具完全没得比，并且电脑配置差点每次想回滚或者查看前后差异都要卡老半天。平时开发基本不用，都是在终端输入命令操作。

其次是Vue的一些JS代码调试，虽然网上有一些VsCode如何支持调试的教程，但我弄了老半天都没弄好，很难弄。WebStorm针对调试这一块只要简单配置下就可以直接使用了，都不需要下载什么插件。

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

缺点

当然WebStorm的缺点是非常吃内存，我对比了下VsCode打开同样的项目一般400M左右就搞定了，但WebStorm却要1.5G左右，电脑配置差点的建议不要使用，并且像JetBrains提供的软件很吃硬盘

另一个VsCode打开速度很快，跟WebStorm基本不是一个档次的。平时查看开源项目建议还是直接使用VsCode把，如果要持续开发的话，有条件的建议使用WebStorm，可以减少一些配置和插件，直接上手使用。

WebStorm还是需要软件付费的，虽然互联网时代，网上随便一搜就能找到破解版的。但有能力的话还是建议支持正版，这样开发人员也有更多的精力投入开发中，带来更好的用户体验和强大的功能。

下载安装

官网：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版本号

内存卡顿

排除node_modules文件夹

启动

不推荐使用这种方式，WebStorm会启动Node js环境，占用内存很大

建议通过终端启动，占用内存很少

格式化代码

设置保存自动格式化代码

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

一般情况下就好了，如果需要自定义的话就在跟目录下建一个.prettierrc文件配置你的项目文件格式化内容，重启下项目保存后生效

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

Eslint配置

相关依赖

我这里配置文件有继承vue的配置规则，所有要引用eslint-plugin-vue"eslint": "^8.14.0","eslint-plugin-vue": "^8.7.1",npm install --save-dev eslint@8.14.0npm 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

assetsmockGit使用

略，跟IDEA使用一样

调试

调试之前记得先启动项目，然后新增配置项

简单设置下项目启动URL即可，配置好后点击debug，会自动打开浏览器跳转启动页面，这时候可以调试了

这时候就可以打断点了，但运行的时候就会走到这里来，这里跟IDEA执行可以一步步执行不一样，试了老半天会跳到vue源码里面去，只能一个个打断点看变量，感觉有点弱智

后面发现要配合浏览器自带的调试使用？？？

插件推荐

离线插件下载地址：https://plugins.jetbrains.com/

CodeGlance Pro

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