❝

⌈ to do good work must first sharpen its tools ⌋, reasonable and effective use of tools, can greatly improve work efficiency. I switch back and forth between WebStorm and VsCode, but still find WebStorm more powerful 🌹. This article introduces some Settings and shortcuts for daily use of WebStorm. Welcome to supplement, reciprocity you and me. 🌹

❞

WebStorm version: WebStorm 2017.2 Operating system: Mac OS

1. Common Settings

1.1 Setting the Terminal font

Preferences > Editsor > Colors & Fonts > Console Font

1.2 Disable automatic real-time saving

  • Preferences > Apearance & Behavior > System Settings
  • Uncheck “Save Files on frame deactivation” and “Save Files automatically If Application is idle for”

1.3 The star (*) mark is displayed when the file is not saved

  • Preferences > Editor > General > Editor Tabs
  • Check “Mark Modified Tabs with Asterisk”

1.4 Setting Double-click to select variables with camel name

  • Preferences > Editor > General

  • Deselect Honor “CameHumps” words Settings when selecting on double click

  • Preferences > Editor > General > Smart Keys

  • Check Use “CameHumps” words

1.5 Enabling Eslint to verify JS code

❝

Make sure Nodejs is installed and the Eslint files are configured in the project:.eslintrc,.eslinignore

❞

  1. Preferences > Languages & Frameworks > Javascript > Code Quality Tools > Eslint
  2. Check the Eable
  3. Enter the Node and Eslint paths
  4. Select Automatic Search and Apply
  5. Editor > Inspections
  6. Uncheck all suboptions under Javascript
  7. Check Javascript > Code Quality Tools > first Eslint
  8. Apply

1.6 Code Style

Preferences > Code Style: Sets the Code Style for each type of file.

1.6.1 Support for JSX syntax
  • Preferences > Languages & Frameworks > Javascript
  • Select the React JSX

2. The shortcut key

❝

On the Mac, CTRL is replaced with Command, and Alt and Option are the same key

❞

