[Prettier] VSCode에서 Prettier 설정하기

안녕하세요.

이번에는 VSCode에서 Prettier을 설정하는 방법에 대하여 알아보겠습니다.

 

실습환경

- React - create-react-app

 

1. Formatting

• Code의 스타일을 통일시켜 준다.
• 문법이 아닌 코드의 스타일을 통일시켜 줘서 가독성을 높이고 버그를 예방한다.
• Prettier를 사용하여 관리할 수 있다.

 

2. React 설치

npx create-react-app my-app

 

3. Prettier

• 사용자 간의 코드 스타일을 맞춰주는 기능을 한다.

 

4. Prettier설치

• -save : 패키지 모듈에 추가
• --save-dev : 개발할 때만 사용, 빌드 & 배포 시 패키지 포함 X

cd my-app
npm install --save-dev prettier

 

설치 후 package.json 파일에 목록 추가되는 것을 볼 수 있습니다.

 

 

5. VsCode 확장 프로그램 설치

• Prettier - Code formatter v9.10.3

 

6. Prettier 설정

• my-app/. prettierrc 파일 생성 (자동으로 JSON 확장자로 설정됨)

 

7. Prettier 내용 작성

• semi => ; (세미콜론) 사용 (; 생략 시 자동 추가)
• singleQuote => ' (따옴표) 사용 (”(쌍따옴표) 사용 시 ‘(따옴표)로 자동 변경)

{
    "semi": true,
    "singleQuote": true
}

 

8. VSCode 설정

• my-app 폴더 내부에 .vscode 폴더를 생성합니다.
• .vscode 폴더에 settings.json 파일 생성합니다.
• my-app/.vscode/settings.json

 

9. settings.json 파일에 내용 작성

• 만약 복사해서 작성하시는 경우 제일 밑의 "esbenp.prettier-vscode"를 지운 후에 직접 입력하시기 바랍니다.
• 복사해서 바로 사용하는 경우 적용이 안 되는 에러가 있습니다.

{
    "[javascript]": {
        "editor.maxTokenizationLineLength": 2500,
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

 

10 Prettier 테스트

• my-app 폴더에 main.js 파일을 생성합니다.
• main.js
• console.log("Hello") 까지만 작성 후 파일을 저장했을 때 세미콜론이 자동으로 생기는지, 따옴표로 바뀌는지를 확인합니다.

console.log("Hello")
// 까지 작성 후 저장


console.log('Hello');
// 저장 후 쌍따옴표가 따옴표로 바뀌는 현상 + 세미콜론이 자동으로 생기는지 테스트

 

실행 화면

 

 

11. 적용 안 되는 오류 원인

• react/my-app 폴더 구성인 경우
• VSCode ⇒ File ⇒ Open에서 my-app을 선택한다.
• 폴더가 여러 개가 들어있는 상단 폴더를 여는 경우 VSCode에서 어떤 파일에 프리티어를 적용해야 하는지 헷갈려서 적용이 안 되는 오류가 있으니, 실제 작성하고 있는 최상위 폴더만 Open 합니다.

 

 

12. 수동 설정 방법

• 해당 폴더가 아닌 전체 적용이 되며, 다른 폴더에도 영향을 주므로 주의가 필요합니다.
• 다른 폴더에는 설정 값으로 지정되지는 않지만, Prettier 기본 설정 값을 따라가는 것으로 판단됩니다.

 

• File - Preferences - Settings

 

• 검색 창 : format
• Editor: Format On Save 체크

 

• 검색 창 : Default format
• Editor: Default Formatter => Prettier - Code formatter 선택

 

세팅 후에는 VS Code를 재시작합니다.

 

 

이상으로 VS Code에서 Prettier 설정하는 방법에 대하여 알아보았습니다.

감사합니다.