This is my first day out of the August challenge, hahaha

preface

As an FE developer, I probably use WebStorm and VsCode most in my daily work. I have been using WebStorm for development in the past few years. Today, I will bring you some WebStorm plug-ins used in my work and some configuration methods that can improve the efficiency. Hope to help WebStorm friends more efficient work, extra time can touch 🐟!

Final effect display

The plugin is recommended

The following details the installation and use of each plug-in. The recommended index is ✨

.ignore: Ignore file plug-in for the version management tool

  • Plugin description: support to create a variety of. Ignore files, will default to the file or folder to ignore, I often use. Gitignore, used for common front-end common files to ignore submission, such as node_modules, dist, etc. Support to right-click files to add to.gitignore;
  • Installation method: Webstorm internal plug-in market search.ignoreOr download it from the official address to the local PC for installation
  • The official address: plugins.jetbrains.com/plugin/7495…
  • Use effect: I feel very practical, will be very convenient, sometimes if the file has been added to the git commit cache, you need to use the command to clear the cache to undo the file, this plug-in can help you complete this step. More functions need to be discovered by themselves
  • Recommended index: 🌟🌟🌟🌟🌟

Power Mode II: Typing effects

  • Add-in description: Cool typing effect, in addition to cool, no egg use, the screen shaking look uncomfortable;
  • Installation method: Webstorm internal plug-in market searchPower Mode IIOr download it from the official address to the local PC for installation
  • The official address: plugins.jetbrains.com/plugin/8251…
  • Use effect: install 13 can, the effect is not big
  • Recommended Index: 🌟🌟

activate-power-mode: Typing effects

  • Plugin description: Similar to Power Mode II, more explosive effect
  • Installation method: Webstorm internal plug-in market searchactivate-power-modeOr download it from the official address to the local PC for installation
  • The official address: plugins.jetbrains.com/plugin/8330…
  • Use effect: dizzy touch fish
  • Recommended Index: 🌟🌟

CodeSearch: Right click search (through Google search, cannot be used inside the wall)

  • Plug-in description: select a section of content, you can directly right-click through the search engine search search; To configure the search engine, you can configure Baidu, Google, StackOverflow and GitHub
  • Installation method: Webstorm internal plug-in market searchcodeSearchOr download it from the official address to the local PC for installation
  • The official address: plugins.jetbrains.com/plugin/1257…
  • Use effect: practicality is very high, very convenient to help search, after the installation can be selected to search things
  • Recommended index: 🌟🌟🌟🌟🌟

Rainbow Brackets: Parenthesis color prompt plug-in

  • Plugin description: If the code is deeply nested, it can be difficult to find the corresponding place between the front and the back brackets. This plugin uses different colors to make it easy to find the corresponding opening and closing brackets
  • Installation method: Webstorm internal plug-in market search.ignoreOr download it from the official address to the local PC for installation
  • The official address: plugins.jetbrains.com/plugin/1008…
  • Use effect: personal feeling more convenient, can be quickly positioned, and the code interface will look better, happy mood, happy coding;
  • Recommended index: 🌟🌟🌟🌟

Translation: Translation plug-in

  • Plugin description: It can be easily translated in WebStorm, eliminating the need to go to the browser to translate, and also supports the right click to select the translation
  • Installation method: Webstorm internal plug-in market searchTranslationOr download it from the official address to the local PC for installation
  • The official address: plugins.jetbrains.com/plugin/8579…
  • Use effect: translation is more convenient, but still need to think more
  • Recommended index: 🌟🌟🌟🌟

AceJump: The cursor is positioned quickly

  • AceJump allows you to quickly navigate caret to anywhere visible in the editor, using Ctrl+;
  • Installation method: Webstorm internal plug-in market searchAceJumpOr download it from the official address to the local PC for installation
  • The official address: plugins.jetbrains.com/plugin/7086…
  • Use effect: use is not very much, have to use the shortcut key, also is not very convenient, so-so, see personal preference
  • Recommended Index: 🌟🌟

