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

Qt 前后端通信(QWebChannel Js / C++ 互操作):原理、示例、步骤解说

Qt 前后端通信(QWebChannel Js / C++ 互操作):原理、示例、步骤解说

Qt 提供的 QWebEngineView 是一个基于 Chromium 内核的浏览器组件,通过它,开发者可以使用 HTML、CSS、JavaScript 等技术开发 Web 页面并呈现在 Qt 桌面应用中,但与开发纯 Web 页面不同的是,这些页面通常需要和 应用中的其他组件交互,例如获取后端数据进行渲染、将前端用户指令传达给后端执行等,这将不可避免地涉及到前端 Js 和 后端 C++ 之间的交互问题,而 Qt 为此给出的解决方案就是 QWebChannel,通过 QWebChannel 前端 Web 页面和与后端 C++ 程序实现自然而顺畅的交互,甚至前后端的操作风格都极为一致。本文我们将细致地介绍QWebChannel 前后端交互的原理,通过四个详实的示例程序讲解每一步重要的操作步骤,通过本文,你将对 QWebChannel 有一个全面而深入的了解。 1. 工作原理

前端状态管理:别让你的状态变成一团乱麻

前端状态管理:别让你的状态变成一团乱麻 毒舌时刻 这状态管理得跟蜘蛛网似的,谁能理得清? 各位前端同行,咱们今天聊聊前端状态管理。别告诉我你还在使用 setState 管理所有状态,那感觉就像在没有地图的情况下寻宝——能找,但累死你。 为什么你需要状态管理 最近看到一个项目,组件之间传递状态需要经过 5 层,修改一个状态要修改多个地方。我就想问:你是在做状态管理还是在做传递游戏? 反面教材 // 反面教材:混乱的状态管理 function App() { const [user, setUser] = useState(null); const [posts, setPosts] = useState([]); const [comments, setComments] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { async function fetchData() { setLoading(

openclaw喂饭教程!在 Linux 环境下快速完成安装、初始化与 Web UI 配置

openclaw喂饭教程!在 Linux 环境下快速完成安装、初始化与 Web UI 配置

前言 OpenClaw 是一款开源的 AI Agent 工具,但对第一次接触的用户来说,完整跑通流程并不直观。本文以 Linux 环境为例,详细记录了 OpenClaw 的安装、初始化流程、模型选择、TUI 使用方式,以及 TUI 与 Web UI 认证不一致导致的常见问题与解决方法,帮助你最快速度把 OpenClaw 真正跑起来 环境准备 1)安装nodejs curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash - sudo apt install -y nodejs > node

实战演练:基于快马平台快速构建一个支持tokenp钱包登录的DApp前端

今天想和大家分享一个实战项目:如何快速构建一个支持TokenP钱包登录的DApp前端。这个项目特别适合想学习Web3开发的初学者,整个过程在InsCode(快马)平台上完成,省去了本地环境配置的麻烦。 1. 项目准备 首先需要明确几个核心功能:钱包连接、用户信息展示、链上数据查询和退出登录。选择Next.js框架是因为它既支持服务端渲染,又能很好地与各种Web3库集成。Wagmi和Viem这两个库是目前最流行的以太坊开发工具组合,能大大简化钱包交互流程。 2. 钱包连接实现 在首页添加"使用钱包登录"按钮后,通过Wagmi提供的useConnect钩子就能轻松实现钱包连接功能。这里需要注意处理用户拒绝连接的情况,以及不同钱包提供商的兼容性问题。TokenP钱包作为移动端主流钱包,通过WalletConnect协议可以很好地与网页应用交互。 3. 用户信息展示 连接成功后,使用Wagmi的useAccount钩子获取用户的钱包地址。为了提升用户体验,我做了地址缩写处理(显示前4位和后4位),并在页面顶部显示欢迎信息。这里还添加了一个复制地址的小功能,方便用户操作。 4. 链上数