[VScode] 작업공간의 settings입니다.json을 써서 팀 개발의 효율화를 실현하세요![프로필 등]

안녕하세요.빨간 사람이야.빨갛지만 산타클로스는 아니에요.
이 글은 아사히신문 Advent Calendar 2021의 13일째 글입니다!
이번에는'우리 팀이 VScode를 편리하게 이용할 수 있도록'이야기다.
VScode는 공동 개발에도 도움이 된다는 메시지를 전달하기 위해 이 기사를 썼다.
VScode 설정은 "settings.json"을 통해 수행할 수 있습니다.
VScode의 설정은 settings입니다.json의 사용자 파일로 진행됩니다.cmd + ,에서도 GUI를 사용하여 설정할 수 있지만 settings.제이슨으로 설정하면 쉬워요.
Mac의 경우 $HOME/Library/Application Support/Code/User/settings.json 파일이 있습니다.
그럼 VScoder는 각각 이 settings입니다.json을 편집했습니다. 저는 VScode가 편리하게 사용하기 위해 설정된 것 같습니다. 이 설정을 알고 계십니까? 실제로 모든 프로젝트(작업공간)를 진행할 수 있습니까?
※ 공식 Doc의여기.
각 작업공간의 VScode 설정
전체 VScode의 설정은 위에서 설명한 settings에 있습니다.json을 저장했지만 모든 작업 공간의 설정은 다른 곳에서 진행됩니다.
장소는プロジェクト/.vscode/settings.json입니다.
여기 세팅스.json에 설정을 적어 공유하면 프로젝트 파트너 중 VScode를 사용하는 사람은 특별히 번거로운 일을 하지 않고 모두가 같은 설정으로 개발할 수 있다.
또한 전체 설정과 작업 공간 설정에서 항목의 덮어쓰기를 설정하는 부분이 나타날 것이라고 생각합니다.
작업공간 설정이 우선입니다.
팀 중의 어떤 사람이 대다수 사람들에게 이해되지 않는 특수한 설정을 설정해도 작업 공간의 settings.json이 우선이기 때문에 어려운 일을 고려하지 않는 작업 공간의settings.제이슨을 끊임없이 활용하세요!
※ 공식 Doc의여기.
코드 형식
여러분은 어떤 코드 디스크를 사용하고 있습니까?
ESLight(Linter지만...), js-beatify, prettier 등등...
이번에는 프리티어의 예를 쓰고 싶습니다.
먼저 VScode 확장에서 prettier를 설치합니다.
그렇다면プロジェクト/.vscode/settings.json

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

이렇게 쓰면 돼.
자바스크립트만 설정하고 싶으면...

{
    "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
        "editor.formatOnSave": true
  }
}

이런 느낌.
참고로 상술한 설정은 코드를 저장할 때 포맷해서 저장하는 것이다.
어느 정도 프로그램을 쓴 사람이 인코딩 규정을 알고 있다면 인코딩 형식인 트위터도 사용하고 있다고 생각합니다.그러나'프로그래밍을 배우는 신입이 프로젝트에 중도 참가한다'는 경우 코딩 규약과 코드 형식을 모를 수 있다.나는 독학하면 이런 일이 발생하기 쉽다고 생각한다.
이럴 때 먼저 VScode에prettier를 붙여서 프로젝트pull을 나오게 한 다음에 공식적인 내용을 고려하지 않고 개발을 시작합니다...내가 뭘 할 수 있겠어?
만약 모든 항목이 편집기의 설정을 관리할 수 있다면 구축 환경의 번거로움을 줄일 수 있고 매우 편리하다.
설계 변경
VS코드는 자신의 취향에 따라 다양한 디자인을 바꿀 수 있다.
여러 사건이 있을 때 지금 어떤 개발 화면을 켜고 있는지 바로 판단할 수 없는... 고민이 있나요?
그럴 때 작업공간 settings.제이슨이 활발하다.プロジェクト/.vscode/settings.json 이렇게 써 보세요.

{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#ff0000",
    "titleBar.activeForeground": "#000000",
    "activityBar.background": "#ff0000",
    "activityBar.foreground": "#000000",
    "activityBarBadge.background": "#000000"
  }
}

그러면...

이렇게 창을 색칠할 수 있기 때문에 지금 열려 있는 항목이 무엇인지 순간적으로 판단할 수 있다.
※ 참고로 아무리 빨간색을 좋아해도 다른 엔지니어들은 불안할 수 있으니 편집기 색상을 빨간색으로 바꾸지 마세요.
자세한 내용은 공식 Doc여기.에 기재되어 있습니다.
작업 공간의 settings.json을 능숙하게 사용하세요!
작업 공간의 settings.json을 제작하고 공유함으로써 팀 전체의 개발 효율을 높일 수 있다.
이번에 포맷기와 편집 색상 변경 두 가지를 썼으니 더 편리한 설정이 있을 거예요.
VScode를 사용하지 않은 사람은 반드시 VScode로 갈아타서 팀 전체의 개발 효율을 끊임없이 높여야 합니다!
그게 다야.감사합니다.
아사히신문은 기술직 중도채용을 강화하고 있다.
관심 있는 사람은 아래의 링크에서 희망 직업의 모집 페이지로 들어가세요.
여러분의 응모를 기대합니다!