[JS] Prettier란? Prettier Configuration파일 세팅하기

프리티어는 코드 포맷의 통일성을 유지시켜주는 javascript라이브러리이다. 우리 팀에서도 자유분방한 팀원들과(?)의 협업을 위해 코드 포맷 통일성 유지시켜야 해서 prettier를 쓰고 있다.

 

제멋대로 코딩하고 prettier로 세팅해서 commit하면 좋다.

 

intelliJ에서 세팅하기

2023.01.20 - [javascript] - [JS] Prettier란? Prettier Configuration파일 세팅하기

[JS] Prettier란? Prettier Configuration파일 세팅하기

 

install

프로젝트에서 npm intall해준다. 이제 ctrl + alt + shift + p 를 눌러서(아마 intelliJ기준) formatting할 수 있다.

npm i --save-dev prettier

 

 

Configuration파일의 명칭

딱히 설정 없이도 설치만 하면 잘 돌아가지만, configuration설정을 할 수도 있다.

 

프리티어의 configuration파일은 https://github.com/davidtheclark/cosmiconfig를 기반으로 되어있다.

cosmiconfig는 프로젝트에서 configuration파일을 찾아주는 프로그램이다.

 

프로젝트 하위의, (예를 들어 myapp이라는 프로젝트라면)

• package.json (myapp하위의 package.json을 찾는다)
• .json, .yaml, .yml, .js, cjs 형식으로 된 rc가 붙은 파일 (.myapprc)
• .config 파일 하위의 rc , .json, .yaml, .yml, .js, .cjs 파일들
  • .config 디렉토리 아래에
  • myapprc, myapprc.json, myapprc.yaml, myapprc.yml, myapprc.js , myapprc.cjs
• .config.js 또는 CommonJS 에서는 .config.cjs

를 찾아준다.

 

따라서 프리티어의 configuration파일도 이러한 규칙을 따르면 된다.

• A "prettier" key in your package.json file.
• A .prettierrc file written in JSON or YAML.
• A .prettierrc.json, .prettierrc.yml, .prettierrc.yaml, or .prettierrc.json5 file.
• A .prettierrc.js, .prettierrc.cjs, prettier.config.js, or prettier.config.cjs file that exports an object using module.exports.
• A .prettierrc.toml file.

 

하지만 귀찮으니,.prettierrc.json 로 통일하도록 하자. 

 

 

Configuration파일의 위치

프로젝트 루트에 .prettierrc.json 를 만들면 된다.

 

 

Configuration Schema

기본 configuration구조에 대한 것 같다.

 

If you’d like a JSON schema to validate your configuration, one is available here: http://json.schemastore.org/prettierrc.

“원본에는 configuration을 검증할 스키마가 필요하다면 여기있다” 고 말하긴 하는데,,, 그게 무슨말인지,, 아마 기본 구조에 대한 것 아닐까

 

 

옵션

configuration파일을 읽어보자.

기본적으로

• semi: flase 강제로 세미콜론을 붙일 것인가

등의 옵션이 있다. 상세한 옵션들은 아래를 참고하자

https://prettier.io/docs/en/options.html

 

Overriding

옵션을 아래처럼 오버라이딩 할 수 있다.

{
  "semi": false,
  "overrides": [
    {
      "files": "*.test.js",
      "options": {
        "semi": true
      }
    },
    {
      "files": ["*.html", "legacy/**/*.js"],
      "options": {
        "tabWidth": 4
      }
    }
  ]
}

Parser

프리티어가 읽지 못하는 파일에 parser옵션을 주어 parser를 설정할 수 있다.. 예를 들어서 이제 .prettierrc파일을 json으로 파싱할 것이다.

{
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}

 

 

최종 .prettier.json파일

일단은 prettier가 알아서 다 세팅되어있기 때문에 이것밖에 할게 없다….

{
  "tabWidth": 2,
  "semi": true
}

프로젝트를 진행하며 더 추가할 사항이 있으면 업데이트할 예정이다.

 

 

 

참고

https://prettier.io/

Prettier · Opinionated Code Formatter