<p><br></p><p><br></p><p><br></p><p>이제는 버전업이 되서...</p><p>아래처럼 톱니바퀴 누르면 되는 것 같다.</p><p><br></p><p><img src='/api/file/11EBA6494C2F7EF6B5F10242AC110004' style="max-width:100%;height:auto;"><br></p><p><br></p><p><br></p><p><br></p><hr><p><br></p><p>혼자 개발할 때는 어찌되던 크게 관계가 없었는데, 협업을 해야하니 소스의 일관성을 위해 formatter와 linter의 역할이 중요해진 것 같다.&nbsp;</p><p><br></p><p>현재는 vue.js로 작업을 하는 중인데 IDE로는 VSCode를 사용하고 있어서 이에 대한 설정 공유 방법을 적어본다.</p><p><br></p><p>VSCode에서 "Ctrl+,"를 누르면 설정창이 열리는데 이곳 아래에 보면 "사용자"탭과 "작업 영역" 탭이 있다.</p><p>사용자탭은 Global 설정이고,</p><p>작업 영역은 VSCode로 열어놓은 프로젝트의 루트에 ".vscode\settings.json" 파일이다.&nbsp;</p><p><br></p><p>우선순위는 Global 영영 설정 후 작업영역 설정으로 덮어쓰는 방식이며,</p><p>그래서 프로젝트별로 작업 영역에 설정하고 해당 파일을 git에 공유하면 된다.</p><p><br></p><p><span style="font-size: 1rem;">확장 프로그램은 Vetur, Prettier, ESLint만 설치했다.</span><br></p><p>ESLint의 경우는 처음 설치하면 옵션을 켜주어야하는데&nbsp;<span style="font-size: 1rem;">"F1" 키를 눌러서 명령창을 띄운 후 "</span><span style="font-family: &quot;맑은 고딕&quot;; font-size: 11pt;">ESLint: Manage Library Execution"을 눌러서 "Allow Everywhere"를 선택하면 된다.</span></p><p><img src='/api/file/11EB25659CD5EA6FA7EA0242AC110003' style="max-width:100%;height:auto;"></p><p><img src='/api/file/11EB2565AD71D852A7EA0242AC110003' style="max-width:100%;height:auto;"></p><p><br></p><p>다음은 현재 작업영역에 넣어둔 설정 내용이다.</p><div style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div>{</div><div>&nbsp;&nbsp;<span style="color: #9cdcfe;">"javascript.format.insertSpaceBeforeFunctionParenthesis"</span>:&nbsp;<span style="color: #569cd6;">true</span>,</div><div>&nbsp;&nbsp;<span style="color: #9cdcfe;">"eslint.alwaysShowStatus"</span>:&nbsp;<span style="color: #569cd6;">true</span>,</div><div>&nbsp;&nbsp;<span style="color: #9cdcfe;">"files.trimTrailingWhitespace"</span>:&nbsp;<span style="color: #569cd6;">true</span>,</div><div>&nbsp;&nbsp;<span style="color: #9cdcfe;">"eslint.validate"</span>:&nbsp;[<span style="color: #ce9178;">"javascript"</span>,&nbsp;<span style="color: #ce9178;">"html"</span>,&nbsp;<span style="color: #ce9178;">"vue"</span>],</div><div>&nbsp;&nbsp;<span style="color: #9cdcfe;">"editor.codeActionsOnSave"</span>:&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">"source.fixAll.eslint"</span>:&nbsp;<span style="color: #569cd6;">true</span></div><div>&nbsp;&nbsp;},</div><div>&nbsp;&nbsp;<span style="color: #9cdcfe;">"files.autoSave"</span>:&nbsp;<span style="color: #ce9178;">"afterDelay"</span>,</div><div>&nbsp;&nbsp;<span style="color: #9cdcfe;">"prettier.printWidth"</span>:&nbsp;<span style="color: #b5cea8;">200</span>,</div><div>&nbsp;&nbsp;<span style="color: #9cdcfe;">"prettier.singleQuote"</span>:&nbsp;<span style="color: #569cd6;">true</span>,</div><div>&nbsp;&nbsp;<span style="color: #9cdcfe;">"prettier.semi"</span>:&nbsp;<span style="color: #569cd6;">false</span>,</div><div>&nbsp;&nbsp;<span style="color: #9cdcfe;">"prettier.htmlWhitespaceSensitivity"</span>:&nbsp;<span style="color: #ce9178;">"ignore"</span>,</div><div>&nbsp;&nbsp;<span style="color: #9cdcfe;">"prettier.jsxBracketSameLine"</span>:&nbsp;<span style="color: #569cd6;">true</span>,</div><div>&nbsp;&nbsp;<span style="color: #9cdcfe;">"editor.formatOnSave"</span>:&nbsp;<span style="color: #569cd6;">true</span></div><div>}</div><br></div><p><br></p><p><span style="font-size: 1rem;">global 설정의 경우는 MS 계정을 사용하여 동기화 하고 있다.&nbsp;</span><br></p><p>설정창에 갔는데 동기화가 잘 되고 있지 않다면&nbsp;</p><p>"F1"키를 눌러 명령창을 열고 "설정 동기화: 끄기"를 선택했다가 다시 켜면되고, 그럼 병합옵션이 나오는데 그냥 "Merge" 선택하면 된다.</p><p><img src='/api/file/11EB2565DE488CBCA7EA0242AC110003' style="max-width:100%;height:auto;"></p><p><br></p><p><br></p><p><br></p><p><br></p>

[VSCode] 설정 동기화 방법