WebStorm 使用入门

按照以下步骤操作以更充分地利用 IDE，并获得贴心的使用体验。

01

通过入门导览学习基础知识

完成演练场项目，以大致了解 WebStorm 中提供的部分重要功能：转到 New Project | New Project（新建项目 | 新建项目），并选中 Generate a playground project with onboarding tips（生成带有入门提示的演练场项目）框。

通过入门导览学习基础知识

完成演练场项目，以大致了解 WebStorm 中提供的部分重要功能：转到 New Project | New Project（新建项目 | 新建项目），并选中 Generate a playground project with onboarding tips（生成带有入门提示的演练场项目）框。

02

打开或创建您的第一个项目

您已掌握了基础知识，现在可以继续创建您的第一个项目或打开已有项目。

打开或创建您的第一个项目

您已掌握了基础知识，现在可以继续创建您的第一个项目或打开已有项目。

03

阅读迁移指南

需要进行一些与之前的代码编辑器或 IDE 重复的设置并自定义 WebStorm？阅读我们的迁移指南以获得一些帮助。

阅读迁移指南

需要进行一些与之前的代码编辑器或 IDE 重复的设置并自定义 WebStorm？阅读我们的迁移指南以获得一些帮助。

更进一步

WebStorm 的最佳插件

扩展 IDE 的核心功能，并在现有功能的基础上添加更多功能。

十大最佳 WebStorm 主题

查看 WebStorm 团队的收藏主题列表，以进一步自定义您的 IDE。

Vim 集成

学习如何通过适用于 JetBrains IDE 的 IdeaVim 插件充分利用这两个环境。

十大快捷键

了解十大基础快捷键，立即提高 WebStorm 中的工作效率。

WebStorm 中的 AI 功能

探索 JetBrains AI Assistant 功能，在 WebStorm 中使用 JavaScript 和 TypeScript 进行编码。

数据库工具和 SQL

学习如何在 WebStorm 中使用数据库工具和 SQL。

准备开始

准备开始

自动播放

► Want to try WebStorm? It’s free for non-commercial use!
Download WebStorm here: https://jb.gg/WebStormInstallation

Want to get started with WebStorm, the JetBrains IDE for #JavaScript and #TypeScript, in just 5 minutes?

Watch the video to learn everything you need – from setting up your first project to navigating the IDE and using productivity features like Search Everywhere and built-in terminal support. Whether you’re starting a new project or working with existing code, WebStorm makes it easy.

⭐️ Our resources ⭐️
Website: https://www.jetbrains.com/webstorm/
Product news and tutorials: https://blog.jetbrains.com/webstorm/
WebStorm on X: https://x.com/WebStormIDE

0:00 - Intro
0:37 - Starting a Project
1:02 - Navigating the IDE
2:04 - The Toolbar
2:54 - Search Everywhere
3:08 - Bottom UI Elements
3:33 - Time to Code!
4:30 - Installing Plugins
4:53 - Conclusion

05:12

Getting Started with WebStorm: Installation and First Project Setup

25.10.2024

► Want to try WebStorm? It’s free for non-commercial use!
Download WebStorm here: https://jb.gg/WebStormCustomization

Ready to make #WebStorm your own? 🚀 In this video, we’ll show you how to customize your IDE with themes, plugins, editor settings, and shortcuts! It's perfect for #JavaScript and #TypeScript developers looking to get the most out of their IDE.

⭐️ Our resources ⭐️
Website: https://www.jetbrains.com/webstorm/
Product news and tutorials: https://blog.jetbrains.com/webstorm/
WebStorm on X: https://x.com/WebStormIDE

0:00 - Intro
0:36 - Themes
1:24 - Plugins
2:22 - Hidden Options in the Editor
4:06 - Shortcuts
4:44 - Other Setting Options
5:38 - Conclusion

06:02

Customizing WebStorm: Best Themes, Plugins, and Settings

24.10.2024

► Want to try WebStorm? It’s free for non-commercial use!
Download WebStorm here: https://jb.gg/WebStormShortcuts

Learn how to master #WebStorm in just 5 minutes!

Discover essential shortcuts and productivity tips. From quick navigation and efficient code editing to powerful refactoring tools and productivity boosters, this video has everything you need to code faster and smarter.

#JavaScript #TypeScript

⭐️ Our resources ⭐️
Website: https://www.jetbrains.com/webstorm/
Product news and tutorials: https://blog.jetbrains.com/webstorm/
WebStorm on X: https://x.com/WebStormIDE

0:00 - Intro
0:18 - Navigation
0:25 - Search Everywhere
0:49 - Find in Files
1:01 - Recent Files
1:13 - Go to Definition
1:28 - Code Editing
1:36 - Show Context Actions
2:13 - Quick Documentation
2:23 - Line Actions
2:36 - Code Completion
2:53 - Postfix Completion & Live Templates
3:07 - Refactoring
3:40 - Productivity Boosters
3:52 - Tool Windows
4:02 - Git
4:18 - Zen Mode
4:32 - Final Tips
4:42 - Key Promoter X
4:57 - Conclusion