Material Theme UI: Set the theme, the bad is most of the dark theme, the light color is particularly bright, but the file icon support is good

  • Plugin description: well known, a very famous theme
  • Installation method: Webstorm internal plug-in market searchMaterial Theme UIOr download it from the official address to the local PC for installation
  • The official address: plugins.jetbrains.com/plugin/8006…
  • Use effect: according to personal preference, what oneself like is the best
  • Recommended index: 🌟🌟🌟🌟

CodeGlance: right-side minimap navigation, like the one in Sublime Text, can be configured with width

  • A small map can be displayed on the right side of the open window to quickly locate the jump, especially for many lines of files, it is very convenient;
  • Installation method: Webstorm internal plug-in market searchCodeGlanceOr download it from the official address to the local PC for installation
  • The official address: plugins.jetbrains.com/plugin/7275…
  • Use effect: you can configure the width of the small map, you can set a fixed width, can also drag to set the width
  • Recommended index: 🌟🌟🌟🌟🌟

Codota: AI code generation, automatic association, support javaScript and Java;

  • Plugin description: Code association, need not explain too much
  • Installation method: Webstorm internal plug-in market searchCodotaOr download it from the official address to the local PC for installation
  • The official address: plugins.jetbrains.com/plugin/7638…
  • Use effect: I think it is ok, it can quickly display the content of the input before, or quickly generate functions, etc., can improve the speed of writing code
  • Recommended index: 🌟🌟🌟🌟🌟

Atom Material Icons: File ICONS, system ICONS will look better;

  • Add ICONS for folders and files, make the compiler look more beautiful, it is also a convenient plug-in for pleasant coding
  • Installation method: Webstorm internal plug-in market searchAtom Material IconsOr download it from the official address to the local PC for installation
  • The official address: plugins.jetbrains.com/plugin/1004…
  • Use effect: needle does not poke ah needle does not poke
  • Recommended index: 🌟🌟🌟🌟🌟

GitToolBoxGit submission record plug-in, mouse over a line of code can see who submitted when, submission information is what;

  • If I remember correctly, VsCode also has a similar plugin, which can see each line of code is submitted by who, when, submit message is what, no need to use Annote with Git Blame
  • Installation method: Webstorm internal plug-in market searchGitToolBoxOr download it from the official address to the local PC for installation
  • The official address: plugins.jetbrains.com/plugin/7499…
  • Use effect: convenient ah convenient, very convenient!! When you see a bug, you know who wrote this crap!
  • Recommended index: 🌟🌟🌟🌟🌟

Paste images into MarkDown: When writing markdown, if you need to add a picture, you can paste it directly by CTRL + V or Command + V after copying. A pop-up box will pop up to set the name and path of the picture, which is very convenient

  • Plugin description: When WebStorm writes a markdwon document, sometimes it is necessary to add an image to the folder and then reference it in Markdown. This plugin can solve the problem very well. There is an image information on the clipboard, so you can paste it directly by CTRL +V
  • Installation method: Webstorm internal plug-in market searchPaste images into MarkDownOr download it from the official address to the local PC for installation
  • The official address: plugins.jetbrains.com/plugin/8446…
  • Use effect: improve the efficiency of the sharp tool, can also set the picture storage path, whether round corner, picture size and so on
  • Recommended index: 🌟🌟🌟🌟🌟

Ok, you can write out the commonly used will be the basic plug-in, more plug-in can go to my blog know: blog. Wangboweb. Site / 2019/08/17 /…

Set the

Font and UI, presentation style

File Template Settings

Details:Blog. Wangboweb. Site / 2021/08/04 /…

Backing up Configuration Information

You can back up to the cloud or to your JetBrains account

Setting the background image

conclusion

In fact, many functions may not be used in daily development, but once discovered, it will be very handy, need their own exploration, to create a suitable compiler for their own, in order to really improve the development efficiency, so that there will be more opportunities to touch fish!!

Someone else has translated WebStorm’s official help document, please check it out if you need it.

Chinese documentation: www.kancloud.cn/zxhy/websto…

Official English documentation: www.jetbrains.com/help/websto…