Ekaterina Ryabukha

Ekaterina Ryabukha

WebStorm Product Marketing Manager at JetBrains

Grammar Checking with Grazie

Tip

Grammar Checking with Grazie
Use Grazie to check grammar in regular text.
Test Regular Expressions in the IDE

Tip

Test Regular Expressions in the IDE
WebStorm helps test regular expressions on the fly.
Tool Window View Mode

Tip

Tool Window View Mode
Learn how to change the default view mode of a tool window.
Create New Files and Folders

Tip

Create New Files and Folders
Use the New popup to add files and folders faster.
Share Run Configurations

Tip

Share Run Configurations
How to export and share your project’s run configurations in WebStorm.
Add New Dependencies

Tip

Add New Dependencies
WebStorm can help you add a new dependency.
Add and Remove Breakpoints Quickly

Tip

Add and Remove Breakpoints Quickly
How to toggle breakpoints without using the mouse.
Add console.log Faster

Tip

Add console.log Faster
Use Postfix Completion to quickly add console.log.
Convert to async Function

Tip

Convert to async Function
Quickly convert a function that returns a Promise to an async function.
Create Arrow Functions in One Click

Tip

Create Arrow Functions in One Click
WebStorm can help you add arrow functions to your code.
Create Angular Projects

Tip

Create Angular Projects
How to create a new Angular project in WebStorm
Check CSS Properties

Tip

Check CSS Properties
How to review the related CSS docs in WebStorm.
Disable ESLint Rules for Current Line

Tip

Disable ESLint Rules for Current Line
How to temporarily disable an ESLint rule in WebStorm.
Explore Shortcuts the Easy Way

Tip

Explore Shortcuts the Easy Way
How to see all WebStorm's shortcuts.
Evaluate Expressions When Debugging

Tip

Evaluate Expressions When Debugging
How to check the value of an expression in WebStorm.
Enable Font Ligatures

Tip

Enable Font Ligatures
How to use ligatures in your font in WebStorm.
Navigate to the Last Edited Location

Tip

Navigate to the Last Edited Location
How to navigate to your last edit in WebStorm.
Improve Code Readability

Tip

Improve Code Readability
How to enable method separators to make it easier to read your code in WebStorm.
Open New Projects Quickly

Tip

Open New Projects Quickly
How to use drag and drop to open a new project in WebStorm.
Optimize Imports

Tip

Optimize Imports
Quickly remove any unused imports and more.
Remove Tags Faster

Tip

Remove Tags Faster
How to quickly remove HTML tags in WebStorm.
Replace with Template String

Tip

Replace with Template String
How to replace a regular string with a template literal in WebStorm.
Simplify Boolean Expression

Tip

Simplify Boolean Expression
How to simplify a complex boolean expression in WebStorm.
Add Support for MDX

Tip

Add Support for MDX
Get syntax highlighting, code completion, and other features for your .mdx files.
Navigate with Select In

Tip

Navigate with Select In
Find the current file in the Project tool window faster.
Use Gutter Icons in Zen Mode

Tip

Use Gutter Icons in Zen Mode
Run scripts, tests, and more from the gutter in Zen mode.
Nyan Progress Bar

Tip

Nyan Progress Bar
Make your progress bar look a bit nicer.
Add Carets to End of Lines

Tip

Add Carets to End of Lines
Use a shortcut to add carets at the end of each selected line.
Using Custom UI Themes

Tip

Using Custom UI Themes
Make WebStorm look fancier by switching to a custom UI theme.
Create New Type Alias

Tip

Create New Type Alias
Use a code refactoring to swiftly create a new type alias.
Status Bar Customization

Tip

Status Bar Customization
Choose what you'd like to have on the status bar.
Extract Ruleset

Tip

Extract Ruleset
Use an intention to quickly extract a ruleset in your stylesheet file.
Make JSDoc Comments More Readable

Tip

Make JSDoc Comments More Readable
Render documentation comments right in the editor.
Run Tests from Editor

Tip

Run Tests from Editor
Learn how to run a single test right from the editor.
Find Specific Things Faster

Tip

Find Specific Things Faster
Use Speed search to look for specific information in tool windows and popups.
Tips for Small and Wide-Screen Monitors

Tip

Tips for Small and Wide-Screen Monitors
Learn how to work with smaller or larger monitors more comfortably.
Getting Helpful Suggestions

Tip

Getting Helpful Suggestions
Look out for suggestions from WebStorm! They can help you not to forget about an important thing.
Get Help with Random Data

Tip

Get Help with Random Data
Let the Randomness plugin generate some data for you.
Preview UI Themes on the Go

Tip

Preview UI Themes on the Go
Preview UI themes without going to the IDE settings.
Review Errors from Test Runners

Tip

Review Errors from Test Runners
In a test file, hover over an error to get more information about it.
Extract Type Alias

Tip

Extract Type Alias
Learn how to extract a type alias in your TypeScript code.
Access Run Configurations Quickly

Tip

Access Run Configurations Quickly
Learn a quick way to access run configurations.
Check Documentation in JavaScript

Tip

Check Documentation in JavaScript
Hover over a symbol or use a shortcut to quickly review documentation.
Check Browser Compatibility in CSS

Tip

Check Browser Compatibility in CSS
Let WebStorm warn you about unsupported CSS properties.
Move Elements Left and Right

