As a front-end developer, the most convenient tools are Webstorm and VSCode. Webstorm is like Apple system, with closed source, charging, official good and powerful development ability, intelligent index and completion functions, VSCode is like Android, open source, continuous iteration and vibrant community.
Webstorm’s 2021.3 update has greatly alleviated the problem of being stuck, even if node_modules is reinstalled, it will not be stuck for a long time, because Webstorm’s friends can check out 😂
I use Webstorm a lot, summarized some good plugins and practical Tips, hope to help you ~
This article is part of the Great Tools series:
- Introduce a few Windows under the very useful tools
- Make comfortable move brick environment, these are the desktop good thing that I want to recommend most
- Full of dry goods! Recommend some very useful Mac software (first shot)
- Full of dry goods! Recommend some very useful Mac software (second bullet)
- Full of dry goods! Recommend some very useful Mac software (bullet 3)
- These plugins and configurations make your Webstorm even better!
1. Plug-in recommendation
The following plug-ins can be downloaded from the official Webstorm plugin market, and you can install them by searching the plugin name directly.
There are some plug-ins that do not solve the pain point, such as typing activate-power-mode, Rainbow Brackets, Rainbow progress bar Dmitry Batkovich is not recommended.
There are also some third-party plug-ins for intelligent code completion, such as Codota, Kite and Tabnine. I think Webstorm’s own machine learning intelligent code completion is quite convenient to use. Sometimes the code completion speed is a little slow with the third-party plug-in, which takes up extra memory, and sometimes conflicts or duplication with the own completion. May be my machine configuration is not high enough, interested in the installation can try.
Chinese Language Pack/Chinese Language Pack
Early, there is no official Chinese language pack depends on making a long no update on the translation of the plugin, but in 2021 the official launch of the Chinese language pack, make up for the English language ability in weak chicken 436 across (6), not to say that the original English interface can’t use, just think English some Settings cannot be be clear at a glance, for half a day.
Some big guy may feel that English is very good to use, use the habit is the same, depending on your personal needs ~
AceJump: Fast cursor positioning
You can quickly navigate the insertion cursor to any position visible in the editor. With AceJump, you can easily navigate between different Windows even if the editor window is split. Control/CTRL +;
GitToolBox: Git extensions
Many Git enhancements include the automatic fetch code, the status bar showing the number of uncommitted and backcommitted Git branches, the cleanup of outdated branches, and emoji support in the Commit window. Inline Blame lets you see who committed each line of code and when, as well as commit information, etc. This plugin is a must if you use Git a lot.
HighlightBracketPair: Highlight brackets
Some big guys will introduce Rainbow Brackets. I have also downloaded Rainbow Brackets, but with many colorful Brackets, I can not distinguish them clearly.
The HighlightBracketPair plugin, which highlights the current bracket and shows the bracket range to the left of the line of code, is more intuitive and less glitzy than the rainbow bracket plugin.
Key Promoter X/Presentation Assistant: Shortcut Key display
Many of the big guys’ blogs promote Key Promoter X, which can prompt you the shortcut Key of this function when you click on a function. If you use it more often, you can break away from the mouse and use the shortcut Key to trigger these functions.
There is also a great plugin called The Presentation Assistant, which allows you to display the functions in Chinese, as well as the keyboard shortcuts for both Mac and Windows.
One Dark Theme/Material Theme UI Lite: Beautiful free Theme
There was a plugin called The Material Theme UI that was very useful, but it was later charged, but that’s ok. There are also free themes that are very useful, such as the Material Theme UI Lite, Coderpillr Theme, One Dark Theme, and so on. All very good look, their own pick a favorite theme ~
Atom Material Icons: Beautiful Icons
There used to be an editor called Atom, but not many people use it now. Its biggest contribution is that the theme and icon design is very beautiful. This plugin introduces Atom ICONS into Webstorm folders and files, making the compiler look better.
IntelliVue: Vue features are enhanced
Webstorm has great plugin support for Vue, now supports some syntax of Vue3, you can quickly create Vue2 data, methods, etc., or Vue3 setup method, etc., to help you less template code.
After installation, there will be more Vue options in the menu bar. There are some operation functions in the drop-down box, which is better for Vue2 project.
Translation: The best Translation plug-in
You can easily translate in Webstorm without opening the translation software. You can right-click to select the translation and open an independent window to translate the whole section.
Personally, the most convenient function is the translation and replacement function. The shortcut key command + Control + O on Mac and CTRL + Shift + X on Win. When writing business code, it will automatically translate Chinese business terms, and string can choose big hump or small hump.
String Manipulation/CamelCase: String Manipulation
Both plug-ins work with strings and can toggle English strings between kebab-case, SNAKE_CASE, PascalCase, camelCase, SNAKE_CASE, and space case forms.
The first String Manipulation plug-in is large and recommended for those who deal with strings frequently. The second CamelCase plug-in is light enough for daily use and easy to use. The shortcut keys option/ Alt + Shift + U can be used to switch. Webstorm comes with command/ CTRL + Shift + U shortcuts to change case. These two similar shortcuts are also easy to remember.
.ignore: The ignore file plug-in of the version management tool
The.ignore plugin supports the creation of.gitignore,.eslintignore,.dockerIgnore, etc. Such as node_modules, dist, and. Cache.
You can also quickly add files to ignored files by right-clicking on them.
It is also supported to quickly add files to.gitignore files by right-clicking files.
Import Cost: Displays the imported package volume
VSCode also has this plugin, which tells you the size of the library after you import it, and the size of the package after gzip.
CodeGlance: Code minimap on the right
Display a thumbnail of the code on the right side of the code panel, as in VSCode. I see some people using this plugin, but I don’t use it very much, I feel a bit cumbersome when using split screen in the editor, I can use it for long files, it depends on your personal preference.
. Env Files support: configuration file support
You can add syntax highlighting to the.env environment profile and smart indexes to variables defined in the profile. In addition, we will have some environment changes when we use Webpack for packaging, and after installing the plug-in, we will be prompted for the environment variables that are held in the environment variables file.
JetBrains Toolbox: Whole family bucket management software
It is used to manage Webstorm, IntelliJ, GoLand and other JetBrains family bucket software, managing common Settings, project navigation, and automatic updates, plug-in updates, rollback, and downgrade software versions. If you have more than one version of JetBrains installed, That is highly recommended for installation.
2. Practical Settings Tips
2.1 Closing Unnecessary Plug-ins
Webstorm comes with a lot of built-in plugins after installation. If you don’t need them or don’t use them frequently, you can turn them off. The project opening speed can be further increased.
2.2 conjoined word
Many fonts can now be set with conjoined characters, such as Fira Code or the JetBrains Mono font added for programming purposes in 2021. I strongly recommend the latter, which is built into Webstorm in 2021 and later. It is the latest font released specifically for programming, which is clear, easy to read and highly recognizable.
When you set the JetBrains Mono font to something like this:
If you like this style, go to the Settings editor -> Color Scheme -> Color Scheme Font and modify it.
2.3 Setting the Default Memory
The first thing you need to do when installing Webstorm is to change the default memory. You can change it manually in the.vmOptions Settings file or in the Help -> Change memory Settings.
The current memory can be seen in the lower right corner of the software interface. If you feel that the memory setting is not enough, you can change it to a larger size.
2.4 Configuring Configuration Synchronization
Go to File -> Manage IDE Settings -> IDE Settings Sync to set up configuration sync. Webstorm will bind your configuration to your account so that your home PC can use the same configuration and keyboard shortcuts as your office PC.
3. Tips
3.1 Powerful suffix completion function
I often hear people talk about code auto-completion, but I rarely hear about Webstorm suffix completion, but it is very useful, for some masters who have already disconnected or want to disconnect from the mouse, suffix completion can save you a lot of press ← key.
Here is an example of.const completion:
There is also the completion of the parentheses. Par and.return statements:
The complete suffix completion can be seen in the editor -> General -> suffix completion, and you can also customize your favorite completion method.
3.2 Quick verification of regular expressions
Pressing Option/Alt + Enter on a regular expression allows you to quickly verify the regular expression in place. This is a quick feature that is very useful in some regular expressions for form validation
4. Practical shortcut keys
4.1 Global Search
Double clicking Shift opens the Search anywhere feature, which allows you to search Settings, codes, file names, folder names, change themes, etc. This is one of the most powerful features on Webstorm, equivalent to VSC Command/CTRL + Shift + P
4.2 Opening the latest File
Command/CTRL + E opens the most recent files and jumps between them. The file list also includes closed files. For example, if you just closed a file and want to open it again, you can use this shortcut, which is equivalent to the browser’s Command + Shift + T
4.3 Opening a file in the Project View
Open files in the project view is a very convenient function. The two concentric circles of ICONS on the project file directory panel can quickly open the current file in the file directory and locate the current file:
There is no shortcut for this function in the default Settings, it is recommended to go to Keyboard Mapping -> Others -> Select file in Project View to add your own shortcut, I set option/ Alt + 1, for reference only:
4.4 Viewing Usage
Use option/ Alt + F7 to view the use, read, and import of variables, functions, and classes. It is very useful when reading other people’s code to clear logical relationships. With this function, reading source code finally does not need command/ CTRL + Shift + F to find variables one by one.
The shortcut keys for quickly displaying usage are Command/CTRL + Option/Alt + F7
4.5 Other Super Shortcut Keys
command/ctrl + option/alt + O: import optimization to remove unused importscommand/ctrl + option/alt + L: Reformats the codecommand/ctrl + option/alt + ZGit rolls back the code for the current regioncommand/ctrl + J: View predefined code templatescommand/ctrl + shift + up/down: smart move code block, if you move the function, you can move the whole function to the previous functioncontrol/ctrl + shift + J: Merges two rowscommand/ctrl + G: Selects the next same matchcommand/ctrl + D: Copies the current rowF2: Navigate to the place where the editor reports an error or warning
To view all the official shortcuts, go to Help -> Keyboard Shortcuts PDF, or double click shift and type “Keyboard Shortcuts” to see the official shortcut reference PDF.
Online posts are mostly different in depth, and even some inconsistent, the following article is a summary of the learning process, if you find mistakes, welcome to point out the message, if this article helps you, don’t forget to support oh, your praise is the biggest power of my update ~
Reference Documents:
- How can you still use WebStorm in 2021?
- Tips – WebStorm Guide
PS: This article is included in the following blog Github – SHERlocked93/blog series of articles, welcome you to pay attention to my public account front-end afternoon tea, direct search can be added or click here to add, continue to push for you front-end and front-end surrounding related quality technical articles, common progress, come together ~
In addition, you can join the wechat group of “front-end afternoon tea Communication Group”. Search sherlocked_93 and add me as friends on wechat. If you add comments to the group, I will pull you into the group