[vscode] settings.json을 수정해서 나만의 포맷팅 스타일을 만들어보자!

 

 

 

 

 

🤔문제 상황

 

최근 인터넷 프로그래밍 과목을 수강하면서 

간단한 SpringBoot + Vue.js + MySQL을 활용하는 프로젝트 과제를 수행했다.

 

그 전까지는 간단한 과제여서 덜 불편했으나, 이것저것 다양한 확장자를 다루다보니

폴더에 포매터를 하나만 설정하기에는 매우 부족하다는 생각이 들었다.

 

스프링부트 파일을 다룰 때에는 java 포매터를,

Vue나 JavaScript에는 Prettier를 사용하고 싶었다.

그래서 찾아보니 역시나 이를 한꺼번에 설정할 수 있는 방법이 있었다😊

 

 

 

 

😁해결 방법

 

바로바로 이를 해결하는 방법은?

나처럼 vscode를 사용하고 있는 사람이라면 settings.json 파일을 수정하면 된다.

먼저 설정하기 전 설치하고자 하는 포매터 확장을 미리 설치해야 한다.

나는 Prettier - Code formatter, google-java-format를 설치했다!

그리고 다음과 같이 settings.json을 수정한다. 

파일 경로는 ./vscode/ settings.json로 진행했다.

{
    "java.compile.nullAnalysis.mode": "disabled",
    "java.configuration.updateBuildConfiguration": "interactive",

    "editor.defaultFormatter": "esbenp.prettier-vscode",

    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[java]": {
        "editor.defaultFormatter": "google.java-format"
    },

    "editor.formatOnSave": true,
    "prettier.singleQuote": true,
    "prettier.semi": false
}

 

 

문법이 어렵지 않아서 대충 따라서 치면 된다!

java 파일의 경우 google-java-format가 잘 적용되고, 

Vue나 JavaScript 등의 파일에는 Prettier가 잘 적용된다.

 

또 파일이 저장될 때마다 포매터를 실행시키는 옵션을 true로 설정하여

파일마다 Shift + Alt + F를 누르면 1초도 안 걸려서 자동으로 포맷팅 해준다.

앞으로 프로젝트를 하게 되면 setting.json파일을 각각 커스텀해보며 더 유용하게 사용해봐야겠다😁

 

 

 

 

 

--

 

아래는 JSON 사용법에 대해 더 자세히 설명하고 있는 좋은 글들이니 나중에라도 참고하면 좋을 것 같다:)

📑 JSON 기초 문법 정리

 

VSCode Project단위 Settings & Extensions