Tip

Move Elements Left and Right
Quickly swap functions parameters, attributes in tags, and more.
Presentation Mode

Tip

Presentation Mode
Make it easier for the audience to see what you're doing.
Run npm Scripts Swiftly

Tip

Run npm Scripts Swiftly
WebStorm lets you run npm scripts right from the gutter.
See Return Values in Variables View

Tip

See Return Values in Variables View
See what value a method returns.
Customize Editor Background

Tip

Customize Editor Background
Make your editor feel a bit more personal.
Search in Selection Only

Tip

Search in Selection Only
Limit the search to the selected part of code.
Using Surround With

Tip

Using Surround With
Learn how to surround items with braces, brackets, or quotation marks in JSON.
Switch CSS Color Format on the Fly

Tip

Switch CSS Color Format on the Fly
Converting from HEX to RGB and other formats can be done real quick with WebStorm.
Working with Navigation Bar

Tip

Working with Navigation Bar
Find out how to use the navigation bar efficiently.
Finding Tests in Large Test Files

Tip

Finding Tests in Large Test Files
Use the Structure tool window for quick navigation around large test files.
Jump between Files

Tip

Jump between Files
Use a shortcut to quickly jump between the Angular component's template, test, and other files.
Navigate to Test

Tip

Navigate to Test
Use the Go to Symbol popup to go to a test.
Run Tools and Configurations from One Place

Tip

Run Tools and Configurations from One Place
Use a single action to run configurations, tools, and open recent projects.
Spot Missing Declarations

Tip

Spot Missing Declarations
Have an Angular component that isn't declared in the module? No worries!
Adding Imports Automatically

Tip

Adding Imports Automatically
WebStorm helps add an import even if you're using default exports.
Adding <script> Tag

Tip

Adding <script> Tag
Get help when adding the script element.
Change Quote Style for CSS

Tip

Change Quote Style for CSS
Configure whether double or single quotes should be used.
Select Code Fragment

Tip

Select Code Fragment
Select a code fragment without a single click.
Complete Current Statement

Tip

Complete Current Statement
Add curly braces and move the cursor with a single keystroke.
Working with Scratch Files

Tip

Working with Scratch Files
Create scratches to make notes or work with code outside of the project context.
Deleting Lines

Tip

Deleting Lines
Delete a line of code without using the mouse.
Duplicating Lines

Tip

Duplicating Lines
Duplicate a line of code with a shortcut.
Make Your Work Environment Distraction Free

Tip

Make Your Work Environment Distraction Free
Need to focus on just your code? You can switch to the distraction-free or zen mode.
Putting Several Lines Together

Tip

Putting Several Lines Together
Quickly join lines or blocks of code.
Fix Code Formatting

Tip

Fix Code Formatting
Learn how to fix code formatting on the fly.
Moving Lines in JSON

Tip

Moving Lines in JSON
Get help with commas when moving lines up and down in JSON.
Using Language Injections

Tip

Using Language Injections
Swiftly inject a piece of code in a different language.
Make Fields Private or Public

Tip

Make Fields Private or Public
Use a quick fix to quickly make a field public or private.
Get Completion for Libraries from CDN

Tip

Get Completion for Libraries from CDN
Find out how to get completion suggestions for libraries like Bootstrap.
Paste Recent Items

Tip

Paste Recent Items
Access your clipboard history and add any items from there to your code.
Preview Images

Tip

Preview Images
Preview images on the go from the Project view.
Using Recent Locations for Navigation

Tip

Using Recent Locations for Navigation
Preview the part of code and files you've recently edited and get back to them quickly.
See All Available Refactorings in One Place

Tip

See All Available Refactorings in One Place
Use the Refactor This popup to look up all refactorings available in the current context.
Renaming Files

Tip

Renaming Files
Rename a file to make it match the name of a class.
Review Errors in Code

Tip

Review Errors in Code
WebStorm shows all errors and warnings in your file.
Deleting File Safely

Tip

Deleting File Safely
Learn how to delete a file safely.
File Structure Overview

Tip

File Structure Overview
Get a high-level view of the structure of a specific file.
Syntax Highlighting for Other Languages

Tip

Syntax Highlighting for Other Languages
Look through PHP, Python, and other files in WebStorm.
Add Reminders to Fix Something

Tip

Add Reminders to Fix Something
Add a TODO or Fixme comment to remind yourself of fixing something in your code.
See Information about Packages

Tip

See Information about Packages
Check the description and the latest version of a package in package.json.
Using Switcher for Navigation

Tip

Using Switcher for Navigation
Swiftly jump to the last opened file or open a tool window using the popup.
Avoid Property Mixup

Tip

Avoid Property Mixup
WebStorm helps avoid mixing up properties.
Compute Constant Values

Tip

Compute Constant Values
Let WebStorm do math for you.
Convert to Arrow Function

Tip

Convert to Arrow Function
Quickly convert a function to a variable holding an arrow function.
Quickly Look Up Parameters

Tip

Quickly Look Up Parameters
Get help when completing function parameters.
Move Function to File

Tip

Move Function to File
Extract a function into a separate file.
Rename Closing Tag

Tip

Rename Closing Tag
Let the IDE mirror changes to a tag name.
Ekaterina Ryabukha

Author

Ekaterina Ryabukha
WebStorm Product Marketing Manager at JetBrains