vscode erb파일 자동완성 설정하기

새로운 언어로 개발을 시작하려고 하면 아무래도 손에 많이 익었고, 코딩 속도를 높여줄 vscode 의 자동완성 기능을 찾게 됩니다.

저는 일단 가독성을 위해 자동 줄맞춤까지는 하지 않습니다.

 

거두절미하고, ruby 에서 .rb 파일은 루비 문법을 따라가고, .erb 파일은 html 문법을 따라갑니다.

<% %> 태그는 루비 문을 '실행' 시킬 수 있고

<%= %> 태그는 루비 문을 '출력'시킬 수 있다.

 

기본적으로 .erb 파일은 html의 문법을 따라가기에

<input>

<form>

<a href> 등등 태그를 사용하는데, 일반적으로 html 자동완성을 사용하였더라도, 자동완성 기능은 여기서 먹히지 않아요. 그렇다면 바로 설정으로 이동하시죠

 

1. 비주얼스튜디오를 켜고 설정으로 이동합니다

2. settings.json 을 엽니다

 

3. 다음과 같은 설정을 추가해줍니다

"emmet.includeLanguages": {"erb": "html", "ruby": "html"}

저는 맨 마지막줄에 추가했어요.

이러면 .erb 파일에서도 자동완성을 사용할 수 있습니다

 

다른 vscode 비주얼스튜디오 사용에 용이한 설정들을 원하신다면 제가 포스팅한 링크를 두겠습니다.

 

비주얼스튜디오 타이핑 효과 넣기

https://kyurasi.tistory.com/entry/vscode-powermode-%EC%9E%85%EB%A0%A5-%ED%9A%A8%EA%B3%BC%EC%A3%BC%EA%B8%B0?category=1143739 

vscode powermode 입력 효과주기

 

비주얼스튜디오 도움이 되는 플러그인, 설정

https://kyurasi.tistory.com/entry/vscode-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%95%A4%EB%93%9C-%EA%B0%9C%EA%BF%80-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EB%AA%A8%EC%9D%8C

vscode 프론트앤드 개꿀 플러그인 모음

 

비주얼스튜디오 테마 및 아이콘

https://kyurasi.tistory.com/entry/%EB%B9%84%EC%A3%BC%EC%96%BC%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4-visual-studio-vscode-%ED%85%8C%EB%A7%88-%EC%B6%94%EC%B2%9C

비주얼스튜디오 visual studio vscode 테마 추천