vscode에 prettier를 소개합시다!

이번은 코드 포맷터의 prettier 의 vscodeへの導入方法 에 대한 설명입니다.

prettier는 무엇입니까?

prettier는 코드 포맷터라고 불리며, 작성한 코드를 읽기 쉬운 형태로 성형해 주는 툴입니다.

개인으로 개발을 하고 있는 경우는 관계 없을지도 모릅니다만, 복수명의 팀으로 개발하고 있을 때, 사람에 의해 코드의 작성 방법이 다르면 다른 사람이 코드를 읽기 어려워 버립니다.

그래서, prettier를 사용하는 것으로, command+s 로 파일을 보존했을 때에 누구라도 읽기 쉬운 형태로 마음대로 코드가 정형됩니다.

이로 인해 가독성이 높아지고 유지 보수 및 개발도 쉬워집니다.

코드 정형 예

성형 전

example.js

    const inputTitle = useCallback((event) => {
      setTitle(event.target.value)
    }, [setTitle]);

example.js

let   hoge  = func (
  parameter1,   parameter2, parameter3,    parameter4,
 parameter6,  parameter7,
       parameter8,
            );

성형 후

example.js

  const inputTitle = useCallback(
    (event) => {
      setTitle(event.target.value);
    },
    [setTitle]
  );

example.js

let hoge = func(
  parameter1,
  parameter2,
  parameter3,
  parameter4,
  parameter6,
  parameter7,
  parameter8
);

도입 방법 소개

prettier에 대해 이해했을까요?

여기에서는 vscode에 prettier의 도입에 대해 설명합니다.

1단계: 확장 프로그램 검색 필드에 prettier를 입력하여 설치

우선 설치입니다.
vscode 확장 프로그램 검색 필드에 prettier를 입력하면 맨 위에 Prettier - Code formatter라는 것이 나오므로 설치합니다.


설치가 완료되면 아래 그림과 같이 제거, 비활성화 등의 버튼이 나타날 것입니다.

2단계: vscode 측에서 "Format on save" 설정하기

다음은 vscode 측 설정입니다. 1단계에서 prettier가 활성화되어 있습니다.

우선, command + , 또는 左下の歯車のマークの設定をクリック
vscode에 관한 설정 항목이 즐러 늘어서 있다고 생각합니다. 검색란 아래에 있는 ユーザー 와 ワークスペース 는 각각 vscodeのどの開発でも適用する設定 와 ワークスペース、つまり現在のディレクトリのみの設定 라는 의미가 있습니다.

이번에는 ワークスペース를 선택합니다.

그런 다음 검색 창에 formatOnSave를 입력하십시오.

Editor:Format On Save 를 체크합니다.

그러면 .vscode라는 파일이 자동 생성되므로 (다른 설정을 이미 했으면 있을지도 모릅니다) 그래서 그 안에 있는 코드를 확인합니다. 다음과 같이 되어 있으면 OK입니다.

setting.json

{
  "editor.formatOnSave": true
}

이것으로 도입이 완료됩니다 🖐

참고

prettier(공식)

Prettier 도입 방법 프런트 엔드 개발에 필요한 코드 성형 도구