The previous article introduced vscode useful plug-ins, but I usually use WebStorm, personally, I prefer WebStorm, in fact, even without any plug-ins, it is good enough to use, but install plug-ins, make it better use!
1. Utility plug-ins
1.1 CodeGlance
Recommended index: ***
Create a thumbnail of the code on the right side. Those of you who have used vscode are certainly familiar with it, but it is not very practical. I do not use this feature most of the time, but sometimes I feel it is still a bit cumbersome, blocking the code display.
1.2 Rainbow Brackets
Recommended index: *****
Parentheses are paired, but are not visible under a white theme. The plugin must use a black theme to work.
1.3 Translation
Recommended index: *****
Very easy to use the translation plug-in, when writing code in many cases need to use the translation function.
Click on the Translation Engine icon in the status bar or use the shortcut Ctrl + Shift + S (Mac OS: Control + Meta + Y) to quickly switch between the translation engines, which currently have Google Translate, Youdao Translate and Baidu Translate.
Using this plug-in, you can build a translation interface directly into WebStorm.
1.4 IDE Features Trainer
Recommended index: ***
Some of the IDE’s shortcuts, as well as some of the utility features are taught interactively, so that you can write code more efficiently without the official manual.
1.5 String Manipulation
Recommended index: *****
It provides a lot of functions for handling strings, such as changing to camelCase camel name, changing to kebab-case name, PascalCase name, as well as a variety of functions for handling strings, switching case, sorting strings and so on, the utility can be said to be very high.
1.6 Chinese (Simplified) Language Pack/Chinese
Recommended index: *****
Jetbrains officially released a Chinese language pack. I didn’t understand many functions of the English interface before, so I missed a lot of useful functions. Since using the Chinese language pack, although at the beginning of the change from English to Chinese may not find the option, but after using it for a long time it is really sweet! And the official is also in the rapid iteration of the Chinese language package, more and more perfect.
It is highly recommended for those who are not good at English.
1.7 .env files support
Recommended index: *****
When we package with Webpack, we will have some environment variables, and when we write the code, if the plug-in is installed, we will be prompted for the environment variables that are in the environment variables file.
1.8 Comments Highlighter
Recommended index: ****
Rich code comment highlighting style to highlight text in your code that needs your attention.
1.9 Gist Snippet
Recommended index: ***
Gist plugin, you can quickly insert your Gist code snippets into your IDE!
1.10 Jenkins Control Plugin
Recommended index: ***
If you use Jenkins, you can directly control Jenkins packaging through this plug-in. Of course, Jenkins of some companies are usually operated by operation and maintenance or back-end personnel, and the front-end does not need to configure Jenkins by itself, but I still recommend front-end developers to learn from Jenkins. If you have a large number of personal projects, using Jenkins to automate deployment is very convenient and can save a lot of time.
As for Jenkins, I’ll also put together an article later on how I used Jenkins to deploy front-end projects.
1.11 the Json Parser
Recommended index: **
The most convenient part of this plug-in is that it can be used directly in the IDE without opening the browser, but the front-end people do not open the browser.
1.12 Redis
Recommended index: ****
You can directly operate Redis plug-ins, the most important is convenient, many mainstream database operation software rarely support Redis, the disadvantage is to pay, but every IDE update (? Not sure) can be renewed for a 30-day free trial.
1.13 SonarLint
Recommended index: ****
Code style checker, much like Eslint, can be used when older projects cannot use Eslint, or when new projects can be used alongside Eslint, with few conflicting rules.
If you write code strictly with a code quality check tool, you can write pretty good code. Also eliminate some shallow bugs, and later when someone else takes over your code, if they use the code quality check tool, will not be full of warnings and errors.
1.14 Docker
Recommended index: ****
Docker image and container can be very convenient to operate, and you can see the directory structure inside the container, the location of mounting data volumes, container configuration and other information, front-end developers will rarely use Docker, back-end and operation and maintenance may use a little more.
This plug-in is a bundled installation and can be found directly in the Build section of Settings.
2. Not practical plugins, but cool
2.1 Dmitry Batkovich
Recommended index: ****
Turn all progress bars into rainbow bars.
2.2 Background Image Plus
Recommended index: ***
You can customize the editor’s background image.
2.3 Material Theme UI
Recommended index: ***
Modify the editor UI.
2.4 Power Mode II
Recommended index: ***
Lets you type code with a lot of cool effects.
3. Introduction to AI code assistant
With the rapid development of machine learning, there is now AI in the code field to help you write code. Currently, it is similar to the IDE code prompt, but it learns from the code you have already typed, and the next time you type similar code, it will prompt you to help you quickly complete the code.
3.1 Codota AI Autocomplete for Java and JavaScript
Recommended index: ****
The advantage of the first AI code assistant I used at the beginning is that it improves the efficiency of coding, but the disadvantage is that it only supports Java and JavaScript. Moreover, the plug-in is limited by the network environment and often fails without prompting. However, it is quite useful when prompted.
Tabnine AI Autocomplete: JavaScript C Python Ruby Rust Go PHP…
Recommended index: ***
The same is the work of the above company, it seems that will not be limited by the network environment, I use not a lot, almost support all the current mainstream programming languages, the prompt will not be ineffective.
Kite AI Code AutoComplete: Python, Java, Javascript, HTML/CSS, Go, C/C#/C++
Recommended index: ***
I am currently using the AI code assistant, there is no network restrictions, prompt is also very fast, shortcomings are also very obvious! Too many hints can sometimes conflict with the IDE’s built-in hints, and some of the built-in hints can be pushed to the back, which is not very convenient to choose, and it also requires the next AI engine, which has to be turned on all the time and takes up a lot of memory.
It is recommended for those who rely heavily on code hints and good machine configuration.