Visual Studio Code를 사용해보다. 에 처음 글을 올린 후 사용을 안하다가  약 2년이 흐른 후 다시 사용을 해보려고 합니다.

기존에보다 기능이 업데이트 되어있다고 들어서 사용해보기로 했습니다.

1. VS Code 설치

[contentcards url=”https://code.visualstudio.com/” target=”_blank”]

위의 사이트에 접속해서 본인에 맞는 OS맞게 다운로드 하시면됩니다.

vscode 다운로드 버튼

화살표를 누르면 다른 OS도 다운로드 받을 수 있습니다.

2. 마켓에서 확장팩 다운받기

2-1. Korean Language Pack for Visual Studio Code

[contentcards url=”https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ko” target=”_blank”]

이 확장팩은 한국인들이라면 거의 필수 확장팩이라고 볼 수 있습니다. 에디터 대부분이 한국어로 번역이 되어 나옵니다.
확장팩을 설치 후 vscode를 재실행하면 번역되신 걸 볼 수 있습니다.

Korean Language Pack for Visual Studio Code 적용화면

2-2. HTML Snippets

[contentcards url=”https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets” target=”_blank”]

사용방법은 emmet과 동일하고 emmet과 비슷하지만 다른면이 있습니다.
태그의 설명도 추가되어 사용할 때 볼 수 있습니다.

div –> <div></div>

doc –> <!DOCTYPE html>

a –> <a href=""></a>

2-3. IntelliSense CSS,SCSS class names in HTML

https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion

IntelliSense CSS,SCSS class names in HTML 화면
IntelliSense CSS,SCSS class names in HTML 화면

Supported Language Modes

  • HTML
  • Razor
  • PHP
  • Laravel (Blade)
  • JavaScript
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Vue (.vue) [requires octref.vetur]
  • Twig
  • Slim
  • Latte
  • Markdown (.md)
  • Embedded Ruby (.html.erb) [requires rebornix.Ruby]
  • Handlebars
  • EJS (.ejs)

2-3. IntelliSense for CSS class names in HTML

[contentcards url=”https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion” target=”_blank”]

Supported Language Modes

  • HTML
  • Razor
  • PHP
  • Laravel (Blade)
  • JavaScript
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Vue (.vue) [requires octref.vetur]
  • Twig
  • Slim
  • Latte
  • Markdown (.md)
  • Embedded Ruby (.html.erb) [requires rebornix.Ruby]
  • Handlebars
  • EJS (.ejs)
  • Django template (django-html)

2-4. GitLens — Git supercharged

[contentcards url=”https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens” target=”_blank”]
Git Lens 마켓에 있는 스크린 화면

깃 사용자라면 깃 렌즈를 사용하는 것이 많이 도움이 될 것입니다.
이 마켓을 사용함으로써 언제 수정했는데 코드에서 작성자를 시각화했기때문에 편한 기능중에 하나입니다.

2-5. Material Icon Theme

[contentcards url=”https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme” target=”_blank”]

코드편집을 하다보면 아이콘들도 매우 중요하다고 생각합니다.
Material Icon Theme의 아이콘들은 예쁘면서 직관적이여서 바로 바로 알 수 있습니다.

File icons

Material Icon Theme – File icons

Folder icons

Material Icon Theme – Folder icons

사용자가 원하는 아이콘이 아니면 수정하고 바꿀 수 있습니다.

사용한 가능한 언어는 https://code.visualstudio.com/docs/languages/identifiers#_known-language-identifiers

위의 링크에서 볼 수 있습니다.
이상 기본적이면서 추천하는 확장팩을 안내해드렸습니다.

vscode 및 확장팩의 사용방법은 차후에 다시 올리도록 할게요.

읽어주셔서 감사합니다!