23
What are some awesome VSCode shortcuts most people don’t know about? (programming.dev)
submitted 1 year ago by silas@programming.dev to c/webdev@programming.dev
9 comments fedilink hide all child comments

I like CMD + D to select the next identical selection, OPT + DOWN/UP to move the selections down or up a line, SHIFT + OPT + DOWN/UP to duplicate the selection, and CMD + / to turn the line into a comment. How bout you?

you are viewing a single comment's thread
view the rest of the comments
[-] alr@programming.dev 2 points 1 year ago

This 100%. Part of my job is writing test cases, which can be extremely repetitive. With multiple cursors, I can frame out a dozen or more cases simultaneously and then go through and fill in the details. It significantly reduces typing time.

Also, if you work with any sort of XML or HTML, learn Emmett abbreviations and learn them properly. It will take you an hour to learn them properly, but they save so much time over typing tedious tags longhand. Being able to type html>(head>meta[charset=utf-8]/+title{My page})+body saves so much time over

<html>
    <head>
        <meta charset="utf-8"/>
        <title>My page</title>
    </head>
    <body>

    </body>
</html>
[-] spartanatreyu@programming.dev 3 points 1 year ago

Protip: when using emmet, just type ! once then press tab.

It will write out:


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

With the first tab stop at: device-width, the second tab stop at 1.0, the third at document, and the fourth indented between the body tags.

This means that if you want to create a new html page specifically with the title "My page" and end with the cursor in the body ready for your new hand written html or your next emmet abbreviation, you only need to press the following:

  1. !
  2. Tab (or whatever your emmet expansion shortcut is)
  3. Tab Tab (to move past the first and second tab stops
  4. My Title
  5. Tab (to move the cursor inside the body tag)

So it only takes 13 keystrokes (of which 8 keystrokes were typing out the title) to create the following:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>My Title</title>
</head>
<body>
	>|<-- cursor is here
</body>
</html>
this post was submitted on 13 Jul 2023
23 points (96.0% liked)

Web Development

3430 readers
1 users here now

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

Related Communities

Wormhole

Some webdev blogsNot sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

CreditsIcon base by Delapouite under CC BY 3.0 with modifications to add a gradient

founded 1 year ago
MODERATORS
snowe@programming.dev
erlingur@programming.dev
Ategon@programming.dev