This article shares with you a summary of the introductory use of WebStorm. The content has certain reference value. Friends in need can take a look. I hope it will be helpful to you.
WebStorm is built on the open source IntelliJ platform that JetBrains has developed and refined for over 15 years. It provides a unified UI that works with many popular version control systems, ensuring a consistent user experience across git, GitHub, SVN, Mercurial and Perforce. WebStorm offers customizable features, adjust it to perfectly fit your coding style, from shortcuts, fonts and visual themes to tool windows and editor layouts.
Intelligent Coding Assistance
WebStorm helps you write great code. Its smart editor features code completion, dynamic code analysis, code formatting, and refactoring to increase your productivity and take your development experience to a whole new level.
Supported Languages and Frameworks
WebStorm provides first-class coding help for JavaScript, ECMAScript 6, TypeScript, CoffeeScript, Dart, and Flow.
WebStorm can help you write HTML, CSS, Less, Sass and Stylus code.
Best of all, you benefit from advanced support for Node.js and popular frameworks such as React, Angular, Vue.js, Meteor, and more.
Code Intelligent Assistance
WebStorm analyzes your project to provide the best code completion results for all methods, functions, modules, variables and classes defined in your application. Сoding assistance is context-aware and can also be framework-specific.
Enjoy code completion for properties and their values when using CSS in WebStorm. In Less and Sass, get help from mixins. Of course, in HTML you get code completion for all tags and attributes.
Code Quality Analysis and Detection
WebStorm has hundreds of built-in checks covering all supported languages. Apart from this, you can also use ESLint, TSLint, Stylelint, JSCS, JSHint and JSLint.
WebStorm Editor reports all errors and warnings directly as you type, and provides many quick-fix options.
Any lines of code with possible problems in WebStorm are marked in the right editor gutter, so you can easily spot errors and warnings in long files.
You can also use WebStorm to run code quality analysis for your entire project and automatically apply selected quick fixes.
Tips for using webstorm
How to change the theme (font & color matching) of WebStorm:
File -> settings -> Editor -> colors&fonts -> scheme name.Theme download addressHow to prevent webstorm from opening the project file when it starts:
File -> Settings->General remove Reopen last project on startup.How WebStorm displays Chinese perfectly:
File -> Settings->Appearance, check Override default fonts by (not recommended), set Name: NSimSun, Size: 12How to display line numbers in WebStorm:
File -> Settings->Editor, check "Show line numbers" and the line numbers will be displayedHow WebStorm makes the code automatically wrap:
File -> settings -> Editor "Use Soft Wraps in editor" tick, the code will automatically wrapHow to click the cursor and display WebStorm at the end of the line:
File -> Settings->Editor Just uncheck "Allow placement of caret after end of line".How to modify WebStorm shortcut keys:
File -> Settings->Keymap, then double-click the function you want to modify the shortcut, a prompt box will appear, follow the promptsHow to replace WebStorm with the shortcut keys of your familiar 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 in WebStorm, I found that ctrl return is required to select the candidate option:
File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: "Smart" to " Always” The js prompt in WebStorm is relatively slow to set the strategy
File -> Code Completion -> Autopopup in the next 1000 to 0-
Git configuration in WebStorm:
File -> settings -> Editor -> github, go in and change the github account. If you don’t have git, you don’t need it. WebStorm plug-in installation:
File ->plugins, then select the powerful plug-ins and install them. (The "css-X-fire" plug-in is used to modify the css code in the editor when using firebug to modify css attributes. There will also be changes.)
Webstorm usage experience
WebStorm's favorites function:
When the project directory is very large, some subdirectories are often opened, but the hierarchy 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 sideWebStorm's breadcrumb navigation:
Except for the left side On the project page, in addition to selecting a directory, there is a directory similar to website breadcrumb navigation under the top menu to 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.WebStorm's 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.WebStorm's todo interface:
Add todo comments to the code and this interface will appearWebStorm's dual-column code interface:
Right-click the file on the code tab, and then right-> spilt vertically (left and right screens) or spilt horizontally (upper and lower screens)Local history function of WebStorm:
A good way to retrieve code
WebStorm integrates git usage
Only git is integrated in webstorm Commonly used 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 related shortcut keys for WebStorm
- ##Ctrl Space:
Basic code completion (the name of any class, method or variable) Basic code completion (the name of any class, function or variable), change to Alt S
- Ctrl Shift Enter:
Complete statement Supplement Full 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
- 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/undo 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 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 buffer
- 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 only)
- 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 code block end/start
- Ctrl Delete
Delete to word end Delete 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 Collapse all
- Ctrl F4
Close active editor tab Close active editor tab
- Ctrl F
Find Quickly find the code 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 one
- Ctrl R
Replace Replace the code in the current file
- Ctrl Shift R
Replace in path Batch replacement of codes in the specified file
- 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 of Running using
- 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 content framework
- Ctrl Shift
#F8
Step over does not enter the function
F7
Step into single-step execution-
Smart step into Smart step into
Shift F7 -
Step out Jump out
Shift F8 -
Run to cursor Run to Cursor position
Alt F9 -
Evaluate expression Evaluate expression
Alt F8 -
Resume program Restart the program
F9 -
Toggle breakpoint Switch breakpoints
Ctrl F8 -
View breakpoints View breakpoints
Ctrl Shift F8
WebStorm's Navigation positioning related shortcut keysCtrl 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 for function location by one character
Ctrl Alt Shift N -
Alt Right/ left -
Go back to previous tool window Enter the previous A tool window
F12 -
Go to editor(from tool window) Enter the editor from the tool window
Esc -
Hide active or last active window Hide active window
Shift Esc -
Close active run/message/find/…tab Close active….Tab
Ctrl Shift F4 -
Go to line Jump to the line
Ctrl G -
Recent files popup Pop up the recently opened file
Ctrl E -
Navigate back/forward Navigate forward/back
Ctrl Alt Left/Right -
Navigate to last edit location Navigate to the last edit location
Ctrl Shift Backspace -
Select current file or symbol in any view Find the location of the currently selected code or file in other interface modules
Alt F1 -
Go to declaration Jump to the definition
Ctrl B or Ctrl Click -
Go to implementation(s) Jump to the method implementation
Ctrl Alt B -
Go to type declaration Jump to method definition
Ctrl Shift B -
Open quick definition lookup Open quick definition lookup
Ctrl Shift I -
Go to super-method/super-class Jump method/super class
Ctrl U -
Go to previous/next method Quickly move between methods
Alt Up/Down ##Ctrl ]/[
Move to code block end/start Jump to the end/start of the coding blockCtrl F12
File structure popup File structure popupCtrl H
Type hierarchy Type hierarchyCtrl Alt H
Call hierarchy Call hierarchyF2/ Shift F2
Next/previous highlighted error Jump to the next/previous error, highlight error or warning Quickly locate, use this shortcut key to quickly jump between erroneous statements.F4/Ctrl Enter
Edit source/ View source Edit source code/View source codeAlt Home
Show navigation bar Show navigation barF11
Toggle bookmark Switch markCtrl F11
Toggle bookmark with mnemonic Use memory switch markCtrl #[0-9]
Go to numbered bookmark Jump to numbered bookmarkShift F11
Show bookmark Show mark
WebStorm's Refactoring shortcut keys
F5
Copy copyF6
Move MoveAlt Delete
Safe Delete Safe DeleteShift F6
Rename RenameCtrl Alt N
Inline Variable Embed variableCtrl Alt M
Extract Method(Javascript only) Extract function-
Ctrl Alt V
Introduce Variable Introducing variables Ctrl Alt F
Introduce Field Introducing fieldsCtrl Alt C
Introduce Constant Introduce constants
In WebStorm VCS/Local History version control system/local history related shortcut keys
Alt BackQuote ( )
'VCS'quick popup Quickly pop up 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
- 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 the 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 to inspect the current file
- Ctrl BackQuote( )
Quick switch current scheme Quickly convert existing combinations
- Ctrl Alt S
Open setting dialog Open setting dialog
- Ctrl Tab
Switch between tabs and tool window conversion of tabs and tool windows (conflicts with windows shortcut keys)
The above is the detailed content of Summary of the introductory use of WebStorm. For more information, please follow other related articles on the PHP Chinese website!

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

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

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

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

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

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

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

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


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

Dreamweaver Mac version
Visual web development tools

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
Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 English version
Recommended: Win version, supports code prompts!
