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

前端大数据导出优化:解决Chrome内存崩溃的实战方案

前端大数据导出优化:解决Chrome内存崩溃的实战方案

个人名片 🎓作者简介:java领域优质创作者 🌐个人主页:码农阿豪 📞工作室:新空间代码工作室(提供各种软件服务) 💌个人邮箱:[[email protected]] 📱个人微信:15279484656 🌐个人导航网站:www.forff.top 💡座右铭:总有人要赢。为什么不能是我呢? * 专栏导航: 码农阿豪系列专栏导航 面试专栏:收集了java相关高频面试题,面试实战总结🍻🎉🖥️ Spring5系列专栏:整理了Spring5重要知识点与实战演练,有案例可直接使用🚀🔧💻 Redis专栏:Redis从零到一学习分享,经验总结,案例实战💐📝💡 全栈系列专栏:海纳百川有容乃大,可能你想要的东西里面都有🤸🌱🚀 目录 * 前端大数据导出优化:解决Chrome内存崩溃的实战方案 * 引言 * 问题分析 * 1. 为什么 Chrome 会崩溃,而 QQ 浏览器正常? * 2. 常见崩溃场景

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

目录 1. 打开浏览器开发者工具 2. 使用 Network 面板 3. 查看具体的API请求 a. Headers b. Payload c. Response d. Preview e. Timing 4. 实际操作步骤 5. 常见问题及解决方法 a. 无法看到API请求 b. 请求失败 c. 跨域问题(CORS) 作为一名后端工程师,理解前端如何调用接口、传递参数以及接收返回值是非常重要的。下面将详细介绍如何通过浏览器开发者工具(F12)查看和分析这些信息,并附带图片案例帮助你更好地理解。 1. 打开浏览器开发者工具 按下 F12 或右键点击页面选择“检查”可以打开浏览器的开发者工具。常用的浏览器如Chrome、Firefox等都内置了开发者工具。下面是我选择我的一篇文章,打开开发者工具进行演示。 2. 使用

实战干货】打破次元壁:如何实现 Web 端与 AutoCAD 桌面端的双向通信与自动化绘图

前言 在工程建设与制造业数字化转型的浪潮中,我们经常面临一个架构难题:业务流在 Web 端(SaaS 系统、AI 生成内容),而生产流在桌面端(AutoCAD、Revit)。 如何将 Web 端生成的数据(如设计说明、BOM 表、AI 生成的布局方案)无缝传输到 AutoCAD 并自动生成图纸?传统的做法是“导出 Excel/JSON -> 人工打开 CAD -> 导入插件”,效率低下且割裂。 本文将分享我在最近一个项目中采用的**“本地伴随服务(Local Sidecar Server)”**技术方案。通过在 AutoCAD 插件内部嵌入轻量级 Web Server,实现了 Web 页面点击按钮,

【踩坑记录】使用 Layui 框架时解决 Unity WebGL 渲染在 Tab 切换时黑屏问题

【踩坑记录】使用 Layui 框架时解决 Unity WebGL 渲染在 Tab 切换时黑屏问题

【踩坑记录】使用 Layui 框架时解决 Unity WebGL 渲染在 Tab 切换时黑屏问题 在开发 Web 应用时,尤其是集成了 Unity WebGL 内容的页面,遇到一个问题:当 Unity WebGL 渲染内容嵌入到一个 Tab 中时,切换 Tab 后画面会变黑,直到用户点击黑屏区域,才会恢复显示。 这个问题通常是因为 Unity 渲染在 Tab 切换时被暂停或未能获得焦点所致。 在本文中,我们将介绍如何在使用 Layui 框架时,通过监听 Tab 切换事件并强制 Unity WebGL 渲染恢复,来解决这一问题。 1. 问题描述 当 Unity WebGL 内容嵌入到页面中的多个