WebStorm 安装配置(详细教程)

WebStorm 安装配置(详细教程)

文章目录

一、简介

WebStorm 是一款由 JetBrains 公司开发的专业集成开发环境(IDE),主要用于 Web 开发,在前端和后端开发领域都备受青睐。

在 2024 年10 月 24 日,正值程序员节当天,JetBrains 正式宣布:针对非商业用途,WebStorm 个人版将不再收取费用,真正实现了对个人开发者的免费开放。

注意:

  • WebStorm 2024.2.4 及更新版本才可以获取非商业许可证。
  • 非商业订阅的期限为一年,一年后将自动续订。

二、优势

可能有的小伙伴使用过 VSCode,它也是一款广受欢迎的代码编辑器,同样用于 Web 开发。VSCode 具有轻量级、启动速度快的优点,并且其插件生态系统非常庞大,可以通过安装不同的插件来满足各种需求。然而,WebStorm 在智能代码编辑、调试功能以及对大型项目的管理方面相对更具优势。

总的来说,如果是小型项目或者对启动速度要求较高的情况,VSCode 可能是一个不错的选择;但对于大型、复杂的 Web 项目以及需要更专业、深入的开发工具支持的情况,WebStorm 则更为合适。


三、下载

WebStorm 下载链接

进入 WebStorm 下载页面,下载自己电脑对应的系统。

在这里插入图片描述

四、安装

4.1 开始安装

在这里插入图片描述

4.2 选择安装路径

在这里插入图片描述

4.3 安装选项

在这里插入图片描述

(1)创建桌面快捷方式:勾选后,会在电脑的桌面上生成 WebStrom 的快捷方式。

(2)更新 PATH 变量(需要重新启动):勾选后,方便在命令行中启动 WebStorm,便于与其他命令行工具或脚本协同工作。

(3)更新上下文菜单:勾选后,将 “从文件夹打开项目” 添加至鼠标右键。

(4)创建关联:勾选后,.js、.css、.html、.json 文件默认以 WebStrom 方式打开。


4.4 选择开始菜单文件夹

在这里插入图片描述

4.5 安装完成

在这里插入图片描述

五、常用插件

5.1 括号插件(Rainbow Brackets)

在这里插入图片描述
在这里插入图片描述

5.2 翻译插件(Translation)

在这里插入图片描述
在这里插入图片描述

提示:用鼠标选中翻译的字体,按下 Ctrl + Shift + X 组合键,生成翻译后的列表。


5.3 代码缩略图(CodeGlance Pro)

在这里插入图片描述
在这里插入图片描述

5.4 主题插件(One Dark Theme)

在这里插入图片描述
在这里插入图片描述

六、结语

至此,本文结束,如果这篇文章对您有所帮助,希望可以点赞、收藏加关注,感谢。

请添加图片描述

Read more

【前端Vue】如何快速直观地查看引入的前端依赖?名称版本、仓库地址、开源协议、作者、依赖介绍、关系树...(Node Modules Inspector)

【前端Vue】如何快速直观地查看引入的前端依赖?名称版本、仓库地址、开源协议、作者、依赖介绍、关系树...(Node Modules Inspector)

想要快速直观地查看前端引入依赖的各项信息,传统方式是通过命令行(如 npm ls、pnpm why)查看,信息显示单一且碎片化,没有足够的信息和美观的页面,操作繁琐,而通过Vue 团队成员 antfu 带来的Node Modules Inspector可以实现近乎完美的依赖信息展示效果,只需要简单一条命令就可以查看丰富的依赖相关信息。该工具无需安装,直接在命令行运行即可,使用npx启动: # 适用于 npm 项目 npx node-modules-inspector # 适用于 pnpm 项目(推荐) pnpx node-modules-inspector 执行后,浏览器会自动打开本地可视化界面,默认端口为 3000。如果端口被占用,工具会提示可用端口。 页面左上角有操作栏,可以切换依赖显示的效果 树形视图 以下是依赖的树形结构展示效果 树形结构可以看到父子组件之间的引用依赖关系 网格视图 上方标签栏可以进行分类规则切换,分别为深度/层级、模块类型、依赖环境(开发/

Face Analysis WebUI入门必看:cache目录清理策略与磁盘空间自动管理

Face Analysis WebUI入门必看:cache目录清理策略与磁盘空间自动管理 1. 为什么你得关心cache目录? 刚跑通Face Analysis WebUI,上传几张照片,点下“开始分析”,结果框里跳出漂亮的人脸关键点和年龄预测——这感觉真不错。但过几天再打开系统,发现磁盘空间告急,/root/build/cache/目录悄悄涨到了12GB,而你明明只传了不到50张图。 这不是个例。很多用户在部署完这个基于InsightFace的智能人脸分析系统后,都遇到同一个隐形问题:cache目录像雪球一样越滚越大,没人管它,它就自己长大。 它不报错,不崩溃,只是默默吃掉你的磁盘空间,直到某天df -h显示/dev/sda1 99%,WebUI突然卡住、图片上传失败、甚至模型加载超时——这时候才想起翻日志,发现是OSError: No space left on device。 这篇文章不讲怎么安装、不讲API调用,就专注解决一个最实际、最容易被忽略的问题:如何让cache目录保持健康,

Web 团队做 App,该不该选 Capacitor?

Web 团队做 App,该不该选 Capacitor?

Capacitor 简介 Capacitor 是一个开源的跨平台应用运行时,用于构建 Web、iOS 和 Android 应用。它由 Ionic 团队开发,支持将现代 Web 应用打包为原生应用,同时提供对原生设备功能的访问。Capacitor 的设计目标是简化跨平台开发流程,同时保持灵活性和性能。 Capacitor 的核心特点 跨平台支持 Capacitor 支持将同一套代码打包为 iOS、Android 和 Web 应用,减少开发维护成本。 原生功能集成 通过插件系统,Capacitor 可以访问设备原生功能,如相机、文件系统、地理位置等。 与框架无关 Capacitor 不依赖于特定前端框架,可与 Angular、React、Vue 或纯 JavaScript 项目结合使用。 现代化工具链 Capacitor

Web 毕设篇-适合小白、初级入门练手的 Spring Boot Web 毕业设计项目:药品进销存信息管理系统(前后端源码 + 数据库 sql 脚本)

Web 毕设篇-适合小白、初级入门练手的 Spring Boot Web 毕业设计项目:药品进销存信息管理系统(前后端源码 + 数据库 sql 脚本)

🔥博客主页: 【小扳_-ZEEKLOG博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录         1.0 项目介绍         1.1 项目功能         2.0 用户登录功能         3.0 首页界面         4.0 供应商管理功能         5.0 药品管理功能         6.0 采购记录管理功能         7.0 销售记录管理功能         8.0 退货记录管理功能         9.0 库存变动管理功能         10.0 SQL 数据库设计         1.0 项目介绍         开发工具:IDEA、VScode         服务器:Tomcat, JDK