05:36

Mastering WebStorm Shortcuts and Productivity Tips

28.10.2024

► Want to try WebStorm? It’s free for non-commercial use!
Download WebStorm here: https://jb.gg/WebStormGit

Git doesn’t have to be scary 🧟 Learn how WebStorm simplifies version control with features like cloning repos, managing branches, resolving conflicts, and even writing commit messages for you. Say goodbye to Git stress and hello to seamless workflows!

#javascript #typescript

⭐️ Our resources ⭐️
Website: https://www.jetbrains.com/webstorm/
Product news and tutorials: https://blog.jetbrains.com/webstorm/
WebStorm on X: https://x.com/WebStormIDE

📌 Timestamps:
0:00 - Intro
0:20 - Cloning a Repository
0:37 - Initialize Git
1:41 - Update Your Project
1:59 - Create Branch
2:32 - Commit
3:20 - Merge
3:39 - Diff
3:56 - Merge Conflict
4:38 - Git Blame
5:01 - Git Log Tool Window

06:04

Working with Git in WebStorm

07.01.2025

► Want to try WebStorm? It’s free for non-commercial use!
Download WebStorm here: https://jb.gg/WebStormDebugging

Debugging doesn’t have to be a hassle! In this video, we’ll walk you through WebStorm’s powerful built-in debugger - from setting breakpoints to stepping through code and even debugging Node.js apps. No more endless console.log statements - learn how to debug like a pro! 🚀

#javascript #typescript

⭐️ Our resources ⭐️
Website: https://www.jetbrains.com/webstorm/
Product news and tutorials: https://blog.jetbrains.com/webstorm/
WebStorm on X: https://x.com/WebStormIDE

📌 Timestamps:
0:00 Intro
0:22 Setting Up the Debugger
0:45 Breakpoints
1:42 Debug Tool Window
2:24 Stepping Through Code
2:50 Advanced Actions
3:27 Backend Debugging

04:31

How to Debug in WebStorm

04.02.2025

🎉 WebStorm 2024.3 is here! Watch this quick video to learn about three key enhancements in the latest release:
- Improved framework component navigation and renaming.
- Integrated SQL database tools.
- Improved AI-based code completion.

📚 Want the full list of new features in WebStorm 2024.3? Check out our blog post: https://blog.jetbrains.com/webstorm/2024/11/webstorm-2024-3/

⭐️ Our Resources ⭐️
Download WebStorm 2024.3: https://www.jetbrains.com/webstorm/whatsnew/
Product news and tutorials: https://blog.jetbrains.com/webstorm/
WebStorm on X: https://x.com/WebStormIDE

02:01

WebStorm 2024.3 Explained: 3 New Features You Can't Afford to Miss!

12.11.2024

WebStorm 2024.2, our second major release of the year, is here! Watch this quick video to see the top 3 highlights: special path resolving, initial debugging support for Bun, and the ability to run TypeScript files directly within the IDE.

📚 Want to learn about all the features in WebStorm 2024.2? Check out this blog post: https://blog.jetbrains.com/webstorm/2024/08/webstorm-2024-2/

#JavaScript #TypeScript

Timestamps:
0:00 - Intro
0:28 - Special Path Resolving
0:58 - Initial Bun Debugging Support
1:37 - Ability to Run TypeScript Files Directly
2:01 - Conclusion

⭐️ Our Resources ⭐️
Download WebStorm 2024.2: https://www.jetbrains.com/webstorm/whatsnew/
Product news and tutorials: https://blog.jetbrains.com/webstorm/
WebStorm on X: https://x.com/WebStormIDE

02:20

WebStorm 2024.2 Explained: 3 New Features You Can't Afford to Miss!

12.08.2024

WebStorm 2024.1, our first major release of the year, has landed with a ton of improvements! If you only have a few minutes to explore the highlights, check out this video featuring a quick overview of the top 3 updates: sticky lines, quick documentation popup improvements, and full line code completion. More information about full line code completion can be found at https://jb.gg/087hop

📚 To learn about all the new features, take a look at this blog post: https://jb.gg/iflxd2

#javascript #typescript

Timestamps:
0:00 - Intro
0:25 - Sticky Lines
0:49 - Quick Documentation Improvements
1:31 - Full Line Code Completion
2:10 - Conclusion

⭐️ Our resources ⭐️
Full Line Code Completion: https://www.youtube.com/watch?v=DLBiJ5kYUFg
Download WebStorm 2024.1: https://www.jetbrains.com/webstorm/whatsnew/
Product news and tutorials: https://blog.jetbrains.com/webstorm/
WebStorm on Twitter: https://twitter.com/WebStormIDE

02:36

WebStorm 2024.1 Explained: 3 New Features You Can't Afford to Miss!

04.04.2024