visual studio code 저장시 자동 format 설정(formatOnSave)

Visual Studio Code에서 저장을 하면 자동으로 포맷팅이 되도록 하는 기능 설정을 해보고,
갑자기 오류로 해당 기능이 작동 안될 때 어떻게 수정할 수 있는지 알아보자.

VS code에서 저장시 자동 format설정

1. Command + , 을 눌러 Setting에 들어간다.
2. 오른쪽 상단에 있는 Open Setting(JSON) 버튼을 클릭한다.
3. JSON 파일에 아래의 내용을 붙여 넣어준다(vue사용하는 prettier 기준)

{
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.suggestSelection": "first",
    "git.ignoreLegacyWarning": true,
    "editor.renderWhitespace": "all",
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
}

 

원래 위 처럼 설정하면 정상 작동해야 한다. 
하지만, 나의 경우 잘 작동하다가 갑자기 작동하지 않는 문제를 맞이하게 됐다.

 

살펴보니, 우측 하단에 있는 Prettier가 제대로 작동 되지 않는 다는 표시가 되어 있었다.(아래 사진은 정상 작동시의 모습이다.)

 

그래서 Problem 터미널 창을 살펴 보니, prettier 모듈을 찾지 못하겠다고 열심히 에러를 내고 있는 모습을 볼 수 있었다. 

 

npm install --save-dev prettier

npm 을 이용하여, prettier를 설치해 주니, 에러메시지가 사라지고 정상적으로 저장시에 포맷팅이 되는 모습을 볼 수 있었다.