key meaning
ctrl + 1 Quickly open or hide the project panel, that is, open the Hide sidebar
ctrl + a Select all
ctrl + c copy
ctrl + d If text is selected it copies the line to the end, if text is not selected it copies the line down
ctrl + e The list of recently opened files is displayed, and you can quickly select the recently opened files.
ctrl + f Look up text in the file you are in
ctrl + j Output template, automatic code [pop-up shortcut code box.
ctrl + k Go to the Commit screen and commit the git version
ctrl + m Shrink this window
ctrl + o Select alternative method
ctrl + q Exit all WebStorm Windows
ctrl + r Replace text
ctrl + v Paste the contents of the paste board
ctrl + x Cut (delete) the line, unselected, directly cut the entire line, if selected part of the content to cut the selected content
ctrl + z fallback
ctrl + / Single-line comments
ctrl + '-/+' You can fold any block of code in your project, and instead of selecting folds, it automatically recognizes folds.
CTRL + '. The code that folds the selected code.
CTRL + Delete (Backspace) Deletes the line where the cursor is located
ctrl + left/right Cursor moves to start/end of line
ctrl + shift + f Global lookup text
ctrl + shift + o Open a file.
ctrl + shift + v Choose to paste the clipboard content (with clipboard memory function)
ctrl + shift + r Replaces the specified text globally
ctrl + shift + / Block comments (/xxx/)
ctrl + alt + l Formatting code
ctrl + alt + o Optimize imported classes and packages
ctrl + alt + left/right Returns to last viewed location
alt + up/down Expand/narrow the selection layer by layer
Alt + enter Import package, automatic correction
alt + shift + c Compare the recently modified code
alt + shift + f Add the current file to favorites
shift + enter Restart a line (no matter where the cursor is)
shift + F6 Refactoring – Rename
ctrl + shift + '+/-' Expand/shrink all methods in the file
tab After entering the code label, press Tab to generate the code.
ctrl + b Skip to the variable declaration and quickly open the class or method at the cursor
ctrl + g Jump to specified row specified column (column can be left blank)
ctrl + h Shows the class structure diagram (it won’t if it doesn’t have one)
ctrl + l Go To Line, Go To Line
ctrl + n To find the class
ctrl + p Display Parameter Information
ctrl + s Save the document (webStrom automatically saves it for you, this shortcut is not useful in this editor)
ctrl + t Bring up the Git update project options box, which includes Merge, Rebase, and other options
ctrl + w Close this TAB
ctrl + y Displays the definition of the file
ctrl + [] Matching {} []
ctrl + F12 You can display the structure of the current file
CTRL + space Code hinting
ctrl + backspace Delete text start
CTRL + left mouse button Skip to variable name (introduction)
ctrl + up/down The cursor jumps to the first or last line
ctrl + shift + a Find the actions
ctrl + shift + i Displays details about the current CSS selector or JS function
ctrl + shift + k Bring up git’s push interface and push the version
ctrl + shift + n Open files in the project, the purpose is to open files in any directory under the current project.
ctrl + shift + u Flip case at cursor position (uppercase to lowercase, lowercase to uppercase)
ctrl + shift + F7 Highlight all of this text and press Esc to highlight and disappear
ctrl + shift + F12 Toggle the maximized editor
ctrl + shift + space Automatic code completion
ctrl + shift + ]/[ Selected block code
ctrl + shift + up/down Move sentences up and down
ctrl + alt + t Around Wrap codes (including Zencoding Wrap with Abbreviation)
ctrl + alt + v This shortcut allows you to quickly declare a variable, for example by entering a string in code and pressing this shortcut to quickly declare a string variable.
ctrl + alt + space Class name or interface name prompt
ctrl + alt + b Go to implementation(s
ctrl + alt + t With… (if, else, try, catch, for, etc.) surround the selected line with * (* includes if, while, try catch, etc.)
ctrl + alt + h Click on one of the methods and press this shortcut key to pop up the calling relationship of this method on the left bar. This shortcut key is very common in development. (Not applicable on Mac)
ctrl + shift + alt + n Find a method or variable in a class, and quickly find the location in a single character (required)
alt + left/right Jump cursor position with word as boundary
alt + f1 Find where the code is
alt + F3 Look for the same text one by one and highlight it
alt + insert Generate code (such as get,set methods, constructors, etc.)
shift + esc Minimize any small window currently active, can also be Alt + number key, number in the small window display.
shift + alt + up Block movement (if(){},while(){} block movement)
shift + F3 Find the last one
F2 or Shift + F2 Highlight errors or warnings for quick location
F3 Find the next one
command + mouseover Display main information

3. Use the Tab key

👆 we talked about the code tag and once you’ve typed it in, hit Tab to generate the code. 👇 shares some practical ways to quickly enter labels, starting with the meanings of a few symbols

The label meaning
> The next child tag is used to connect parent and child tags
* How many child tags, followed by the number of child tags
$ The name sequence number of the tag, which can be understood as I in the for loop
{} Label content and text must be represented in {}

  5. Div >p*5, TAB

<div>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
 <p></p> </div> Copy the code
  1. The inputUl >li*4>a[href=www.baidu.com], addtabkey
<ul>
  <li><a href="www.baidu.com">I was number one</a></li>
  <li><a href="www.baidu.com">I was number two</a></li>
  <li><a href="www.baidu.com">I was number three</a></li>
  <li><a href="www.baidu.com">I was number four</a></li>
</ul> Copy the code
  1. The inputimg[src='images/$.jpg']*3, addtabkey
<img src="images/1.jpg" alt="">     
<img src="images/2.jpg" alt="">     
<img src="images/3.jpg" alt="">
Copy the code
  1. The inputul>li*3>div.img>img[src='image/$.jpg'], addtabkey
<ul>
  <li>
    <div class="img"><img src="image/1.jpg" alt=""></div>
  </li>
  <li>
 <div class="img"><img src="image/2.jpg" alt=""></div>  </li>  <li>  <div class="img"><img src="image/3.jpg" alt=""></div>  </li> </ul> Copy the code
  1. The inputdiv#tab1+div#tab2, addtabkey“+ : indicates parallel labels“
<div id="tab1"></div>
<div id="tab2"></div>
Copy the code
  1. The introduction oflink.scriptThe label
<! -- Add link, enter link, add TAB
<link rel="stylesheet" href="">
 
<! Link: CSS, TAB -->
<link rel="stylesheet" href="style.css">
 <! Script: SRC, TAB --> <script src=""></script>  <! Insert js into HTML, type script, add TAB --> <script></script> Copy the code

12. Quickly enter ul and LI

<! --ul and 1 li enter ul+, TAB -->
<ul>
  <li></li>
</ul>

<! Ul >li*3, add TAB --> <ul>  <li></li>  <li></li>  <li></li> </ul>  <! Ul >li.item$*6, add TAB --> <ul>  <li class="item1"></li>  <li class="item2"></li>  <li class="item3"></li>  <li class="item4"></li>  <li class="item5"></li>  <li class="item6"></li> </ul> Copy the code

13. Enter multiple labels quickly

<! -- Enter a:link, add TAB -->
<a href="http://"></a>

<! --1 P tag: enter P, TAB -->
<p></p>
 <! -- Two P tags: enter P + P, add TAB --> <p></p> <p></p>  <! -- Three P tags: enter P *3, TAB --> <p></p> <p></p> <p></p> Copy the code

14. Quickly type the label with the class name

<! -- Type div.one.two, add TAB -->
<div class="one two"></div>

<! -- Enter form:get, TAB -->
<form action="" method="get"></form>
 <! -- Enter form:post, TAB --> <form action="" method="post"></form>  <! Input :button, add TAB --> <input type="button" value=""> Copy the code

【 note 】: The TAB key operation must be at the end of the input content!

If you find this article useful, please give me a thumbs up at 🍀

This article is formatted using MDNICE