template를 사용하면 코드 작성 시간을 줄일 수 있다.
🔻만드는 순서
1. 원하는 스타일의 코드 작성
본인의 원하는 스타일로 파일을 하나 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<!-- 파일 이름 -->
<script src="../asset/js/jquery-1.12.4.js"></script>
<script>
</script>
</body>
</html>
설정 - 사용자 코드 조각
HTML 검색
파일 내에 추가 작성
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
추가 완료된 전체 코드
{
// 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"
// }
"수업용 HTML": {
"prefix": "!!",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <title>Document</title>",
"",
" <style>",
"",
"",
" </style>",
"",
"</head>",
"<body>",
"",
" <script src=\"../asset/js/jquery-1.12.4.js\"></script>",
"",
"",
" <script>",
"",
"",
"",
" </script>",
"",
"</body>",
"</html>",
],
"description": "Log output to console"
}
}따옴표가 있는 것은 '\' 로 이스케이프해야한다.
단축키로 작성
prefix에 등록한 단축키로 파일을 작성한다.
'TOOL' 카테고리의 다른 글
| [eclipes] 템플릿 만들기 (0) | 2023.10.17 |
|---|---|
| [eclipse] 자바스크립트 자동완성 : tern 플러그인 설치(+JSDT 버그) (0) | 2023.10.17 |
| [eclipse] 코드 단축키 : Emmet 설치하기 (0) | 2023.09.25 |
| [VSC] 설치해놓으면 편리한 확장팩 (0) | 2023.09.23 |
| [VSC] visual studio code 설치 및 환경설정 (0) | 2023.09.23 |
