Ekaterina Ryabukha

Ekaterina Ryabukha

WebStorm Product Marketing Manager at JetBrains

tip

Grammar Checking with Grazie
Use Grazie to check grammar in regular text.

tip

Test Regular Expressions in the IDE
WebStorm helps test regular expressions on the fly.

tip

Tool Window View Mode
Learn how to change the default view mode of a tool window.

tip

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

tip

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

tip

Add New Dependencies
WebStorm can help you add a new dependency.

tip

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

tip

Comment Out Code
Quickly comment/uncomment blocks and lines.

tip

Using Code Snippets
How to use the built-in code snippets in WebStorm.

tip

Add console.log Faster
Use Postfix Completion to quickly add console.log.

tip

Convert to async Function
Quickly convert a function that returns a Promise to an async function.

tip

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

tip

Create Angular Projects
How to create a new Angular project in WebStorm

tip

Check CSS Properties
How to review the related CSS docs in WebStorm.

tip

Disable ESLint Rules for Current Line
How to temporarily disable an ESLint rule in WebStorm.

tip

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

tip

Explore Shortcuts the Easy Way
How to see all WebStorm's shortcuts.

tip

Enable Font Ligatures
How to use ligatures in your font in WebStorm.

tip

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

tip

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

tip

Editing Code with Multiple Cursors
How to use multiple cursors to code faster.

tip

Optimize Imports
Quickly remove any unused imports and more.

tip

Remove Tags Faster
How to quickly remove HTML tags in WebStorm.

tip

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

tip

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

tip

Simplify Boolean Expression
How to simplify a complex boolean expression in WebStorm.

tip

Quickly Sort Lines
Sort lines of code in your editor alphabetically.

tip

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

tip

Navigate with Select In
Find the current file in the Project tool window faster.

tip

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

tip

Nyan Progress Bar
Make your progress bar look a bit nicer.

tip

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

tip

Add Placeholder Text in Seconds
Use the power of Emmet to add some lorem ipsum faster.

tip

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

tip

Using Custom UI Themes
Make WebStorm look fancier by switching to a custom UI theme.

tip

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

tip

Extract Ruleset
Use an intention to quickly extract a ruleset in your stylesheet file.

tip

Make JSDoc Comments More Readable
Render documentation comments right in the editor.

tip

Run Tests from Editor
Learn how to run a single test right from the editor.

tip

Find Specific Things Faster
Use Speed search to look for specific information in tool windows and popups.

tip

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

tip

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

tip

Get Help with Random Data
Let the Randomness plugin generate some data for you.

tip

Preview UI Themes on the Go
Preview UI themes without going to the IDE settings.

tip

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

tip

Extract Type Alias
Learn how to extract a type alias in your TypeScript code.

tip

Quickly Jump to Line
Go to a specific line in a file using the Go to file popup.

tip

Access Run Configurations Quickly
Learn a quick way to access run configurations.

tip

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

tip

Check Browser Compatibility in CSS
Let WebStorm warn you about unsupported CSS properties.

tip

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

tip

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

tip

Run npm Scripts Swiftly
WebStorm lets you run npm scripts right from the gutter.

tip

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

tip

Customize Editor Background
Make your editor feel a bit more personal.

tip

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

tip

Using Surround With
Learn how to surround items with braces, brackets, or quotation marks in JSON.

tip

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

tip

Working with Navigation Bar
Find out how to use the navigation bar efficiently.

tip

Create Conditional Breakpoints
Add a condition to a breakpoint when debugging.

tip

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

tip

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

tip

Navigate to Test
Use the Go to Symbol popup to go to a test.

tip

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

tip

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

tip

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

tip

Adding <script> Tag
Get help when adding the script element.

tip

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

tip

Select Code Fragment
Select a code fragment without a single click.

tip

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

tip

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

tip

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

tip

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

tip

Duplicating Lines
Duplicate a line of code with a shortcut.

tip

Fix Code Formatting
Learn how to fix code formatting on the fly.

tip

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

tip

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

tip

Make Fields Private or Public
Use a quick fix to quickly make a field public or private.

tip

Using Language Injections
Swiftly inject a piece of code in a different language.

tip

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

tip

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

tip

Transform Existing Expression into Another One
Quickly transform an existing expression into another one using Tab.

tip

Preview Images
Preview images on the go from the Project view.

tip

Renaming Files
Rename a file to make it match the name of a class.

tip

Using Recent Locations for Navigation
Preview the part of code and files you've recently edited and get back to them quickly.

tip

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

tip

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

tip

Deleting File Safely
Learn how to delete a file safely.

tip

Create Reusable Code Snippets
Save time by reusing blocks of code with custom code snippets.

tip

File Structure Overview
Get a high-level view of the structure of a specific file.

tip

Enabling Soft Wraps
Wrap lines to eliminate the need of scrolling horizontally in order to see overly long lines.

tip

Syntax Highlighting for Other Languages
Look through PHP, Python, and other files in WebStorm.

tip

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

tip

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

tip

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

tip

Avoid Property Mixup
WebStorm helps avoid mixing up properties.

tip

Compute Constant Values
Let WebStorm do math for you.

tip

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

tip

Quickly Look Up Parameters
Get help when completing function parameters.

tip

Move Function to File
Extract a function into a separate file.

tip

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

tip

Surround with Emmet
Quickly surround a selection with rich markup using the Emmet toolkit.

author

Ekaterina Ryabukha
WebStorm Product Marketing Manager at JetBrains