Hello everyone, what I bring to you today is the 2023 WebStorm download and installation tutorial, with detailed graphic tutorials. It is effective in personal testing. If you are interested, you can like it and save it.
Article directory
-
- 1 Introduction
- 2 installation steps
- 3 10 ways to improve efficiency
-
-
- 1. Webstorm opens the es6 environment
- 2. Create template settings for new vue files
- 3. Webstorm sets code to wrap automatically
- 4. Webstorm turns on code prompts
- 5. Panel display and adding panel display items
- 6. Global search (double-click the shift key to search files, variables, functions, etc.)
- 7. Set theme style, font size, font style, line height (Ctrl + Alt + S)
- 8. Comparison of historical versions of file modifications
- 9. Turn on code completion
- 10. Multiple cursor selection
-
- 4 commonly used shortcut keys
1 Introduction
WebStorm is a JavaScript development tool owned by JetBrains. It has been praised by the majority of Chinese JS developers as "Web front-end development artifact", "the most powerful HTML5 editor", "the most intelligent JavaScript IDE", etc. It has the same origin as IntelliJ IDEA and inherits the functions of the powerful JS part of IntelliJ IDEA.
2 installation steps
The installation of WebStorm is actually very simple and can be roughly divided into 8 steps.
1. If the WebStorm version was installed before, you can delete and uninstall it first, and then reinstall it.
2. Download the WebStorm installation package from the official website
https://www.jetbrains.com/zh-cn/webstorm/download/other.html
It is recommended to use version 2021.2.2, it is effective after personal testing
3. Double-click to open the exe program and click "Next"
4. Select the installation location and click "Next"
5. Select all options and click "Next"
6. Confirm the installation interface and click "Next"
7. Waiting for installation
8. When the installation is complete, select when to start and click "Finish"
- If you want to know how to authorize, you can read this tutorial, which has detailed introductionWebStorm authorization tutorial https://it1314.top /article/778/
3 10 ways to improve efficiency
1. Webstorm opens the es6 environment
2. Create template settings for new vue files
3. Webstorm sets code to wrap automatically
4. Webstorm turns on code prompts
5. Panel display and adding panel display items
6. Global search (double-click the shift key to search files, variables, functions, etc.)
7. Set theme style, font size, font style, line height (Ctrl + Alt + S)
8. Comparison of historical versions of file modifications
9. Turn on code completion
(Reference URL:https://jingyan.baidu.com/article/a3f121e4a64767fc9152bb40.html)
10. Multiple cursor selection
Purpose of modification: Modify the class attribute of the above code to item = > item1; Modification method: Hold down the Alt key, and the mouse will change to the same position to select downwards.
For items in the same position, we can use the above method. For items in different positions => item1, we can select one, and then_ Hold down the Alt key _
, just select the 2nd, 3rd, 4th...nth one to achieve unified modification.
4 commonly used shortcut keys
| shortcut key | illustrate |
|---|---|
| Ctrl+/ or Ctrl+Shift+/ | Comment (// or /…/) |
| Shift+F6 | double naming |
| Ctrl+X | Save deleted lines to clipboard |
| Ctrl+Y | Delete a line |
| Shift+Enter | Start over on the next line (no matter where the cursor is) |
| Ctrl + Shift + Enter | Restart the previous line (no matter where the cursor is) |
| Ctrl+D | Copy row |
| Ctrl+G | Find row |
| Ctrl+Shift+Up/Down | Code moves up/down. |
| F2 or Shift+F2 | Highlight errors or warnings for quick location |
| Ctrl+Shift+F7 | Highlight selected text, press Esc to highlight |
| Ctrl+B or Ctrl+left mouse button | Quickly open the class or method at the cursor |
| Ctrl + Alt + B | Jump method implementation |
| Ctrl + Shift + I | Open definition quick find |
| Alt + Up/Down | Jump to previous/next method |
| Ctrl+E | Recently opened files |
| Alt+F1 | Find where the code is |
| Ctrl+Alt+L | Format code |
| Ctrl+R | replacement text |
| Ctrl+Shift+R | Batch code replacement in specified directory |
| Ctrl+Shift+F | Batch search for codes in a specified directory |
| Ctrl+F | Find text |
| Ctrl+P | Method parameter prompts |
| F3 | Find next |
| Shift+F3 | Find previous |
| Alt+Shift+F | Add current file to favorites |
| Ctrl+Alt+S | Open configuration window |
| Ctrl+Shift+N | Quickly find files in the project by file name (must remember) |
| Ctrl+Shift+Alt+N | Quickly find a location by one character (must remember) |
| Shift+Enter | Start a new line (no matter where the cursor is) |
| Ctrl + Alt + T | Surround selected code blocks with if, else, try, catch, for, etc. |
| Ctrl + Shift + U | Switch the case of the word at the cursor position |
| Ctrl + Delete | Delete to end of word |
| Ctrl + Backspace | Delete to the beginning of the word |
| Ctrl + E | Pop up recently opened files |
| F11 | Switch bookmarks, which is F2 of sublime text |
| Ctrl + Shift + F12 | Switch maximized editor |
| Alt + Shift + F | Add to favorites |