VScode 플러그인🔌

rain98·2020년 12월 11일

VSCode 익스텐션 VSCode 플러그인 vscode

VSCode

목록 보기

2/2

Front-End 개발 시 유용한 플러그인

가끔 코딩 공부를 하다보면 집에서만 할 수는 없다.
다른 장소로 이동해서 노트북으로 할 수 있는거고 친구집에 갈때 있어서 가서 할때도 있고 어쩌다 포맷해야하는 순간 또 설정을 해줘야한다.😒

그렇다고 플러그인 안깔고 코딩을 하자기엔 여간 귀찮은 일이 아니다.😂
코딩의 질을 높이기 위해 내가 적어놓고 보고 설치하려고 적는다.

어떻게 설치 하는데?

VS Code를 열고 왼쪽 상단 네번째 테트리스 맞추고싶은 모양 클릭하면 플러그인 검색이 가능하다검색해서 원하는 플러그인을 찾아서 설치하면 그만이다.

편리성 기능🔨

Auto Close Tag

시작태그를 열면 종료태그를 닫아줘야하는데 이친구는 그걸 자동으로 닫아주는 아주
편리한 기능이다.

Auto Rename Tag

시작태그를 수정하면 종료태그를 같이 바꿔주는 기능
html 수정할때 도움이 된다.

HTML Snippets

효율적인 태그 작성을 도와주는 기능

div --> <div></div>
doc --> <!DOCTYPE html>
a   -->  <a href=""></a>
이와 같이 탭 키를 누르면 자동완성이 되어서 편리하게 코드 작성이 가능하다.

Autoprefixer

CSS 구문을 분석해 vendor-prefixed CSS 속성을 자동으로 추가해주는 기능

참고 자료 : https://jintaewoo.tistory.com/6

Live Server

로컬서버를 만들어 브라우저에서 실행되고 저장하면 바로 적용을 보여주는 필수 기능 설치하고 나면 오른쪽 하단에 버튼을 클릭하면 바로바로 구현이 가능하다

CSS peek

css에서 어.. 이확장자 어디에있지? 했을때 쉽게 찾을수 있다.

시각성 기능✨

Bracket Pair Colorizer

괄호에 색을 넣어줘서 어떤게 닫는건지 어떤게 여는건지 확인할 수 쉽다.

Indent-Rainbow

들여쓰기에 색이 들어가 있어 몇 칸이 들여쓰기가 되어있는지 쉽게 확인이 가능하다

Material Theme

배경색을 바꿔주는 플러그인
눈이 편안해야 오래 코딩을 할 수 있다.

prettier - code formatter

조금더 가독성 있는 코딩을 할 수 있게 설정 할 수 있다.

플러그인을 깔고 설정을 해줘야 하는데
내가 주로 사용하는 설정 방법은 두가지

1.직접 설정에 들어가서 설정을 하거나
윈도우 : ctrl + , 맥 : cmd + , 으로 설정을 들어 갈 수 있다.

2.열려 있는 편집기에 새파일(.prettierrc)을 생성해서 설정값을 직접 맞춰주거나
{
"tabWidth": 4
"printWidth": 80
"useTabs":false
"endOfLine": "lf"
"singleQuote": true
"semi": flase
}
필자는 이렇게 맞춰놓고 사용을한다.