Vue Prettier로 코드 정렬하기

이전에 진행 중인 프로젝트에서는 Code Convention이 지켜지지 않아 코드 정렬이 좋지 않은 경우가 있었습니다.

이는 여러 담당자를 거치면서 코드의 가독성이 떨어지고 코드 수정 이후 git history를 확인하기 어렵게 만들었습니다.

이 문제를 해결하기 위해서는 모든 코드를 동일한 Format으로 변경하는 설정을 해야 합니다. 일반적으로 Prettier와 EsLint는 함께 사용됩니다.

ESLint는 코드의 퀄리티를 보장하도록 도와주는 도구입니다. 일관성 있는 방식으로 코드를 구현할 수 있게 됩니다. 예를 들어 함수를 표현할 때 function을 이용할지 arrow를 이용할지 등을 정할 수 있습니다.

Prettier는 코드 구현과는 관련없이 일관된 방식의 코드 포맷을 정리하게 도와주는 도구입니다. 띄어쓰기 4칸 또는 2칸 등과 같은 것을 일관되게 적용합니다.

해당 프로젝트 이전 코드의 코드 포맷을 맞추고 이후 코드 수정에서 일관성을 지키기 위해 Prettier만을 이용하여 간단하게 정의하고 추후 변경된 코드는 .prettierrc 설정으로 일관성 있는 코드 작성을 유지하도록 설정하도록 합니다.

다음은 Prettier만을 이용하여 프로젝트 코드포맷을 변경하는 방법입니다.

Prettier 설정 방법

우선 VS Code를 기준으로 설정합니다.

확장관리자에서 Pretiier - Code formatter와 Vue Language Features (Volar)를 설치합니다.

코드 적용을 하고 싶은 프로젝트 최상단에 아래와 같은 .prettierrc파일을 생성합니다. 아래의 옵션 외에 다양한 옵션이 공식 홈페이지에
문서화 돼 있으므로 참조할 수 있습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{
    "singleQuote": true, // 작은 따옴표 사용(문자열)
    "semi": true, // 문장 뒤에 세미콜론 추가
    "useTabs": false, // tab 허용 안함
    "tabWidth": 2, // tab 길이 2칸
    "trailingComma": "all", // 배열, 객체 속성에서 마지막 요소 컴마 사용
    "printWidth": 120, // 코드의 블록 너비
    "bracketSpacing": true, // 객체 리터럴 공백 추가 { foo: bar }
    "overrides": [
        {
        "files": "*.vue",
        "options": {
            "parser": "vue"
        }
    ] // vue 파일의 경우 vue parser로 구문 분석기 지정 
}

command + , 또는 ctrl + ,를 이용해 설정으로 이동 후 json script로 이동하여 아래와 같이 스크립트를 추가해줍니다.
Vue의 경우 prettier의 자동완성이 설정되지 않아 이렇게 명시적으로 넣어줘야 합니다.
1 2 3
"[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
위 설정을 마친 후 기존에 있던 vue와 js파일 또는 ts가 있다면 아래에 ts를 추가하여 명령어를 src위치에서 쓰면 모든 파일이 한번에 수정할 수 있습니다.Title
1
npx prettier --write **/*.{js,vue} # 이게 안되면 {} 제거 후 각각 실행
VsCode에서 저장 시 자동으로 포맷을 저장하도록 설정합니다. command + , 또는 ctrl + ,을 눌러 설정창에서 Format on Save를 선택합니다.

이렇게 한번 지정하면 이후에는 코드 포맷에 대한 고민을 조금은 덜 수 있습니다.

참조

Prettier 문서

Prettier 설정 방법#

참조#

Prettier 설정 방법

참조