前言

前端开发比较推荐的两款编辑器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.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使用一样

调试

调试之前记得先启动项目   

   

   

   

，然后新增配置项

简单设置下项目启动URL即可

     

     

     

  ，配置好后点击debug
  




  




  




  
，会自动打开浏览器跳转启动页面  


  


  


  


，这时候可以调试了

这时候就可以打断点了 
     
     
     
 ，但运行的时候就会走到这里来

   




   




   




   ，这里跟IDEA执行可以一步步执行不一样 



 



 



 



，试了老半天会跳到vue源码里面去                 ，只能一个个打断点看变量


    




    




    




    ，感觉有点弱智

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

插件推荐

离线插件下载地址：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

自己去官网选一个合适的主题 https://plugins.jetbrains.com/search?orderBy=downloads&tags=Theme

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

后续补充