Webpack 이해하기 (6) - Prettier 코드 포매터 적용

6. Prettier 적용 ( code beautifier )

Prettier를 통해 코드 서식 지정 스타일 가이드를 적용할 수 있다.

[1] VScode Prettier extension 설치

[2] Prettier관련 Dev 디펜던시 설치

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

prettier

• prettier 코어 라이브러리

eslint-config-pretteir

• prettier와 충돌할 수 있는 eslint rule을 disable 시켜줌

eslint-plugin-prettier

• prettier를 eslint rule에 맞게 동작시키는 플러그인

[3] root디렉토리 .prettierrc.js 설정 파일 추가

// .prettierrc.js 파일은 nodejs의 모듈시스템을 따른다.
module.exports = {
  semi: false, // 코드 끝에 세미콜론 자동추가 X
  trailingComma: 'es5', // 유효한 위치에만 후행 콤마 추가 
  singleQuote: true,  // JSX외부에서 문자열 작성시 홑따옴표'' 사용
  jsxSingleQuote: false, // jsx내부에서 문자열에 이중따옴표"" 사용 
  printWidth: 80, // 한줄 최대 길이 80자 
  tabWidth: 2, // 탭 너비를 2개의 공백으로
  endOfLine: 'auto' // 줄바꿈 문자에 대해 파일시스템 기본 설정으로 사용
}

+@) .prettierrc 형식과 .prettierrc.js 형식의 파일은 무엇이 다를까 ?

1. 문법상 차이

• .prettierrc : JSON객체 형태로 작성
• .prettierrc.js : Nodejs module시스템을 따르므로 module.exports = {설정객체} 형태로 작성

2. 확장성 측면 

.prettierrc.js 파일과 달리, .prettierrc는 보다 단순한 설정 구성을 위한 것이며, 복잡한 로직이나 조건부 설정이 필요하지 않은 경우 주로 사용됩니다.

[4] .eslintrc.js 파일 수정

extends: [
	//plugin:react/recommended',
    //'plugin:react-hooks/recommended',
    //'plugin:@typescript-eslint/recommended',
    //'plugin:import/errors',
    //'plugin:import/warnings',
    //'plugin:import/typescript',
    //'plugin:jsx-a11y/recommended',
    //'plugin:eslint-comments/recommended',
    //'prettier/@typescript-eslint',
    //'plugin:prettier/recommended',
    //아래의 프로퍼티를 추가 
	'prettier', 
	 'plugin:prettier',
    ]

 

 

[5] package.json scripts 옵션 추가

“format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",

• yarn format 옵션 실행시 위 경로의 모든 지정 파일에 대해 format을 자동 수정 진행

+@ ) VSCode prettier 포매팅 단축 명령어와 차이점은?

• MacOs 기준 shift+option+f 명령어는 현재 열려있는 개별 파일에 대해서만 포매팅을 수행합니다.
• 반면 yarn format 커맨드는 지정한 모든 파일에 대해 포매팅을 수행합니다.

[6] VScode Setting 환경설정 추가

Format On Save : True

• Format On save 를 True로 체크하면 저장할 때마다 해당 파일의 포매팅이 자동으로 실행

Cf.) 만약 Prettier 포매팅이 적용되지 않는다면 VScode 명령어 팔레트를 열어 Foramt Document 옵션에서 코드 포매터를 Prettier로 설정해줌으로써 해결할 수 있다.