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://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode Power Mode - Visual Studio Marketplace Extension for Visual Studio Code - Your code is powerful, unleash it! The extens..kyurasi.tistory.com

 

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

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 프론트앤드 개꿀 플러그인 모음비주얼스튜디오로 html, css, js 작성시 개굴인 플러그인들을 소개해보려 합니다 1. Material Icon Theme 이거 설치하면 파일을 확장자별로 정리해서 보여줍니다. js, ts, html, css 마다 다른 아이콘으로 보kyurasi.tistory.com

 

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

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 테마 추천1. vscode 왼쪽 파일목록에 아이콘으로 띄우기 이런걸 원한다면 설치 링크 : marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme Material Icon Theme - Visual Studio Marketplace Extensi..kyurasi.tistory.com