Although VSCode has gained popularity over the years, many developers, including myself, prefer JetBrains’ WebStorm IDE for web development. Here, we’ll explore a few settings and plugins I have found to improve my development experience and productivity while working in WebStorm.
Enable Auto Save Actions
WebStorm allows you to configure different actions to perform when you save a file. These can save you time by automatically performing activities like reformatting your code or running `eslint –fix`. You can find the settings by opening the “System Preferences” window, then expanding “Tools” and selecting “Actions on Save.”
Reformat Code
This option will add a save action to perform formatting to your file automatically. It can be configured to be applied to either the entire file or only the modified lines. You can also fully customize the formatting settings in “System Preferences -> Editor -> Code Style” by file type.
Run Code Cleanup
This option will apply fixes from the code cleanup inspections. From here, you can also click ‘Configure inspections…’ to go directly to the inspections menu. For those not familiar, code cleanup inspections are different from code formatting. Code formatting focuses on aesthetics, like wrapping text, removing unnecessary commas or semi-colons, and keeping lines indented correctly. Code cleanup inspections attempt to detect and fix things like compilation issues, spelling, adding imports, or applying shorthand.
Run eslint –fix
Enabling this option will automatically run `eslint –fix`. WebStorm will automatically search for an ESLint configuration within the project, or you can manually configure the ESLint package and `.eslintrc.json` file location.
Helpful Plugins
WebStorm comes fully loaded with plenty of features out of the box, so I find myself needing very few third-party plugins. There are, however, a few that make my must-have list.
Key Promoter X
Learning keyboard shortcuts can help you move more swiftly and save you time, but learning these shortcuts can feel daunting. The Key Promoter X plugin helps alleviate that pain by notifying you when an action you made in the IDE with your mouse could have been done with a keyboard shortcut. It will give you the keys for the shortcut and track how many times you have missed using it. You can also snooze the notifications or suppress them for specific shortcuts.
Presentation Assistant
Presentation Assistant is one of my favorite plugins, particularly when pair programming. This plugin will display a banner at the bottom of the screen when you use a keyboard shortcut that displays the keys used and what the shortcut did. This banner is excellent for helping navigators follow what the driver is doing and makes it easy to teach and learn new shortcuts.
Atom Material Icons
This plugin updates the default WebStorm icon set. Although it is a purely aesthetic plugin, the higher fidelity file icons simplify perusing your project directory.
Bonus: Clipboard History
One of my favorite yet simple features in WebStorm is the clipboard history. In your editor, the keyboard shortcut `CMD + SHIFT + V (or `CTRL + SHIFT + V` for Windows/Linux users) will bring up a window with all of the most recent text snippets from your clipboard. Each entry in the list also has a corresponding numerical shortcut for quick and easy pasting.
Small Changes, Big Difference in WebStorm
Whichever IDE or editor you prefer, it is valuable to take your time and understand the settings and customization options. A few small changes can make a big difference and help you feel more comfortable in your development environment.