search
HomeDevelopment ToolswebstormWebstorm usage tips sharing
Webstorm usage tips sharingFeb 02, 2021 am 11:11 AM
webstormSkill

Webstorm usage tips sharing

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.

Setting tips:

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-> Check Override default fonts by (not recommended) in Appearance, set Name: NSimSun, Size: 12

How to display line numbers:
File -> Settings ->Editor, check "Show line numbers" to display line numbers

How to automatically wrap the code:
File -> settings -> Editor "Use Soft Wraps in editor" check , the code will automatically wrap into new lines

How to click the cursor to display it at the end of the line:
File -> Settings->Editor Just uncheck "Allow placement of caret after end of line".

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

Change to your own Familiar with the editor shortcut keys:
File ->Settings->Keymap, 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.

Developing js I found that I need ctrl return to select the candidate option:
File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: "Smart" to "Always"

The js prompt is relatively slow
File -> Code Completion -> Autopopup in and change 1000 to 0

Git configuration:
File -> settings -> Editor -> github, go in Change the github account. If you don’t have git, you don’t need it.

Plug-in installation:
File ->plugins, then choose the powerful plug-ins and install them. ("css-X-fire" plug-in, Used when using firebug to modify css attributes, 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

Breadcrumb 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

Dual-column code interface:
Right Click the file on the code tab, then right-click -> spilt vertically (left and right screens) or spilt horizontally (upper and lower screens)

Local history function:
A good way to retrieve the code

WebStorm integrates git usage

Webstorm only integrates common git operations and cannot completely replace command line tools. You can check which git branch you are in in the lower right corner of the interface. You can also click on it to switch or create a new branch.

View the differences between the current code and the repository code:
Right-click any area of ​​the code interface, select git -> compare with and then select the repository to be compared.

webstorm shortcut key description

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 Display the location of the cursor Error message or warning message

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 Overload method

Ctrl I
Implement methods Implementation method

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

Ctrl Shift /
Comment/uncomment with block comment Block comment/uncomment

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 According to Template format formats code

Tab/ Shift Tab
Indent/unindent selected lines Indents/undoes indentation of 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 block Code block to clipboard

Ctrl V or Shift Insert
Paste from clipboard Paste the content on the clipboard

Ctrl Shift V
Paste from recent buffers Paste from the buffer The latest content

Ctrl D
Duplicate current line or selected block Copy the current line or selected block

Ctrl Y
Delete line at caret Delete the line at the cursor position

Ctrl 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 line

Ctrl Shift U
Toggle case for word at caret or selected block Case conversion at the cursor position

Ctrl Shift ]/[
Select till code block end/start Select till the code block ends/start

Ctrl Delete
Delete to word end Delete the text end

Ctrl Backspace
Delete to word start Delete text start

Ctrl NumPad /-
Expand/collapse code block Expand/collapse code block

Ctrl Shift NumPad
Expand all Expand all

Ctrl Shift NumPad-
Collapse Reduce all

Ctrl F4
Close active editor tab Close active editor tab

Search/replaceSearch/replace related shortcut keys

Ctrl F
Find Quickly search for codes in the current file

Ctrl Shift F
Find in path Find the path within the specified file

F3
Find next Find the next

Shift F3
Find previous Find the previous

Ctrl R
Replace Code replacement in the current file

Ctrl Shift R
Replace in path Batch replacement of codes in the specified file

Usage Search Search related shortcut keys

Alt F7/Ctrl F7
Find usages/Find usages in file Find usage/Find usage in file

Ctrl Shift F7
Highlight usages in file file

Ctrl Alt F7
Show usages Show usage

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 context configuration from editor

Ctrl Shift X
Run command line Run command line

Debugging Debugging related shortcut keys

F8
Step over does not enter the function

F7
Step into single-step execution

Shift F7
Smart step into Intelligent single step execution

Shift F8
Step out Jump out

Alt F9
Run to cursor Run to the cursor

Alt F8
Evaluate expression Evaluate expression

F9
Resume program Restart the program

Ctrl F8
Toggle breakpoint Switch breakpoint

Ctrl Shift F8
View breakpoints View breakpoints

Navigation Positioning-related shortcut keys

Ctrl N
Go to class jump to the specified class

Ctrl Shift N
Go to file through the file Quickly search files in the project by name

Ctrl Alt Shift N
Go to symbol Search function location by one character

Alt Right/ left
Go to next/ previous editor tab Enter Next/Previous editor options

F12
Go back to previous tool window Enter the previous tool window

Esc
Go to editor(from tool window) From tool window Enter the editor

Shift Esc
Hide active or last active window Hide active window

Ctrl Shift F4
Close active run/message/find/…tab Close active….tab

Ctrl G
Go to line Jump to the line

Ctrl E
Recent files popup Pop up the recently opened file

Ctrl Alt Left/Right
Navigate back/forward Navigate forward/back

Ctrl Shift Backspace
Navigate to last edit location Navigate to the last edit location

Alt F1
Select current file or symbol in any view Find the currently selected code or file in other interface modules Location

Ctrl B or Ctrl Click
Go to declaration Jump to the definition

Ctrl Alt B
Go to implementation(s) Jump to the method implementation

Ctrl Shift B
Go to type declaration Jump to method definition

Ctrl Shift I
Open quick definition lookup Open quick definition lookup

Ctrl U
Go to super-method/super-class Jump method/super class

Alt Up/Down
Go to previous/next method Quickly move 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 errors or warnings for quick location , use this shortcut key to quickly jump between error statements.

F4/Ctrl Enter
Edit source/ View source Edit source code/View source code

Alt Home
Show navigation bar Show navigation bar

F11
Toggle bookmark Switch mark

Ctrl F11
Toggle bookmark with mnemonic Use memory to switch mark

Ctrl #[0-9]
Go to numbered bookmark Jump to numbered bookmark Mark

Shift F11
Show bookmark Show bookmark

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

Ctrl Alt V
Introduce Variable Introduce variable

Ctrl Alt F
Introduce Field Introduce field

Ctrl Alt C
Introduce Constant Introduce constants

VCS/Local History version control system/local history related shortcut keys

Alt BackQuote()
'VCS 'quick popup Quick popup VCS

Ctrl K
Commit project to VCS Submit project to VCS

Ctrl T
Update project from VCS Update project from VCS

Alt Shift C
View recent changes View the latest changes

General Commonly used related shortcut keys

Ctrl Shift A
Find action Find and call the editor's function

Alt #[0-9]
Open corresponding tool window Quickly switch to open the interface module

Ctrl Alt F11
Toggle full screen mode Switch to 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 Current properties check the current file

Ctrl BackQuote( )
Quick switch current scheme Quickly switch the existing combination

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)

