[vscode] vue, java, spring, xml(mybatis) 개발환경 세팅

VScode Install

VScode가 없는 사람들은 먼저 설치한다.

https://code.visualstudio.com/download

 

Extension이란?

extension은 확장팩, plugin같은 것이다.

vscode는 기본적으로 코드 편집기라서 가장 간단한 기능만 들어있다.

하지만 extension을 추가로 설치해서 IDE처럼 사용할 수도 있다.

내 입맛에 맞게 고칠 수 붙일 수 있다는게 장점이다.

 

Extension 설치방법

vscode왼쪽 버튼을 클릭하거나 ctrl + shift + x를 눌러 extension market을 연다.

원하는 extension을 검색해서 install을 누른다.

 

필수 Extension설치

1. Git bash를 default로 쓰는 설정

2022.07.06 - [VScode] - [vscode] git bash쓰기, git bash를 default terminal로 쓰기

[vscode] git bash쓰기, git bash를 default terminal로 쓰기

 

2. java, springboot 개발환경 세팅

2022.07.06 - [VScode] - [vscode] java, springboot 개발환경 세팅

[vscode] java, springboot 개발환경 세팅

 

3. vue 개발환경 세팅

2022.07.06 - [Vue] - [vscode] vue 개발 환경 세팅하기

[vscode] vue 개발 환경 세팅하기

 

필수는 아니지만 추천하는 extension

open in browser (alt + b로 html파일을 바로 브라우저에서 열 수 있음. 편함)

material Icon Themes (아이콘을 예쁘게 바꿔줌)

prettier (자동 코드정렬)

xml Tools (mybatis용 좋은 extension을 못찾았다. xml이라도 정리하려고 깔아봤다...)

Material Icon 세팅

1. Material Icon Theme Extension 설치

2. setting.json에 아래 추가

//material icon
"workbench.iconTheme": "material-icon-theme",
"material-icon-theme.folders.theme": "classic",
"material-icon-theme.folders.color": "#90a4ae", //폴더 색깔 회색으로 통일

 

prettier세팅

1. Prettier 설치

2. setting.json에 아래 추가

//code formatter
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.tabWidth": 4,
"[vue]": {
    "editor.defaultFormatter": "Vue.volar"
},
"[java]": {
    "editor.defaultFormatter": "redhat.java"
},
"[xml]": {
    "editor.defaultFormatter": "DotJoshJohnson.xml"
},

 

settings.json 최종

{
    //lombok사용
    "java.jdt.ls.vmargs": "-XX:+UseG1GC -XX:GCTimeRatio=4 -XX:AdaptiveSizePolicyWeight=90 -Dsun.zip.disableMemoryMapping=true -Xmx1G -Xms100m -javaagent:\"extension의 lombok.jar위치\"",
    //git bash 사용
    "terminal.integrated.profiles.windows": {
        "GitBash": {
            "path": ["gitbash 위치"]
        }
    },
    "terminal.integrated.defaultProfile.windows": "GitBash",

    //material icon
    "workbench.iconTheme": "material-icon-theme",
    "material-icon-theme.folders.theme": "classic",
    "material-icon-theme.folders.color": "#90a4ae",

    //자동 인코딩
    "files.autoGuessEncoding": true,

    //prettier
    "editor.defaultFormatter": "svipas.prettier-plus",
    "prettier.tabWidth": 4,
    "[vue]": {
        "editor.defaultFormatter": "Vue.volar"
    },
    "[java]": {
        "editor.defaultFormatter": "redhat.java"
    },
    "[xml]": {
        "editor.defaultFormatter": "DotJoshJohnson.xml"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
}