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 코드에 스니펫을 추가하는 방법도 배웠습니다.
설정 버튼을 클릭한 다음 사용자 스니펫을 클릭합니다.
검색 상자에 html을 입력합니다. 그런 다음 html.json 파일에 여기에 스니펫을 추가합니다.이것이 내가 한국어 기반 페이지에 포함시킨 것입니다.
{
// 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.)
좋은 웹페이지 즐겨찾기
