VS 코드 및 emmet에 대한 바로 가기.
5487 단어 emmetvscodeprogrammingbeginners
이전에는 단축키를 많이 사용하지 않았지만 단축키를 사용하면 시간을 절약하고 코드를 더 빨리 작성할 수 있습니다.
VS 코드의 Mac OS용 바로 가기.
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
⌘(명령어)+N: 새 파일
⌘(명령어)+S: 파일 저장
줄 아래/위로 이동:
옵션(Alt) + 아래쪽
옵션(Alt) + 위로
줄 아래/위로 복사:
Shift+Opt+Down
Shift+Opt+Up
단어로 이동:
Opt+오른쪽
Opt+왼쪽
Opt(Alt) + 클릭: 다중 커서 추가
⌘(command) + D: 다음 일치 항목 찾기에 선택 항목 추가
스니펫 추가
또한 VS 코드에 스니펫을 추가하는 방법도 배웠습니다.


이것이 내가 한국어 기반 페이지에 포함시킨 것입니다.
{
// 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 템플릿"
}
}
이제 이것은 htmlko로 저장되며 !(html) 대신 htmlko를 입력하여 내 VS 코드에 이 스니펫을 가져올 수 있습니다.
웹용 VS 코드!
이제 https://vscode.dev/의 VS 코드를 다운로드하지 않고도 사용할 수 있습니다! 상당히 새롭다고 들었습니다. git 저장소에 있는 경우 github.com 대신 > github.dev로 이동합니다.
ig. https://github.dev/daaahailey/repository_name
또는 단순히 .(점)을 입력하면 VS 코드 웹 버전으로 이동합니다.
여기에서 웹용 VS 코드에 대해 자세히 알아보십시오. https://code.visualstudio.com/docs/editor/vscode-web
Emmet 치트 시트
https://docs.emmet.io/cheat-sheet/
어린이: >
형제자매: +
그룹화: ()
곱셈: *
항목 번호 매기기: $
ID 및 CLASS 속성 : #(id), .(class)
맞춤 속성:
ig. [a='값1' b="값2"]
<div a="value1" b="value2"></div>
텍스트: {}
올라가기: ^
div+div>p>스팬+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>
Reference
이 문제에 관하여(VS 코드 및 emmet에 대한 바로 가기.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/daaahailey/shortcuts-for-vs-code-and-emmet-1o5d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)