IDE - formatter를 확장자에 따라 적용해보자

💌 Formatter

최근 사내에서 주로 사용하는 Fast API가 궁금해서 Fast API + Next js 조합으로 todo 를 만들어보고 있다. 나는 Python을 Javascript만큼 자주 사용하지 않기 때문에, 내 노트북 환경에서 Python을 거의 사용하지 않아서 이번에 BE 작업을 위해 Python Formatter를 처음으로 사용해보게 되었는데 저장할 때 제대로 포맷팅이 안되더라.. 🤔

👀 포맷터를 설정해보자

일단 Javscript에서는 Prettier을 주로 사용했기 때문에 그대로 사용하기로 하고, Python 포맷팅에는 Black Formatter를 많이 사용하시는 것 같아서, VS code 내에 extension 먼저 설치해주었다.

그리고 늘 하던대로 Ctrl + , 를 이용해 Settings를 열고 Default Formatter를 검색해 Black Formatter를 설정하면…! 당연히 안된다

이러면 문제가 있는데 .py 확장자는 문제가 없지만 내가 주로 사용한 .js 나 .ts 포맷팅이 되지 않는다는 거다.

✨ 해결

그렇다면 확장자 별로 포맷터를 다르게 지정해줄 필요가 있었고, 이건 Default Formatter 세팅에서는 해결할 수 없는 문제였다.

그래서 Ctrl + Shift + P 로 검색창을 열고 > Preferences: Open User Settings (JSON) 를 검색해 들어가 직접 작성해주었다.

{
    "editor.formatOnSave": true,
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[python]": {
        "editor.defaultFormatter": "ms-python.black-formatter"
    },
}

개인적으로 저장시에 자동으로 포맷팅 되는 것이 좋아 항상 formatOnSave는 true 상태로 두고 있었기에 해당 값을 유지해주었고, ts, js는 prettier를, python은 새로 설치한 black-formatter를 사용할 수 있도록 설정해주었다.

settings.json을 저장해주고 각 확장자에서 save 했을 때 formatting 되는 것을 확인할 수 있었다.🤗