vscode 프로필로 개발 환경 공유하기
신규 입사하는 팀원에게 프로젝트 마다 필요한 확장 프로그램과 팀에서 공통으로 사용하는 에디터 설정을 공유하기 위해 vscode 프로필 기능을 사용했습니다.
프로필마다 에디터 설정(settings.json)과 확장 프로그램을 다르게 구성할 수 있어서, 새롭게 합류하는 팀원에게 개발 환경에 필요한 확장 프로그램과 설정을 쉽게 전달할 수 있었습니다.
이 글을 통해서 vscode 프로필을 만들고, 내보내고, 사용하는 방법을 공유하려 합니다.
1. 프로필 만들기
먼저 vscode 좌측 하단에 있는 버튼을 클릭해서 설정 메뉴를 열고, 프로필 버튼을 클릭하여 프로필 설정 탭에 진입합니다.
프로필 탭이 열리면 새 프로필 버튼을 클릭해서 빈 프로필을 만듭니다.
(현재 사용하고 있는 프로필을 복제해서 프로필을 만들수도 있지만 제 기호에 맞는 테마, 폰트, 다양한 확장 프로그램들이 많이 설치되어 있어서 빈 프로필을 생성했습니다.)
프로필 이름을 설정하고, 만들기 버튼을 클릭하면 프로필이 생성됩니다.
이때, 콘텐츠의 원본 값이 "없음"으로 선택되어 있어야 합니다.
현재 이미지 기준으로 "기본값"을 선택할 경우, 활성화 되어 있는 기본값 프로필에 설치된 확장, 코드 조각, 설정이 적용됩니다.(빈 프로필을 생성한 의미가 없습니다. 😂)
프로필이 생성되면, 체크 버튼을 클릭해서 프로필을 변경합니다.
현재 창에 프로필이 적용됩니다.
이제 필요한 확장 프로그램을 설치하고 에디터 설정을 추가합니다.
확장 프로그램을 설치하면, 현재 선택된 프로필에 자동으로 확장이 추가됩니다.
Vue3 프로젝트 개발 환경에 필요한 확장 프로그램과 팀에서 공통으로 사용하는 확장 프로그램을 프로필에 추가했습니다.
settings.json에는 너무 많은 옵션이 있어서 공통으로 사용하는 prettier 옵션과 현재 팀원들이 사용하고 있는 설정 중에서 괜찮다고 생각한 옵션만 추렸습니다.
프로필을 사용한 후에 개인의 기호에 맞게 얼마든지 커스텀이 가능합니다.
2. 프로필 내보내기
생성한 프로필을 vscode 프로필 파일로 만들어서 쉽게 공유할 수 있습니다.
내보낼 프로필 옆에 있는 메뉴 버튼을 클릭하고, 내보내기 버튼을 클릭합니다.
내보낼 방법을 선택할 수 있는 메뉴가 나오는데, 로컬(파일)을 선택합니다.
파일 탐색기가 열리면, 저장할 폴더를 지정하고 저장 버튼을 클릭합니다.
지정한 폴더에 Vue3 Profile.code-profile 파일이 생성된 것을 확인합니다.
3. 프로필 가져오기(적용하기)
프로필을 생성할 때와 동일하게 프로필 탭에 진입합니다.
새 프로필 버튼 옆에 있는 화살표 버튼을 클릭하고, 프로필 가져오기 버튼을 클릭합니다.
파일 탐색기를 통해 컴퓨터에 있는 vscode 프로필 파일을 가져올 수 있습니다.
위에서 생성한 프로필 파일을 선택합니다.
프로필이 불러와지면 사용할 이름과 콘텐츠를 선택합니다.
기존에 Vue3 Profile이 존재하기 때문에 Vue3 Profile2로 이름을 변경했습니다.
현재 필요한 구성은 설정과 확장 프로그램이기 때문에 콘텐츠에서 2가지 항목만 Vue3 Profile의 값을 선택하고, 나머지 항목은 없음을 선택합니다.
만들기 버튼을 클릭하면 프로필이 생성됩니다.
생성한 프로필을 사용하면 완료!
4. cursor에서 프로필 사용하기
cursor의 경우 vscode와 UI가 달라서 명령 팔레트를 통해 프로필 탭에 진입했습니다.
명령 팔레트를 열고 "profiles: "를 입력하면 프로필 관련 명령어가 나오는데, 이중에 아무 명령어나 클릭하면 프로필 탭에 진입할 수 있습니다.
프로필 탭이 열리면 이후는 vscode와 동일합니다.
이번에 온보딩을 위한 프로필을 만들면서 vscode에 정말 유용한 기능이 많다는 것을 알게 됐습니다.
회사에서 담당하고 있는 프로젝트가 여러개이고, 각각 개발 환경이 다를 경우 프로젝트에 맞는 프로필을 생성해서 사용하면 프로젝트 별로 필요한 확장 프로그램과 설정을 쉽게 관리할 수 있을 것 같습니다.
또한, 팀원들의 settings.json을 참고하면서 유용한 기능들을 많이 확인할 수 있었습니다. 그동안에는 테마, 폰트와 같이 UI 적인 요소만 신경쓰고 있었는데 개발 경험을 높일 수 있는 유용한 기능들이 정말 많이 있어서 유용한 옵션을 하나씩 적용해볼 계획입니다.
혹시, 유용한 확장 프로그램이나 vscode 설정이 있을 경우 댓글로 추천해주시면 정말 감사하겠습니다. 🙂