웹개발

*.ejs파일 vscode에서 html 주석 단축키 만들기, 현재 날짜시간 입력

미스터몽키 2017. 11. 20. 18:03


vscode 에서 


줄단위 주석 단축키 "ctrl + /"   


블록단위 주석 "shift+alt + a" 


는 파일 확장자에 따라 적절하게 변환된다.


*.js 파일에서  "//"  와 "/* ~ */"


*.css 파일에서 "/* ~ */"


*.html 파일에서는 

태그를 주석처리 할때는 "<!-- ~ -->"

style 내에서는 "/* ~ */"

script 내에서는  "//"  와 "/* ~ */"


그런데 *.ejs 파일에서는 태그 주석처리가 되지 않고 모두 "//"  와 "/* ~ */"  로 주석처리 된다.


태그주석을 단축키로 설정하려면 snippet 을 추가하고 단축키를 정의하고 해야 가능하다.


먼저 ejs.json 파일을 열고 ( "파일>기본 설정>사용자 코드 조각>ejs")


다음을 추가한다.

1
2
3
4
5
6
7
8
9
"my_html_comment": {
    "prefix""hb",
    "body": [
        "<!--%0",
        "$TM_SELECTED_TEXT",
        "-->"
    ],
    "description""html 주석단축키로 사용하려고, my_html_comment로 단축키와 연결됨"
}
cs


${TM_SELECTED_TEXT}  는 선택영역을 의미한다.

%0 은 최종 커서위치를 의미한다.


즉 선택영역의 위줄 아래 줄에 html 주석태그를 삽입한다는 의미이다.


그리고 keybindings.json 파일을 열고 ("파일>기본 설정>바로 가기 키>고급 사용자 지정의 경우 ~ keybindings.json ")

좌우 두개의 창이 열리는데 오른쪽이 사용자 정의 영역이다.

다음을 추가한다.

1
2
3
4
5
    {
        "key""win+/",
        "command""editor.action.insertSnippet",
        "args": { "name""my_html_comment" }
    }    
cs

vscode를 재실행하고 *.ejs 파일에서 영역을 선택하고 윈도우키+/ 하면 html 주석이 처리된다.


-------------------------------------------------------------------------------



현재 날짜 시간 입력


vscode에서 확장에서 "Insert Date String" 설치하고

단축키 Ctrl+Shift+I  입력하면 현재 커서에 날짜와 시간이 입력된다.