[TIL] prettier 알아보기

prettier 란?

prettier는 코드 문법을 자동으로 정렬해주는 확장 프로그램을 말한다. 개발자들 사이에서 서로 코드를 쓰는 문법이나 변수 규칙이 다르기 때문에 일관성 있는 코드를 짜기 위해 만들어진 프로그램이다.

prettier 설정법

prettier에는 두가지 설정법이 있다.

1) vs코드에서 확장프로그램 직접 다운로드

확장 프로그램에서 pre까지만 검색해도 바로 뜬다. install을 바로 해주고 파일로 돌아오면 밑에 활성화가 된다.

하지만 여기서 끝이 아니다. ctrl + s로 저장하게 되면 자동으로 prettier 문법이 적용되게끔 설정해줘야 하는데

노란색으로 동그라친 부분을 체크해주어야지 적용이 된다.

// setting.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
  // "editor.codeActionsOnSave": { "source.organizeImports": "explicit" }
}

아마 그러면 옆에 .vscode라는 파일에 setting.json이 자동으로 생성됐을 것이다. (주석 처리 해놓은 부분은 import를 불러올때 해당 값을 사용하고 있지 않으면 자동으로 삭제가 된다. 나에게는 불편한 기능이라 잠시 주석처리 해놓았다.)

2) 패키지 관리자로 다운받아서 관리

또는 개발자들은 주로 패키지 관리자로 다운받아서 이용한다.

// npm
npm install prettier --save-dev

// yarn
yarn add prettier

다운을 받고 prettierrc.js 라는 파일을 만들어 준다음 config 설정을 해준다. 탭위드는 탭을 눌렀을때 2칸씩(4칸은 너무 띄어져서 나중에 가독성이 떨어지므로 개발자들은 2칸을 주로 이용한다) 띄게 해주는거고 세미는 이제 자동으로 세미콜론을 붙여주는 설명이며, 싱클쿼터를 폴스로 해놓으면 ""문자열 부분에 쌍따옴표가 기본으로 적용이 된다.

/** @type {import("prettier").Config} */
const config = {
  tabWidth: 2,
  semi: true,
  singleQuote: false,
};

module.exports = config;

또한 json파일에 들어가서 스크립츠 부분 포멧터를 프리티어로 설정해 놓고

yarn format

터미널에 한번 더 설정을 포멧해주면 본인이 설정했던 프리티어 파일로 적용이 될 것이다.