👩‍🎨 VsCode 유용한 플러그인

VsCode 플러그인 설치

1. 코드 정렬 플러그인

Prettier 를 설치하고,

Ctrl + , 를 눌러서 설정에 들어간 후, format on save 를 해준다.

강의에선Shift + S를 누르면 정렬된다구 했는데... 적용이 안되었다. Default Formatter를 Prettier로 바꿔야 한다고 한다.

2. 아이콘 플러그인

Material Icon Theme 을 설치한 후, 위에 파일 아이콘 테마 선택에서 Material Icon Theme 을 선택해주면,

더 예쁘게 바뀐 아이콘을 볼 수 있다.

3. 오류 메시지 플러그인

Error Lens 를 설치하면

에러에 대한 설명을 해주는 설정이 가능하다.

4. 라이브 서버 플러그인

Live Server 를 설치해준 후,

index.html 파일에서 Ctrl + Shift + P를 눌러서 상단에 Live Server: Open with Live Server 를 선택해주면,

브라우저에 우리가 만든 index.html 파일을 열 수가 있다.

5. react 사용시 eslint 플러그인

우리가 작성한 코드를 정적으로 검사해서 오류가 발생할 만한 코드가 있으면 경고를 띄워주는 프로그램이다.

파일을 들어가보면 enslint 파일이 생겼음을 확인할 수 있다.

✍️ 느낀점

개발 프로젝트에서 미션 트랙을 했을 때는 이러한 기능들을 몰랐었는데, 요즘 리액트 강의를 듣다 보니까 이러한 유용한 기능들이 있다는 것을 알게 되었다. VsCode에 설치하니 전보다 훨씬 편하다는 것을 느꼈고 공유하고 싶어 블로그 글의 주제로 선정하였다.