320x100
320x100
JetBrains 계열을 주로 써온 내가 요즘에는 VScode를 쓰게 되었다
VScode에서 프로젝트를 시작할때는 다른 팀원들과의 VSCode IDE 설정, Extensions 설정, Prettier/ESLint(Frontend) 설정 등을 Sync해줘야 한다
- Settings
VSCode의 전역설정(Global Settings) 말고 작업공간별 설정(WorkSpace Settgins)를 설정해주면 된다
일단 VScode를 열어서 code command를 시스템에 설치를 하자(현재 위치를 Root Working Directory로 만들어서 VScode를 열게 해준다)
code command는 VSCode에서 시스템에 설치가 가능하다
(cmd + shift + P 를 누르고 code를 검색해서 설치하자)
Shell Command: Install 'code' command in PATH
앞으로 어떤 위치에서 code . (current path를 가리킴) 라고 입력을 하면 vscode가 열리게 된다
그럼 터미널을 열어 새로운 폴더를 만들고 현재 위치를 root working directory로 설정을 하자
terminal - mkdir [폴더명] && cd [폴더명] && code .
터미널에서 && 연산자로 pipe를 이을 수 있는데, 앞의 명령어를 일단 실행 후 뒤의 pipe command를 실행하겠다는 의미이다
결국
1. 폴더 생성
2. 1이 완료된 후에 폴더로 이동
3. 2가 완료된 후에 그 위치에서 vscode 실행
그리고 이게 어떤 한 회사의 프로젝트가 되었다는 가정하에 다른 팀원들과의 셋팅을 어떻게 맞출까?
다시 전역 팔레트 단축키를 이용해서 settings를 검색해보자
cmd + shift + p => settings
작업 영역 설정 혹은 open workspace settings를 입력하고 JSON이 아닌 것을 선택하자
Files: Auto Save에서 off라고 되어있는 것을 afterDelay라고 변경해보자
변경한 순간 .vscode폴더와 settings.json라는 파일이 생성되며 key와 value가 저장된 것을 볼 수 있을 것이다
이 .vscode폴더를 git에 올리면 같은 팀원들이 프로젝트를 clone했을 때 나와 같은 셋팅으로 작업할 수 있게 된다
내가 쓰는 settins.json은 이렇다
{
"editor.tabSize": 2,
"editor.fontSize": 13,
"editor.renderWhitespace": "boundary",
"editor.cursorStyle": "line",
"editor.columnSelection": false,
"editor.comments.ignoreEmptyLines": true,
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
"editor.guides.bracketPairs": true,
"editor.cursorBlinking": "smooth",
"editor.cursorSmoothCaretAnimation": "on",
"files.autoSave": "off",
"files.exclude": {
"**/.classpath": true,
"**/.history": true,
"**/.project": true,
"**/.settings": true
},
"workbench.editor.enablePreview": false,
"workbench.iconTheme": "material-icon-theme",
"workbench.sideBar.location": "right",
"workbench.tree.expandMode": "doubleClick",
"workbench.editor.highlightModifiedTabs": true,
"workbench.editor.labelFormat": "short",
"workbench.editor.scrollToSwitchTabs": false,
"workbench.colorTheme": "One Dark Pro Darker",
"scm.diffDecorationsGutterPattern": {
"added": true
},
"terminal.integrated.copyOnSelection": true,
"terminal.integrated.cursorBlinking": true,
"terminal.integrated.fontSize": 13,
}추가로 settings-desc.json을 만들어서 이게 무슨 설정인지에 대한 설명을 적어놓았다
{
"editor.tabSize": "탭 크기",
"editor.renderWhitespace": "공백문자 렌더링 방법",
"editor.fontSize": "에디터 글자크기",
"editor.columnSelection": "드래그나 키보드로 선택할때 멀티셀렉션 되도록 설정",
"editor.cursorStyle": "커서스타일",
"editor.defaultFormatter": "자동저장할때 사용될 포맷터 설정",
"editor.guides.bracketPairs": "{}가 시작되는 위치, 끝나는 위치까지 세로 가이드라인으로 보여줄 건지 여부",
"editor.comments.ignoreEmptyLines": "빈 줄까지 주석처리 되는지 여부",
"editor.cursorBlinking": "커서 깜박임 제어",
"editor.cursorSmoothCaretAnimation": "커서 이동 애니메이션 여부",
"files.autoSave": "파일 자동저장 여부",
"files.exclude": {
"desc": "제외할 파일들",
"**/.classpath": true,
"**/.history": true,
"**/.project": true,
"**/.settings": true
},
"workbench.editor.enablePreview": "파일을 미리보기 대신 새 탭 오픈",
"workbench.iconTheme": "테마",
"workbench.sideBar.location": "사이드바 위치",
"workbench.tree.expandMode": "폴더 누를때 열리게 할 것인지 여부",
"workbench.editor.highlightModifiedTabs": "저장되지 않은 파일 탭 위에 위쪽 테두리 그려줌",
"workbench.editor.labelFormat": "열린 파일 이름표시(폴더까지 나타낼 건지 등등)",
"workbench.editor.scrollToSwitchTabs": "상위 탭에서 스크롤해서 다른 탭으로 이동할 수 있는지 여부",
"workbench.colorTheme": "워크벤치 테마",
"scm.diffDecorationsGutterPattern": {
"added": "추가된 diff의 경우 소스제어 상태에서 added상태 표시여부"
},
"terminal.integrated.copyOnSelection": "터미널 선택 복사 가능 여부",
"terminal.integrated.cursorBlinking": "터미널 커서 깜빡임 여부",
"terminal.integrated.fontSize": "터미널 글자 크기"
}기본적으로 JetBrains 계열만 사용해서 그런지, 파일을 열 때 새 탭이 아니라 같은 탭으로 열리는게 내 기준, 불편했었다
그래서 파일을 열 때 기본적으로 새 탭으로 열리게 했고, VSCode의 버튼들 위치는 우측으로 옮겼다
이외에도 그냥 커스터마이징해서 몇개를 바꿔줬다
이 json 설정을 복붙해서 저장을 하면 VSCode가 바뀐다!
* 바꾸기 전
* 바꾼 후
- Extensions
VSCode는 기본적으로 Text Editor이고, 언어에 대한 Extension=확장(젯브레인 계열에서는 플러그인)을 설치해야 그제야 비로소 컴파일 등을 해서 IDE(통합 개발환경이라고 쓰고 개발툴이라 부른다)가 되는 것이다
.vscode/settings.json과 마찬가지로 파일이 생기는 구조이다
VSCode에서 레고블럭같은 모양의 아이콘을 클릭하자
사용하고 싶은 익스텐션을 검색해보자: Live Server
이후에 톱니바퀴를 눌러서 맨 아래의 < 작업 영역에 추가 권장 사항 >을 눌러보자
그럼 .vscode폴더 밑에 extensions.json이 생기면서 recommendations에 배열 형태로 뭔가가 추가된 것을 볼 수 있다
{
"recommendations": [
"ritwickdey.liveserver"
]
}리스트에 추가되는 것은 식별자명이 된다
이런 방식으로 추천 플러그인을 추가해보자
나의 경우 Vue3, TypeScript로 개발을 하기 때문에 뷰 개발에 필요한 익스텐션들을 추가했다
그리고 버전이 맞지 않아서 설치되게 하고 싶지 않은 익스텐션이 있을 것이다
Ex) Version A에서는 좋은 Extension이었지만, Version B에서는 올바르게 작동을 하지 않는다던지, Extension X와 Y와 충돌을 일으킨다던지 할 때
이런 경우에는 "unwantedRecommendation": [ 식별자 ]에 추가하면 된다
Vue의 경우 Vue3를 사용할때는 Volar를, Vue2에서는 Vetur를 쓰기 때문에 두 개의 Extension이 깔려있으면 올바른 vue3코드이더라도, 경고 혹은 에러를 내뿜는다...
그래서! 내가 쓰는 extensions들의 목록은 이렇게 된다
{
"recommendations": [
"Vue.volar",
"Vue.vscode-typescript-vue-plugin",
"misterj.vue-volar-extention-pack",
"jock.svg",
"simonsiefke.svg-preview",
"ctcuff.font-preview",
"redhat.vscode-yaml",
"mikestead.dotenv",
"shd101wyy.markdown-preview-enhanced",
"christian-kohler.path-intellisense",
"huizhou.githd",
"eamodio.gitlens",
"arturock.gitstash",
"waderyan.gitblame",
"mhutchie.git-graph",
"codezombiech.gitignore",
"donjayamanne.githistory",
"donjayamanne.git-extension-pack",
"felipecaputo.git-project-manager",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"rvest.vs-code-prettier-eslint",
"usernamehw.errorlens",
"formulahendry.auto-close-tag",
"formulahendry.auto-rename-tag",
"ms-vscode.remote-server",
"ms-vscode-remote.remote-ssh",
"ms-vscode-remote.remote-ssh-edit",
"ms-vscode.remote-explorer",
"ms-vscode-remote.vscode-remote-extensionpack",
"pkief.material-icon-theme",
"zhuangtongfa.material-theme",
"ms-ceintl.vscode-language-pack-ko",
"ms-playwright.playwright",
"pflannery.vscode-versionlens",
"jasonnutter.search-node-modules",
"eriklynd.json-tools",
"quicktype.quicktype",
"mariusalchimavicius.json-to-ts",
"bmalehorn.print-it",
"digoro.clipboard",
"pnp.polacode",
"idanp.smartmulticursor",
"huangbaoshan.comment-aligner",
],
"unwantedRecommendations": [
"octref.vetur",
"hookyqr.beautify",
"dbaeumer.jshint",
"philnash.ngrok-for-vscode",
"ms-vscode.vscode-typescript-tslint-plugin"
]
}중간중간에 엔터를 친 것은 구분을 위한 것이다
어떤 extension들은 사용할 수 있는 키가 정해져 있는데, 그런 경우 사용법을 다 외우기가 힘들다
그렇기 때문에 나는 settings-desc.json처럼 extension-desc.json을 만들었다
{
"recommendations": {
"Vue plugins": [
{"Vue.volar": {"name": "vue3 language feature", "desc": "Vue language Support Extension", "usage": ""}},
{"Vue.vscode-typescript-vue-plugin": {"name": "typescript vue plugin(volar)", "desc": "Ts Vue Plugin(Volar)", "usage": ""}},
{"misterj.vue-volar-extention-pack": {"name": "Vue Volar extension Pack", "desc": "Vue Volar(Vue3) 관련된 패키지들 설치", "usage": ""}}
],
"File plugins": [
{"jock.svg": {"name": "SVG", "desc": "A Powerful SVG Language Support Extension", "usage": ""}},
{"simonsiefke.svg-preview": {"name": "Svg Preview", "desc": "Live editing of svg files and svg's inside files", "usage": ""}},
{"ctcuff.font-preview": {"name": "Font Preview", "desc": "OTF, TTF, TTC, WOFF, WOFF2 글꼴들에 대한 미리보기를 지원", "usage": ""}},
{"redhat.vscode-yaml": {"name": "YAML", "desc": "comprehensive YAML Language support", "usage": ""}},
{"mikestead.dotenv": {"name": "DotENV", "desc": ".env file syntax highlight", "usage": ""}},
{"shd101wyy.markdown-preview-enhanced": {"name": "Markdown Preview Enhanced", "desc": "Markdown file preview", "usage": "cmd + K, V / 파일 우상단 Markdown preview button"}},
{"christian-kohler.path-intellisense": {"name": "Path Intellisense", "desc": "Visual Studio Code plugin that autocompletes filenames", "usage": ""}}
],
"Git plugins": [
{"huizhou.githd": {"name": "Git History Diff", "desc": "view git history, commit details, diff of committed files, git blame info, stash details.", "usage": "마우스 우클릭 -> GitHD: ..."}},
{"eamodio.gitlens": {"name": "GitLens", "desc": "GitLens is an open-source extension for Visual Studio Code", "usage": ""}},
{"arturock.gitstash": {"name": "Git Stash", "desc": "smart control git stash", "usage": "소스 제어 -> STASHES"}},
{"waderyan.gitblame": {"name": "Git Blame", "desc": "show current selected line git status", "usage": ""}},
{"mhutchie.git-graph": {"name": "Git Graph", "desc": "view a Git Graph of your repository", "usage": "vscode의 맨 아래줄에 Git Graph Icon"}},
{"codezombiech.gitignore": {"name": "gitignore", "desc": "local file to .gitignore", "usage": "cmd + shift + P => Add gitignore"}},
{"donjayamanne.githistory": {"name": "Git History", "desc": "view and search git log along with the graph and details", "usage": "File 우클릭 후 Git: View File History"}},
{"donjayamanne.git-extension-pack": {"name": "Git Extension Pack", "desc": "Git과 관련된 패키지들 설치(Git History, Project Manager, GitLens, gitignore, Open in github)", "usage": ""}},
{"felipecaputo.git-project-manager": {"name": "Git Project Manager", "desc": "allows you to open a new window targeting a git repository directly from VSCode window", "usage": ""}}
],
"Syntax & Pretty plugins": [
{"dbaeumer.vscode-eslint": {"name": "ESLint", "desc": "js, ts syntax check", "usage": ""}},
{"esbenp.prettier-vscode": {"name": "Prettier - Code formatter", "desc": "It enforces a consistent style by parsing your code and re-printing it with its own rules", "usage": ""}},
{"rvest.vs-code-prettier-eslint": {"name": "Prettier ESLint", "desc": "A Visual Studio Code Extension to format JavaScript and TypeScript code using the prettier-eslint package", "usage": ""}},
{"usernamehw.errorlens": {"name": "Error Lens", "desc": "파일을 진단해서 에러가 있는 부분을 화면에서 inline으로 보여줌", "usage": ""}},
{"formulahendry.auto-close-tag": {"name": "Auto Close Tag", "desc": "자동으로 close tag 생성", "usage": ""}},
{"formulahendry.auto-rename-tag": {"name": "Auto Rename Tag", "desc": "자동으로 close tag 이름 변경", "usage": ""}}
],
"Remote Plugins": [
{"ms-vscode.remote-server": {"name": "Remote - Tunnels", "desc": "lets you connect to a remote machine, like a desktop PC or virtual machine (VM), via a secure tunnel", "usage": ""}},
{"ms-vscode-remote.remote-ssh": {"name": "Remote - SSH", "desc": " lets you use any remote machine with a SSH server as your development environment", "usage": "cmd + shift + P => remote-ssh"}},
{"ms-vscode-remote.remote-ssh-edit": {"name": "Remote - SSH: Editing Configuration Files", "desc": "lets you use any remote machine with a SSH server as your development environment", "usage": ""}},
{"ms-vscode.remote-explorer": {"name": "Remote Explorer", "desc": "let you use any remote machine as your development environment", "usage": ""}},
{"ms-vscode-remote.vscode-remote-extensionpack": {"name": "Remote Development", "desc": "WSL, Dev Containers, Remote - SSH, Remote - Tunnels 4개 묶인 설치", "usage": ""}}
],
"Theme Plugins": [
{"pkief.material-icon-theme": {"name": "Material Icon Theme", "desc": "Material Theme icon", "usage": ""}},
{"zhuangtongfa.material-theme": {"name": "One Dark Pro", "desc": "Atom's iconic One Dark theme", "usage": ""}}
],
"Language Plugins": [
{"ms-ceintl.vscode-language-pack-ko": {"name": "Korean Language Pack for Visual Studio Code", "desc": "VSCode 한국어 팩", "usage": ""}}
],
"Test Plugins": [
{"ms-playwright.playwright": {"name": "Playwright Test for VS Code", "desc": "integrates Playwright into your VS Code workflow", "usage": ""}}
],
"Version Plugins": [
{"pflannery.vscode-versionlens": {"name": "Version Lens", "desc": "check pakcage.json version", "usage": "package.json 파일에서 우측 위 V버튼 클릭"}},
{"jasonnutter.search-node-modules": {"name": "Search node_modules", "desc": "Quickly navigate and open files in node_modules by traversing the folder tree", "usage": "cmd + shift + P => search node_modules"}}
],
"JSON Plugins": [
{"eriklynd.json-tools": {"name": "JSON Tools", "desc": "Tools for manipulate JSON. You can pretty/minify JSON", "usage": "압축: option + M / Pretty: cmd + option + M"}},
{"quicktype.quicktype": {"name": "Paste JSON as code", "desc": "Interactively generate types and (de-)serialization code from JSON, JSON Schema, and TypeScript", "usage": "https://app.quicktype.io/"}},
{"mariusalchimavicius.json-to-ts": {"name": "JSON to TS", "desc": "Convert JSON object to typescript interfaces", "usage": "cmd + shift + P => Json to ts"}}
],
"Log Plugins": [
{"bmalehorn.print-it": {"name": "Print it", "desc": "Add print statements in one keystroke!, 설정 변경해서 사용 권장[TS: console.info('{{escaped}}', {{raw}}) ]", "usage": "option + ["}}
],
"ETC Plugins": [
{"digoro.clipboard": {"name": "Clipboard", "desc": "Simply Clibboard like jetbrain clipboard", "usage": "cmd + x/cmd + c => cmd + shift + v"}},
{"pnp.polacode": {"name": "Polacode", "desc": "코드를 폴라로이드 사진처럼 보여준다", "usage": "cmd + shift + P => polacode"}},
{"idanp.smartmulticursor": {"name": "Smart Multi-cursor", "desc": "multi line cursor", "usage": "선택: cmd + opt + 위/아래, 삭제: cmd + u"}},
{"huangbaoshan.comment-aligner": {"name": "comment aligner", "desc": "주석 세로 정렬(시작줄 맞춤)", "usage": "cmd + shift + P => keyboard shortcut. extension.commentaligner의 단축키를 ctrl + cmd + [로 지정 후 lines 셀렉 후 단축키 사용"}}
]
},
"unwantedRecommendations": {
"Deprecated Plugins": [
{"octref.vetur": {"name": "Vetur", "desc": "Vue 2 editor support plugin", "usage": "deprecated"}},
{"hookyqr.beautify": {"name": "Beautify", "desc": "js-beautify for VS Code", "usage": "deprecated"}},
{"dbaeumer.jshint": {"name": "jshint", "desc": "Integrates JSHint into VS Code", "usage": "deprecated"}},
{"ms-vscode.vscode-typescript-tslint-plugin": {"name": "TSLint", "desc": "TSLint support for VScode", "usage": "deprecated"}}
],
"ETC Plugins": [
{"philnash.ngrok-for-vscode": {"name": "ngrok for VSCode", "desc": "for controlling ngrok from the command palette", "usage": ""}}
]
}
}그리고 이 -desc.json파일들은 굳이 프로젝트 파일로 올릴 필요가 없다고 생각을 해서 .gitignore에 추가를 했다
.gitignore에서
!의 의미는 포함한다는 의미이다. 결국 .vscode아래의 모든 파일은 포함하지만
extensions.json과 settings.json은 제외하고 버전 관리를 하겠다는 뜻이 된다
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
!.vscode/settings.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.history그럼 이 extensions.json를 저장해놓고 다른 누군가가 vscode를 새로 설치해서 이 프로젝트를 다운받았다면, 설치되지 않은 extension들이 깔리고, 깔리지 말아야 할 extension들은 설치되지 않을 것이다!
다음은 유용한 extension들의 usage를 설명하거나 eslint, prettier셋팅법에 대해서 포스팅해볼까 한다
끝
320x100
댓글