I've learnt more about using emmet and things that would be useful when using Visual Studio Code.
I haven't used much of shortcuts before but using shortcuts will save my time and help me to write code faster.
Shortcuts for Mac OS in VS code.
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
- Some shortcuts I learnt today
⌘(command)+N: New file
⌘(command)+S: Save File
Move Line Down/Up:
Opt(Alt) + Down
Opt(Alt) + Up
Copy Line Down/Up:
Shift+Opt+Down
Shift+Opt+Up
Move by Word:
Opt+Right
Opt+Left
Opt(Alt) + Click: Adding multiple cursors
⌘(command) + D: Add Selection To Next Find Match
Adding Snippets
Also, I've learnt how to add snippets in VS code.
Click the setting button > then click User Snippets
Type html on the search box. Then add snippets here in the html.json file.
This is what I included for the pages based in Korean language.
{
// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
// * This part is what I added.
"Print to console": {
"prefix": "htmlko",
"body": [
"<!DOCTYPE html>",
"<html lang=\"ko\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <title>$1</title>",
"</head>",
"<body>",
" $2",
"</body>",
"</html>"
],
"description": "한국어 페이지용 html 템플릿"
}
}
Now this will be stored as htmlko and I can bring this snippet in my VS code by typing htmlko instead of !(html).
VS code for the Web!
You can also use VS code from https://vscode.dev/ now without downloading it! I heard it's quite new. If you are on your git repository, instead of github.com, go to > github.dev
ig. https://github.dev/daaahailey/repository_name
or you can simply type .(dot) then this will take you to the VS code web version.
Find more about VS code for the web here: https://code.visualstudio.com/docs/editor/vscode-web
Emmet cheat sheet
https://docs.emmet.io/cheat-sheet/
Child: >
Sibling: +
Grouping: ()
Multiplication: *
Item numbering: $
ID and CLASS attributes : #(id), .(class)
Custom attributes:
ig. [a='value1' b="value2"]
<div a="value1" b="value2"></div>
Text: {}
Climb-up: ^
div+div>p>span+em^bq
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
div+div>p>span+em^^bq
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
Top comments (0)