[비주얼 스튜디오 코드(Visual Studio Code)] js 파일에 html 사용하기 - 회복맨 블로그

[비주얼 스튜디오 코드(Visual Studio Code)] js 파일에 html 사용하기

에디터/비주얼 스튜디오 코드(Visual Studio Code) 2020. 8. 6. 02:54

이 글은 버추얼돔 같은 그런건 아니고 그냥 마크업 형태가 있는 JS를 사용하고 싶어서 작성하게 되었습니다.


전 직장에서 제 사수분이 이런 설정을 사용하여 작업을 했었는데 저는 굉장히 신선한 느낌을 받았었기에 포스팅 작성합니다.


우선 원하는 형태는 대략 이런 느낌입니다.



파일명: markup.html.js


1
2
3
4
5
6
7
const markup = `
<div class="wrap">
  <div class="content1"></div>
  <div class="content2"></div>
  <div class="content3"></div>
</div>
`;



 이걸 vscode 에서 작성 한다면 html 태그 emmet 기능을 사용 못하기 때문에 일일히 손으로 타이핑을 해야하는 상황이 오게 됩니다.


JS 에서 마크업 표현이 가능했으면 좋을꺼 같았습니다.

다만, '특정 이름'을 가지고 있는 파일에 대해서만 JS 에서 마크업 표현이 되었으면 합니다.


위에 굳이 파일명을 적어논 이유가 있습니다.

바로 그 '특정 이름' 을 가지고 있는 JS 파일이기 때문입니다.


기준으로 삼을 파일 이름은

XXX.html.js

입니다.

붉은색으로 강조를 했는데 알아보셨으면 좋겠네요 :D

XXX 바로 뒤에 붙는 점(.) 까지 포함해서 입니다.


우선 vscode 를 키고 아래 스샷처럼 따라해 주세요.


파일 -> 기본설정 -> 설정(단축키: 컨트롤 + 콤마)







설정 검색창에

associations

입력 후 항목 추가 클릭







항목: *.html.js

값: html

입력 후 확인

(*.html.js 는 모든파일명.html.js 입니다.)







항목이 제대로 추가 되었는지 확인







이렇게 되면 js 파일인데도 html 의 emmet 를 사용할 수 있게 됩니다.

파일 이름은 반드시 XXX.html.js 여야 이런게 가능 합니다. 


댓글 0