Related recommendations: webstorm usage tutorial

The above is the detailed content of Webstorm usage tips sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:博客园. If there is any infringement, please contact admin@php.cn delete
webstorm怎么运行vue项目webstorm怎么运行vue项目Apr 08, 2024 pm 01:57 PM

要使用 WebStorm 运行 Vue 项目,可以按照以下步骤进行操作:安装 Vue CLI创建 Vue 项目打开 WebStorm启动开发服务器运行项目查看浏览器中的项目在 WebStorm 中调试项目

WebStorm2021如何安装?安装教程详解【附图】WebStorm2021如何安装?安装教程详解【附图】Aug 02, 2022 pm 05:27 PM

对于入门JavaScript 开发的者,最重要的就是安装WebStorm软件,一款非常优秀的JavaScript工具,在互联网上查询目前还没有一篇写得比较详细的WebStorm教程。今天分享WebStorm2021.3.2版本的安装教程,从下载到安装以及创建项目带大家完整的走一遍。

webstorm怎么创建htmlwebstorm怎么创建htmlApr 08, 2024 pm 01:42 PM

使用 WebStorm 创建 HTML 项目分五步:创建新项目并配置 HTML 设置;添加新 HTML 文件;编写 HTML 代码并利用实时预览;预览 HTML 文件并进行部署;使用模板和 Emmet 快捷方式加快开发。

webstorm怎么切换中文webstorm怎么切换中文Apr 08, 2024 pm 01:30 PM

WebStorm 中切换中文方法:打开设置面板(Windows/Linux:Ctrl + Alt + S;macOS:Command + ,)。导航至“外观和行为”>“语言和框架”。在“用户界面语言”下拉菜单中选择“IntelliJ IDEA 用户界面”。在“Locale”列表中选择所需的中文语言(例如“中文(中国大陆)”)。点击“应用”,重启 WebStorm。

webstorm怎么改中文版webstorm怎么改中文版Apr 08, 2024 pm 12:24 PM

将 WebStorm 更改为中文版:打开 WebStorm 设置。导航到“Appearance & Behavior”>“Language & Fonts”。在“User Interface Language”中选择“Chinese (Simplified)”或“Chinese (Traditional)”。重启 WebStorm,界面将显示为中文。

webstorm怎么恢复默认webstorm怎么恢复默认Apr 08, 2024 pm 12:15 PM

要恢复 WebStorm 为默认设置,请关闭 WebStorm 并删除首选项目录,然后重新启动 WebStorm。详细步骤包括:完全退出 WebStorm。删除首选项目录(具体位置因操作系统而异)。重新启动 WebStorm。

webstorm怎么新建项目webstorm怎么新建项目Apr 08, 2024 am 11:57 AM

使用 WebStorm 创建新项目的步骤:打开 WebStorm并选择“新建项目”;根据需要选择项目类型,如 Node.js、React 等;配置项目设置,包括名称、位置和框架版本;对于特定项目类型,选择所需框架;单击“创建”按钮生成项目;项目将自动在 WebStorm 中打开,供您编写代码和构建应用程序。

webstorm怎么创建vue项目webstorm怎么创建vue项目Apr 08, 2024 pm 12:03 PM

通过以下步骤在 WebStorm 中创建 Vue 项目:安装 WebStorm 和 Vue CLI。在 WebStorm 中创建一个 Vue 项目模板。使用 Vue CLI 命令创建项目。将现有项目导入 WebStorm。使用 "npm run serve" 命令运行 Vue 项目。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!