Visual Studio Code Extension 설치

제일 신경쓰고 싶지 않은, 간단한 처리는 가급적 vscode extension을 이용하는게 편리하다.

설치 후에 어떻게 쓰는지 몰라서 하나하나 찾아보면서 그대로, 쓰면서 그래도 체감하기에 좋았던 것들만 공유.

설치를 위해서는 vsCode 실행, ctrl+shift+x

검색창에서 내용 검색해서 설치하면 왠만해서는 다 된다.

출처

15 VS Code Extensions to Save Your Time and Make You a Better Developer

A list of useful VS Code extensions for frontend developers

levelup.gitconnected.com

코드를 변환했을 때 적용되는걸 보여준다.

브라켓에서 실행할때 변경되는걸 하나하나 보여줬던것과 비슷하게, 저장하면 실시간으로 변경이 적용되는걸 볼 수 있고, 물론 조금씩 움직이는걸 하나하나 정밀하게 보기는 어려워도 (그래서 처음엔 크롬 익스텐션으로 사용해 맞춰갔고, 지금도 그게 편하기는 하다) 유용하다.

실행단축키는 Alt+l, o

Quokka.js will automatically compute the result you are typing and print the result in the IDE itself.

아직 js를 다루고 있지는 않으니까, 이건 나중에..

This spell checker will report some common spelling errors. This works well with camelCase code.

변수명을 적을때 줄기차게 경고하는건 불편하지만, 아주 가끔, 스펠링틀린거 교정해주는건 참 고맙다. 삭제.

그래도 일부러 변수명 적었을때 틀린걸 하나하나 지적해주는건 조금 귀찮기는 하다, 틀린 것들에 대해서는 경고, 주의 알림을 왼쪽 하단에 보여준다.

맥북의 경우 버전관리가 (기본적으로 git 에 이름과 이메일주소만 넣으면 된다.) 쉬운편이라면, 윈도우즈의경우는 Git 부터 설치하고 진행할 수 있다. 깃에서 뭘 했는지 살펴보기에 편리함을 부여해준다.

일단 코딩을 하다가 자리 바뀌고, 다른사람에게 보내서 공유하기 좀 뭐하다 싶을 때, beautify 처럼 쓰면 좋다.

자세한 설명은 생략. pylint와 유사하다. 나처럼 잘 모르는 사람이라면, 이런거 있는게 아무래도 유용하다. 설치하고, 사용해보기 좋다.

딱히 뭘 하는지 모르겠다... 싶었는데, 이 익스텐션의 장점은 왼쪽에 파일들의 아이콘 모양으로 파일 종류를 구별할 수 있도록 해주는 것부터 시작한다. 상당히 직관적이고, 찾아가기 편하다.

아직 딱히 적용하고 있지는 않은거,

매우 좋은거.. 적어도 javascript 코드에 익숙하지 않다라면, 해두는게 좋다. 아주 조금이나마 코딩에 시간을 아껴준다.

(익스텐션이 다 그런 이유에서 설치하기는 하지만.)

어떤 종류의 브라우져를 쓸지도 정할 수 있다. 크롬 외에 다른 브라우져 가능.

emmet 의 위치 찾아주는 것과 비슷하다. ./ 이후에는 왠만해서 다 나와준다.

이건 거의 순전히 멋으로 쓰고 있다. 멋이 있는건 아닌데, prettier 도 있고, beautify 도 있어서 사실 알아보고 하는건 어려운건 아닌데,

그래도 화면이 이뻐서 나쁠 건 없으니까..

각 태그의 open, close를 볼 수 있다 쉽게.

이건 추후에 어디 쓰려고 할지 모르니 깔아둔거.

코딩을 이어서 진행하게 되면, 써주는게 좋다. 혼자서 한두시간만에 끝나는거라면 몰라도, 계속 이어서 진행한다면 있어서 나쁠건 없다랄까.

css에서 색상을 집어넣으면 왼쪽에 색상이 튀어나온다. 딱히 그렇게 눈에 띄는건 아니지만, 이어서 색깔을 찾아다닐 수고를 덜어준다.

Jaehyunz Log