🛠 리액트 개발 할 때 VS Code 유용한 확장 프로그램 ESLint / Prettier

ESLint

- 자바스크립트 문법 및 코드 스타일을 검사해 주는 도구이다.

에디터에 뜬 경고처럼 초록색 줄이 그어진 코드는 고치기 싫다면 무시해도 되지만 빨간줄은 반드시 고쳐야 한다. 이런 오류는 고치지 않으면 페이지가 브라우저에 나타나지 않는 치명적인 오류이므로 꼭 고쳐줘야 한다.

 

Reactjs Code Snippets

- (제작자가 charalampos karypidis)인 것으로 설치하기 

리액트 컴포넌트 및 라이프사이클 함수를 작성할 때 단축 단어를 사용하여 간편하게 코드를 자동으로 생성해 낼 수 있는 코드 스니펫 모음이다.

 

Prettier-Code formatter

- 코드 스타일을 자동으로 정리해 주는 도구. JSX를 작성 시 코드의 가독성을 위해 들여쓰기를 사용한다. 들여쓰기가 제대로 되어 있지 않은 코드는 가독성이 매우 떨어지기 때문이다. 혹여나 다른 포맷도구 (Beautify) 설치하면 충돌 발생할 수 있으니 조심하기. Prettier를 사용하여 자동 코드 정리를 하면 코드가 제대로 정렬되고, 세미콜론이 빠진 곳은 자동 추가되고 기존에 사용하던 작은 따옴표는 모두 큰 따옴표로 바뀌었을 것이다. 이런 부분은 협업하는 과정에서 정하는 규칙이다.

 

그리고 Prettier의 장점은 이러한 스타일을 쉽게 커스터마이징 해준다는 점도 있다. 현재 열려있는 프로젝트의 루트 디렉토리에서 .prettierrc라는 파일을 생성 한 후 이런 내용을 적어보자.

{
  "printWidth": 120, //글자수
  "tabWidth": 2, //탭 칸
  "singleQuote": true,//''
  "trailingComma": "all",//, 찍어주기
  "semi": true//;세미콜론
  "useTabs" : false,//공백 대신 탭으로
}

이것은 파일에서 들여쓰기 할 때 탭 대신 공백을 두 칸 사용. 그리고 큰따옴표 대신 작은 따옴표. 세미콜론은 언제나 붙이도록 설정했다.

 

VS Code 언어 한국어로 설정하기

Korean Language Pack for Visual Studio Code를 설치한다.

 

Reactjs Code Snippet

VS Code에서 위 확장 프로그램을 설치했다면 컴포넌트 코드를 간편하고 빠르게 생성할 수 있다.