[Prettier] 코드 포맷을 도와주는 Prettier 설치부터 설정 파일 작성까지 알아보자! (+ ESLint, stylelint 연동)

개발을 할 때 필수로 꼽히는 Prettier 설정에 대해 정리해보자! Prettier는 코드 포맷에 도움을 줘서 코드를 일관성있게 작성할 수 있게 도와준다.

Prettier 설치

npm install -D -E prettier

.prettierrc 설정 파일 작성

{
  "printWidth": 80,
  "useTabs": false,
  "tabWidth": 2
}

• 기본적인 옵션인 printWidth (한 줄에 작성할 수 있는 문자열 최대 길이), useTabs (들여쓰기 시 Tab 사용 여부), tabWidth (들여쓰기 너비) 설정에 대해 작성해주었다.

CLI 명령어로 실행해보기

prettier --print-width 100 --check --write

• 위와 같이 명령어를 직접 터미널에 입력해서 설정을 적용 시키고 파일을 수정하게끔 해줄 수도 있다. 하지만 잘 사용하지 않는 방법이다.

규칙을 위반해도 무시할 파일 설정

// .prettierignore

build
node_modules

// prettier-ignore
const getNum = () => {
	return 1;
}

ESLint와 Prettier 연동

• 거의 필수로 사용하는 ESLint에도 Prettier와 유사하게 코드 포맷 기능이 존재한다.

• 두 도구를 함께 사용하면 비슷한 규칙들이 충돌할 가능성이 있고, 그로 인해 제대로 적용이 안될 수도 있기 때문에 따로 작업이 필요하다.

패키지 설치

npm install -D eslint-config-prettier

• 해당 패키지를 이용하면 충돌 가능성이 있는 ESLint 규칙들을 설정에서 제외해준다.

npm install -D eslint-plugin-prettier

• 해당 패키지를 사용하면 코드 포맷 관련 규칙 위반 사항에 대해 ESLint 가 에러를 도출해준다.

• ESLint 설정에서는 코드 포맷 관련 에러를 확인하지 않기 때문에 해당 패키지가 필요하다.

ESLint 설정 파일에 적용

// .eslintrc.js
module.exports = {
  plugins: ["prettier"],
  extends: ["eslint:recomended", "plugin:prettier/recommended"],
}

• 위 설정을 마친 후 파일에 대해 검증을 실행해보면, 코드 포맷 관련 규칙 위반도 에러로 검출해주는 것을 확인할 수 있을 것이다.

stylelint와 Prettier 연동

• stylelint 역시 코드 포맷 기능이 존재해서 두 개를 함께 쓰고 있다면 연동 작업이 필요하다.

패키지 설치

npm install -D stylelint-config-prettier stylelint-prettier

stylelint 설정 파일에 적용

// .stylelintrc.js

module.exports = {
  plugins : ["stylelint-prettier"],
  extends: ["stylelint-config-standard", "stylelint-config-prettier"],
  rules: {
    "prettier/prettier": true,
  },
};

• 위와 같이 설치한 패키지들을 설정 파일에 적용해주면 끝이다~!~

지금까지 개발 시 거의 필수로 사용되는 ESLint, Prettier, 그리고 stylelint에 대해 알아보았다. 어떻게 설치하고, 어떻게 설정 파일을 작성하는지 알고 있는 것이 중요할 것이다!