Some related techniques for using WebStorm
This article brings you some related skills about using WebStorm. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
There are more complete shortcut keys below, and you will gradually become familiar with it...
WebStorm mashup svn
WebStorm mashup nodeJS
Use less and uglify -js as an example
How to use npm to download modules in root
A brief introduction to webstorm
Official website address: http://www.jetbrains.com/webstorm /features/index.html
If you want to do your job well, you must first sharpen your tools, as the title states. I saw an article on the Internet introducing webstrom, and I felt that the function is really powerful. I also know why the files uploaded to github by Alibaba's front-end have an .idea file. (It is said that Taobao internally recommends using webstrom when writing js)
We can understand that IDE integrates many functions you want, or functions you don't want. In other words, it is an editor with many plug-ins installed, so so far, I don’t think it is necessary to install any plug-ins for it.
Then let’s introduce the special features of webstrom:
- Any editor needs to save (ctrl s). This is a characteristic of all editing software on the win platform, but there is no familiar * in the upper right corner of the webstorm editing file.
Benefits: After eliminating the need for ctrl s, when combined with Firefox's vim, you can basically see the results page without moving the mouse.
Disadvantages: There is no previous * mark, and it will be stored immediately in case of keyboard misoperation. - Any editor has no history record as long as the file is closed, but webstorm does. vcs->Local History -> Show History (shortcut key: ALT ~ ->7)
Benefits: As long as webstorm is not closed, your file can be returned to the previous operation at any time (this is why ctrl in webstorm y is the reason for deleting a row).
Disadvantages: These historical records will be gone after webstorm is closed and restarted; another disadvantage is that the resulting memory consumption will inevitably be relatively large. - Any editor, except server svn, does not have a local version, but webstorm provides a local file modification history (shortcut key: ALT SHIFT c, ALT+Option+c on Mac). You can also use Ctrl E to pop out recently opened files.
Benefits: Equivalent to local svn.
Disadvantages: Memory consumption must also be relatively large. - Integrated zencoding, HTML5, ftp, instant editing (chrome), auto-complete, Mozilla-based JavaScript debugger, JSLint, Less support, CoffeeScript support, Node.js, unit testing , Integrate features such as Git and svn version control.
- When writing CSS, it will intelligently prompt the paths of various files and images, so you don’t have to confirm whether the file exists.
- How to change the theme (font & color matching):
File -> settings -> Editor -> colors&fonts -> scheme name.Theme download address
- How to prevent webstorm from opening the project file when it starts:
File -> Settings->General remove Reopen last project on startup.
- How to display Chinese perfectly:
File -> Settings->Appearance, check Override default fonts by (not recommended), set Name: NSimSun, Size: 12
- How to display line numbers:
File -> Settings->Editor, check "Show line numbers" to display the line numbers
- How to automatically wrap code:
File -> settings -> Editor "Use Soft Wraps in editor" Check the hook, and the code will automatically wrap.
- How to click the cursor to display At the end of this line:
File -> Settings->Editor "Allow placement of caret after end of line" just uncheck it.
- How to modify the shortcut keys:
File -> Settings->Keymap, then double-click the function you want to modify the shortcut, a prompt box will appear, follow the prompts
Replace with the shortcut keys you are familiar with the editor:
File ->Settings->Keymap, which supports mainstream IDEs such as Visual Studio, Eclipse, and NetBeans.javascript class library prompt.
File -> settings -> Javascript -> Libraries -> Then select the javascript class library you often use in the list, and finally Download and Install is ok.-
When developing js, I found that ctrl return is required to select the candidate option:
File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: "Smart" to "Always" js prompt is relatively slow
File -> Code Completion -> Autopopup in and change 1000 to 0git configuration:
File -> settings -> Editor -> github, go in and change the github account. If you don’t have git, you don’t need it.Plug-in installation:
File - >plugins, then select the powerful plug-ins and install them. (The "css-X-fire" plug-in is used when using firebug to modify css properties, the css code in the editor will also change.)Update later
Webstorm usage experience
- ##Favorites function:
When the project directory is very large , some subdirectories are often opened, but the level is very deep. At this time, you can add the directory to your favorites. After the addition is successful, there will be a "Favorites" menu on the left
- Bread Crumb navigation:
In addition to the project page on the left, where you can select a directory, there is a directory similar to the website breadcrumb navigation under the top menu that can also achieve the same function. Clicking on each directory will bring up a drop-down menu to display the subdirectories under it, which is very practical.
- Constructor interface:
Comments will appear if they match the format. If it is a js file, it is the functions and objects of the js class; if it is a css file, it is a summary of the css file; if it is an html file, it is the structure diagram of the node. These are just for the convenience of viewing the structure of the code.
- todo interface:
Add todo comments to the code and this interface will appear
- Double-column code interface:
Right-click the file on the code tab, and then right-> spilt vertically (left and right screens) or split horizontally (upper and lower screens)
- Local history function:
A good way to retrieve code
Right-click any area of the code interface, select git -> compare with and then select the repository to be compared.
Editing editing related shortcut keys
- Ctrl Space:
Basic code completion (the name of any class, method or variable) Basic code completion (any class, function or variable name), change to Alt S
- Ctrl Shift Enter:
Complete statement Complete the current Statement
- Ctrl P:
Parameter info (within method call arguments) Parameter information includes method call parameters
- Ctrl mouse over code
Brief Info Simple information
- Ctrl F1
Show description of error or warning at caret Show the error or warning at the cursor position
- Alt Insert
Generate code... (Getters, Setters, Constructors) Create a new file or generate code,...Constructor function can create getter and setter methods for any field in the class
- Ctrl O
Override methods Override methods
- Ctrl I
Implement methods Implementation methods
- Ctrl Alt T
Surround with… (if, else, try, catch, for, etc) Use * to surround the selected line of code, (* includes if, while, try catch, etc.)
- Ctrl /
Comment/uncomment with line comment line comment/uncomment line
- Ctrl Shift /
Comment/uncomment with block comment block comment/uncomment block
- Ctrl W
Select successively increasing code blocks Select code blocks, usually incremental selection
- Ctrl Shift W
Decrease current selection to previous State Return to the previous shortcut key, decrement selection code
- Alt Q
Context info Context information
- Alt Enter
Show intention actions and quick-fixes Intention actions, quick results
- Ctrl Alt L
Reformat code Format the code according to the template format
- Tab/ Shift Tab
Indent/unindent selected lines Indent/Unindent selected lines
- Ctrl X or Shift Delete
Cut current line or selected block to clipboard Cut the current line or selected block to the clipboard
- Ctrl C or Ctrl Insert
Copy current line or selected block to chipboard Copy the current line or Selected code block to clipboard
- Ctrl V or Shift Insert
Paste from clipboard Paste the contents of the clipboard
Ctrl Shift V
Paste from recent buffers Paste the latest content in the bufferCtrl D
Duplicate current line or selected block Copy the current Line or selected code blockCtrl Y
Delete line at caret Delete the line at the cursor positionCtrl Shift J
Smart line join (HTML and JavaScript only) Join smart line (HTML and JavaScript)Ctrl Enter
Smart line split (HTML and JavaScript only) Split smart line (HTML and JavaScript)Shift Enter
Start new line Start a new lineCtrl Shift U
Toggle case for word at caret or selected block Case conversion at the cursor positionCtrl Shift ]/[
Select till code block end/start Select till the end/start of the code blockCtrl Delete
Delete to word end Delete text endCtrl Backspace
Delete to word start Delete text startCtrl NumPad /-
Expand/collapse code block Expand/collapse code blockCtrl Shift NumPad
Expand all Expand allCtrl Shift NumPad-
Collapse Collapse allCtrl F4
Close active editor tab Close active editor tab
Search/replaceSearch/replace related shortcut keys
Ctrl F
Find Quickly find the code in the current fileCtrl Shift F
Find in path Find the path in the specified fileF3
Find next Find the next oneShift F3
Find previous Find the previousCtrl R
Replace Code replacement in the current fileCtrl Shift R
Replace in path Batch replacement of codes in specified files
Usage Search Search related shortcut keys
Alt F7/Ctrl F7
Find usages/Find usages in file Find usage/Find usage in fileCtrl Shift F7
Highlight usages in fileCtrl Alt F7
Show usages Show usages
Running running
- ##Alt Shift F10
Select configuration and run Select the architecture and run
- Alt Shift F9
Select configuration and debug Select the architecture and patch the vulnerability
- Shift F10
Run Run
- Shift F9
Debug Fix the vulnerability
- Ctrl Shift F10
Run context configuration from editor Run from editor Content structure
- Ctrl Shift X
Run command line Run command line
- F8
- Step over does not enter the function
- Step into single-step execution
- Smart step into Smart step into
- Step out
- Run to cursor Run to the cursor
- Evaluate expression Evaluate expression
- Resume program Restart Program
- Toggle breakpoint Switch breakpoint
- View breakpoints View breakpoint
- Ctrl N
- Go to class jump to the specified class
Ctrl Shift N - Go to file Quickly search for files in the project by file name
- Go to symbol Search by one character Function location
- Go to next/ previous editor tab Go to next/previous editor tab
- Go back to previous tool window Enter the previous tool window
- Go to editor(from tool window) Enter the editor from the tool window
Shift Esc - Hide active or last active window Hide the active window
- Close active run/message/find/…tab Close the activity ….Tag
- Go to line Jump to the first line
- Recent files popup Recently opened files
- Navigate back/forward Navigate forward/back
- Navigate to last edit location Navigate to the last edit location
- Select current file or symbol in any view Find the location of the currently selected code or file in other interface modules
- Go to declaration jump to the definition
- Go to implementation(s) Jump method implementation
- Go to type declaration Jump method definition
Ctrl Shift I
Open quick definition lookup Open quick definition lookupCtrl U
Go to super-method/super-class Jump Go to method/super classAlt Up/Down
Go to previous/next method Quickly move position between methods- ##Ctrl] /[
Move to code block end/start Jump to the end/start of the coding block
- Ctrl F12
File structure popup File structure popup
- Ctrl H
Type hierarchy Type hierarchy
- Ctrl Alt H
Call hierarchy Call hierarchy
- F2 / Shift F2
Next/previous highlighted error Jump to the next/previous error, highlight the error or warning to quickly locate it, use this shortcut key to quickly jump between erroneous statements.
- F4/Ctrl Enter
Edit source/ View source Edit source code/View source code
- Alt Home
Show navigation bar Display navigation bar
- F11
Toggle bookmark switch mark
- Ctrl F11
Toggle bookmark with mnemonic Use memory switch mark
- Ctrl #[0-9]
Go to numbered bookmark Jump to the numbered bookmark
- Shift F11
Show bookmark Show mark
Refactoring Refactoring related shortcut keys
- F5
Copy copy
- F6
Move Move
- Alt Delete
Safe Delete Safe Delete
- Shift F6
Rename Rename
- Ctrl Alt N
Inline Variable Embed variable
##Ctrl Alt M - Extract Method(Javascript only) Extract function
- Introduce Variable Introduce variable
- Introduce Field Introduce field
- Introduce Constant Introducing constants
- Alt BackQuote( )
- 'VCS'quick popup Quickly pop up VCS
- Commit project to VCS Submit project to VCS
- Update project from VCS Update project from VCS
##Alt Shift C View recent changes View recent changes
- Ctrl Shift A
-
Alt #[0-9] Open corresponding tool window Quickly switch to open the interface module -
Ctrl Alt F11 Toggle full screen mode Switch full screen mode -
Ctrl Shift F12 Toggle maximizing editor Switch maximizing editor -
Alt Shift F Add to Favorites Add the current file to Favorites -
Alt Shift I Inspect current file with current profile Use the current profile to check the current file -
-
Ctrl Alt S Open setting dialog Open the setting dialog box -
Ctrl Tab Switch between tabs and tool window Switch between tabs and tool window (conflicts with windows shortcut keys)
- Find action Find and call Editor functions
The above is the detailed content of Some related techniques for using WebStorm. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Steps to resolve WebStorm crash issues: Check for updates; Restart your computer; Disable plugins; Reset settings; Clear cache; Check firewall and antivirus software; Reinstall WebStorm; Contact support.

You can run a JSP project in WebStorm by following these steps: Create a Java Web project. Configure the project and add Web and Java EE facets. Create the JSP file in the "src/main/webapp" directory. Write JSP code including HTML, Java and JSP tags. Deploy and run the project. Access the JSP page by entering the application context root in your browser.

To restart WebStorm, follow these steps: Use the shortcut keys: Windows/Linux: Ctrl + Shift + A, macOS: Cmd + Shift + A. Enter "restart" in the search field and select "Restart". Using the menu: Click the File menu and select Restart under Reload. Using Task Manager: In Task Manager or Force Quit the application window, select the WebStorm process and click Restart or Restart.

For developers who focus on web development and pursue deep functionality, WebStorm is a better choice; while users who value customizability, lightweightness, and multi-language support are more suitable for VSCode.

You can use WebStorm to connect to the database through the following steps: 1. Open the database tool window; 2. Create a data source; 3. Connect to the data source; 4. Query the database; 5. Browse tables and data; 6. Edit database objects; 7. Manage Users and permissions.

WebStorm provides automatic line wrapping, which breaks code into separate lines to improve readability. Its rules include: 1. Branch long expressions and statements; 2. Branch method calls; 3. Branch functions and class definitions. User-customizable settings such as maximum line length, indentation type, and shortcut keys. However, word wrapping may not work with single-line comments or string literals and will affect code formatting, so careful review is recommended before application.

Steps to launch UniApp project preview in WebStorm: Install UniApp Development Tools plugin Connect to device settings WebSocket launch preview

To run a Vue project using WebStorm, you can follow these steps: Install Vue CLI Create a Vue project Open WebStorm Start a development server Run the project View the project in the browser Debug the project in WebStorm
