Prettier란?

Prettier는 소스 코드를 자동으로 성형 해주는 도구.
소스를 저장하면 자동으로 성형 해주기 때문에 탭의 크기와 위치,
또한 세미콜론이나 싱글 쿼테이션 등도 성형해준다.

VScode에 설치

1. VScode의 확장 (확장 기능) 탭에서 검색 양식에서 Prettier를 검색하고 설치 버튼을 클릭합니다.


2. 왼쪽 하단의 톱니바퀴 버튼을 클릭합니다. 설정을 클릭하고 설정 탭의 검색 양식에서 save를 입력하고 Format On Save를 선택합니다.
이것을 체크하는 것으로, 보존시에 자동으로 포맷 해 줍니다.


3. 검색 양식에서 Default Formatter로 검색하고 풀다운에서 esbenp.prettier-vscode를 선택합니다. 이렇게하면 다른 포맷터보다 Prettier가 우선합니다.

4. Prettier 설정은 확장 (확장 기능) 탭의 Prettier 확장 기능 설정에서 변경할 수 있습니다.


5. 또한 프로젝트 바로 아래에 .prettierrc 파일을 작성하여 Prettier 설정을 파일로 관리할 수 있습니다. 여러 사람이 형식을 맞추는 경우 사용하는 것이 좋습니다.

Cloud9에 설치

1. 터미널에서 다음 명령 실행
npm install --global prettier

2. 포맷되어 있는지 확인
prettier --check test.js

3. 파일을 지정하여 포맷
npx prettier --write test.js

4. 여기도 프로젝트 바로 아래에 .prettierrc 파일을 작성하여 설정을 파일로 관리할 수 있습니다.


5. 왼쪽 상단 Edit 탭의 CodeFormattion에서 Formattiong Preferences를 엽니다.


Custom Code Formatter 양식에 서식을 지정하는 명령을 입력하면 Cloud9 편집기에서 저장할 때 자동으로 포맷됩니다.