추가 노트 - vscode 및 vscode에 prettier 설치

비주얼 스튜디오 설치

Download Visual Studio Code - Mac, Linux, Windows

prettier

코드를 작성할 때 들여쓰기 등을 미리 정해 놓은 양식에 따라 정리해주는 vscode 플러그인이 있습니다. prettier 라고 합니다.

이를 설치해 보고 저장을 할 때 코드가 예쁘게 잘 정리될 수 있도록 설정해 보겠습니다.

vscode에 prettier 설치하기

다음 링크에서 설치하면 됩니다.

Prettier - Code formatter - Visual Studio Marketplace

이제 파일을 저장할 때 코드가 정리되게 설정해 보겠습니다.

• File -> Preferences -> Settings를 누릅니다.

• 다음 아이콘을 눌러 .vscode/setting.json 파일을 엽니다.

그 다음 이 두 줄을 적어줍니다.

{
  "editor.formatOnSave": true, 
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

이렇게 하면 저장할 때마다 프리티어를 적용해 줍니다.

prettier 추가 설정 방법

추가적으로 prettier의 세팅을 설정할 수 있습니다. 다음과 같이 진행하면 됩니다.

루트 폴더에 .prettierrc.json 파일을 만들고 다음과 같이 내용을 적어줍니다.

{
  "semi": true, // 줄의 끝에 ; 을 붙여 준다.
  "trailingComma": "es5", // es5가 허용하는 범위에서 배열이나 객체의 마지막에 쉼표 추가. 호환성을 위해 es5 입력.
  "singleQuote": false, // "" 처럼 쌍따옴표로 바꿔줌.
  "tabWidth": 2, // 탭을 눌렀을 때 2칸을 띄어줌.
}

Options · Prettier 에서 모든 옵션을 볼 수 있습니다.

trailingComma는 배열이나 객체의 마지막에 쉼표를 붙이는 기능입니다.

{
  'orange': 139,
  'apple': 23, <- 마지막에 콤마가 붙은 것을 알 수 있다.
}