🌟🌟🌟🌟🌟

Taste: Coca-Cola

Cooking time: 15min








All shortcuts are personally tested!!

The following shortcuts can help you save a lot of time, our slogan is: No overtime!!

I strongly recommend collecting before reading!!

And must be practical application, can help you save a lot of time, time = money, master them can make you tap code to drink happy water can be more happy!!

Common Shortcut keys


command+ b jumps to variable declaration // Jumping Frog looks for dadcommand+ r Current page replacementcommand + shift+ r global replacement // very good functionalitycommand+ d line copy // Copies the current line to the next linecommand+ / Comments the current linecommand + shift+ / block comment // comment nothing to saycommand + shift+ +/- Expands/collapses the currently selected block of code // You can use it to quickly expand folds when writing long, long code, saving page flipping timecommand+ option + L Format code // Stand at easecommand + shift+ up/down moves current line of code up and down // Nothing to saycommand+ F Current page lookupcommand + shift+ F Global search content // Search is still very commoncommand + shift+ o Search file // searchcommand+ 1 Quickly open or hide the project panel // that is, open the Hide sidebarcommand+ x delete current line // delete can paste, is reserved when moving forwardcommand+ backspace delete current mouse line // Delete current mouse line cannot be pastedcommand+ e Opens recently opened files or projects (file name search is supported) // Recently viewed file historycommand + shift+ v Pastes the clipboard content (with clipboard memory function) // Pastes the clipboard historycommand+ c to copycommand+ v paste // Nothing to say, but these two veterans have to come out lastcommand + shift+ u case conversion // Case conversioncommand+ w To close the current file TAB // To close the current TAB option + To locate the mouse cursor in multiple places // For unified editing or modification option + Enter Automatic correction to activate small light bulbs // ESLint can quickly light up small light bulbs to correct code when enabled. You don't have to scroll or touch pad to find itshift+ Enter soft enter // No matter where the cursor is on the previous line, you can locate the next line of code. After entering, press Tab to generate code. // The basic operation is nothing to sayCopy the code











Quick input label method

Here are some quick ways to type labels, starting with the meanings of a few symbols

>: The next child tag, used to connect parent and child tags

*: Number of 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 {}








1. Enter h1 and press TAB

2. Type div# ABC and press TAB

3. Type div. ABC and press TAB

4

5


<div>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

Copy the code

6. Type ul>li*5>a[href=#]{I’m the first $}, then TAB


<ul>
  <li><a href="#">I was number one</a></li>
    <li><a href="#">I was number two</a></li>
    <li><a href="#">I was number three</a></li>
    <li><a href="#">I was number four</a></li>
    <li><a href="#">I was number five</a></li>
</ul>

Copy the code

7. Enter img[SRC =’images/$.jpg’]*3 and press TAB


<img src="images/1.jpg" alt="">     
<img src="images/2.jpg" alt="">     
<img src="images/3.jpg" alt="">

Copy the code

8. Enter Li *3>div.img>img[SRC =’images/$.jpg’] and press TAB


<li>
    <div class="img"><img src="images/1.jpg" alt=""></div>
</li>
<li>
    <div class="img"><img src="images/2.jpg" alt=""></div>
</li>
<li>
    <div class="img"><img src="images/3.jpg" alt=""></div>
</li>

Copy the code

9. Quickly generate code blocks for loops

<script> /* for loop: enter itar, then click TAB */ for (var I = 0; i < array.length; i++) { var obj = array[i]; } </script>Copy the code

10. Type div#tab1+div#tab2 and press TAB

+ : indicates parallel labels<div id="tab1"></div>
<div id="tab2"></div>

Copy the code

11. Introduce link, script tags


<! -- Add link, enter link, add TAB
<link rel="stylesheet" href="">
 
<! Link: CSS, TAB -->
<link rel="stylesheet" href="css/mycss.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


I hope this article can help you save time, efficiently complete the work and tasks, do a happy programmer.

communication

Welcome to my personal public communication, high-quality original articles will be pushed synchronously. Background reply welfare, you can receive welfare, you know ~

Your front canteen, remember to eat on time.