[VSCode | extension] Prettier 적용하기 + 적용안될 때 해결방안

로고가 예뻐서 대표사진으로 쓰겠음;

 

Prettier이란?

Visual Strudio Code에서 코드를 보기 좋게 정리해주는 확장 프로그램이다.

• 대부분의 프로그래밍 언어에서 사용 가능
• 협업 시 코딩 스타일이 달라서 merge할 때 문제가 생길 수 있으므로 사용하는 것이 좋음

설치방법: Visual Studio Code 화면에서 왼쪽 사이드 바에서 테트리스같이 생긴 extension(확장)아이콘을 누르고 prettier를 검색 후 설치합니다.

(가장 위에 뜨는 걸 선택하면 됩니다.)  

 

맨 하단을 보면 Prettier가 설치된 모습을 확인할 수 있다.▼  

+ 빨간색으로 체크한 부분을 클릭하면 프리티어에 관한 상세 속성을 볼 수 있다. ▼ 

 

---

프리티어 적용이 안될 때, 해결방법

1. Format on Save 확인

vscode 설정(settings)에서 format on save를 검색하고 나오는 설정에 체크가 되어있는 지 확인(체크가 되어있어야 합니다.) 

2. Default Formatter 확인 

에디터의 기본으로 설정되어 있는 formatter가 null 이나 다른 것일 경우가 있음-> 이럴 때 Prettier - Code formatter 로 설정되어있는 지 확인해야 합니다.

• Prettier - Code formatter esbenp.prettier-vscode 가 풀네임 입니다.
• 마찬가지로 settings -> Default Formatter 검색

settings.json < .editorcongfig < .prettierrc  순서로 우선순위가 정해지는데 그 말은 즉 settings.json에서 해준 설정이 .prettieric이 있을 경우 덮어쓰여진다는 것이다. 

아래는 내 settings.json이다. 보면 프리티어에 관한 상세 설정이 없다. (분명, 위에서 Prettier 클릭을 했을 때는 확인가능했는데 로컬에는 없다는 메세지를 반환받았음 그래서 .prettierrc 파일을 따로 만들어서 설정) 

 

내 settings.json ▼

 

{
  "editor.fontFamily": "Fira Code, D2coding",
  "window.zoomLevel": 1,
  "liveServer.settings.donotShowInfoMsg": true,
  "workbench.iconTheme": "material-icon-theme",
  "editor.formatOnSave": true,
  "editor.guides.bracketPairs": true,
  "editor.bracketPairColorization.enabled": true,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.colorTheme": "Community Material Theme",
  "bracketPairColorizer.depreciation-notice": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "terminal.integrated.defaultProfile.windows": "Git Bash"
}

 

 

 

settings를 GUI가 아닌 JSON 형태로 보고싶다면  settings 화면에서 오른쪽 상단에 종이가 뒤집히는 아이콘을 눌러주면 된다. ▼

 

Prettier 규칙 설정하는법 

1. VScode settings에서 규칙을 정하기 ( settings.json )
2. Prettier 설정 파일을 만들기 ( .editorconfig / .prettierrc )

*.editorconfig는 사용하는 IDE(vscode 같은 에디터)가 다를 경우 세팅한다고 함 

->협업을 할 때에는 settings.json보단 .prettierrc에 옵션을 넣는 것이 좋다. 코드가 꼬이지 않기 때문이다. 

 

파일을 만들어서 추가할 때에는 폴더의 root에 추가해야 하며 형식 아래의 사이트에 자세하게 나와있으며 다양하다. 

개인적으로 .prettierrc( JSON형식이나 YAML 형식으로 작성해야 함 )파일을 만들어주는 것을 자주 사용했다. 

 

▼JSON 예시

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

▼JS 예시

// prettier.config.js or .prettierrc.js
module.exports = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

자세한 내용은 아래 참고▼

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

Prettier · Opinionated Code Formatter

 

Prettier 옵션s 설명

{
  "singleQuote": true, // "" 말고 ''적용
  "semi": true, // 명령문 끝에 ;적용
  "useTabs": false, //: 공백대신 tab을 사용하여 들여쓰기 적용
  "tabWidth": 2, //자동 들여쓰기 값이 스페이스 2칸을 의미, 주로 2(default) or 4 
  "trailingComma": "all", //(default: none) 객체 배열 함수 등 마지막에 쉼표를 찍을지에 대한 여부를 판단
  "printWidth": 80 //(default :80), 한 줄 내에서 코드를 맞춘다. 글자 수를 넘기게 되면 줄 바꿈이 되어 자동으로 정리
}

부가 설명) trailingComma의 속성값으로 3가지가 있음

-none : 쉼표 X 

-es5 : ES5에서 유효한 쉼표를 붙임( 객체, 배열 등)

-all : 가능하면 마지막에 쉼표를 붙임 (함수 인수 )