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

前端 SSR:别让你的网站变成 SEO 黑洞

前端 SSR:别让你的网站变成 SEO 黑洞 毒舌时刻 这网站做得跟黑洞似的,搜索引擎根本爬不进去。 各位前端同行,咱们今天聊聊前端 SSR(服务端渲染)。别告诉我你还在使用纯客户端渲染,那感觉就像在没有窗户的房间里生活——能住,但看不见外面的世界。 为什么你需要 SSR 最近看到一个项目,纯客户端渲染,SEO 排名倒数,用户体验差。我就想问:你是在做网站还是在做内部工具? 反面教材 // 反面教材:纯客户端渲染 // App.jsx import React, { useState, useEffect } from 'react'; function App() { const [data, setData] = useState([]); const [loading, setLoading] = useState(true); useEffect(

零基础手把手教程:用gpt-oss-20b-WEBUI快速搭建本地AI对话系统

零基础手把手教程:用gpt-oss-20b-WEBUI快速搭建本地AI对话系统 1. 为什么选这个镜像?小白也能跑起来的“真开源”体验 你可能已经看到过不少“本地大模型”教程,但真正能让你在普通电脑上点开浏览器就聊天、不用折腾CUDA版本、不报错、不卡死的方案,其实不多。gpt-oss-20b-WEBUI这个镜像,就是为“不想装环境、只想用模型”的人准备的。 它不是包装精美的黑盒应用,也不是需要你手动编译vLLM的硬核项目——它是OpenAI官方开源权重(gpt-oss)+ vLLM高速推理引擎 + 预置WebUI的完整组合包,所有依赖都已打包好,部署完就能直接打开网页对话。 重点来了: * 不用装Python、不用配CUDA、不用改配置文件; * 不依赖Ollama、不依赖Docker Desktop(Windows用户尤其友好); * 双卡RTX 4090D可跑20B模型,单卡3090/4080也能稳推,甚至A10G云显卡实测可用; * 界面就是ChatGPT风格,输入即响应,支持多轮对话、历史保存、导出记录。 如果你试过其他方案却卡在“pip install

AWS Kiro 账号池管理系统 | 将 Amazon Q Developer API 转换为 OpenAI 兼容格式 | 支持多账号池、OIDC 自动认证、令牌自动刷新、Web 管理控制台 | Go

AWS Kiro 账号池管理系统 | 将 Amazon Q Developer API 转换为 OpenAI 兼容格式 | 支持多账号池、OIDC 自动认证、令牌自动刷新、Web 管理控制台 | Go

Claude API - AWS Kiro 账号池管理 | OpenAI 兼容代理服务 项目地址在wget 里面 web页面访问把后缀.git删掉即可 效果图 AWS Kiro 账号池管理系统 - 将 Amazon Q Developer (Kiro) API 转换为 OpenAI 兼容格式的企业级 Go 代理服务。支持多账号池管理、OIDC 自动认证、令牌自动刷新、流式响应、完整的 Web 管理控制台。 关键词: AWS Kiro, Amazon Q Developer, Claude API, OpenAI Proxy, 账号池管理, OIDC 认证, Go

OpenClaw Web Search 完全指南(2026年3月最新)

OpenClaw Web Search 完全指南(2026年3月最新) 本文详细介绍 OpenClaw 内置 web_search 工具的 5 个官方搜索渠道,以及 Tavily 技能的使用方法。帮助你选择最适合的免费/付费方案。 目录 * OpenClaw 搜索功能概述 * 5 个官方搜索渠道详解 * 1. Brave Search API * 2. Google Gemini * 3. Grok (xAI) * 4. Kimi (Moonshot) * 5. Perplexity * 免费额度对比表 * 推荐配置方案 * Tavily Web Search 技能 * 配置步骤详解 * 常见问题 OpenClaw 搜索功能概述 OpenClaw 提供两种搜索能力: