• 김정환님 영상을 보고 정리한 내용

단축키

• Ctrl Shift \
  • Go to Bracket
  • 현재 커서를 포함하는 괄호로 이동한다

• F12
  • Go to Definition

• Alt F12
  • Peek Definition

• Ctrl 0
  • Focus into Side Bar

• Ctrl Shift .
  • Focus Breadcrumbs

• Ctrl T
  • Go to Symbol in Workspace
  • #

• Ctrl Shift O
  • Go to Symbol in Editor
  • @

참고

• https://youtu.be/_QCNqV_EfzE

• 프로젝트 루트 경로를 / 로 표현하고 싶은데, 방법이…

1
2
3
4
5
6
7
8
9
10
11
12

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      //Assuming your components/utilities live in ./src
      //Update this path as necessary
      "/*": ["./*"]
    }
  },
  //Add any build/compiled folders here to stop vscode searching those
  "exclude": ["node_modules", "build"]
}

• 프로젝트 루트 경로에 jsconfig.json을 생성하고 내용을 위처럼 한다

• 이렇게 내가 지정한 대로 참조가 되는 것을 확인할 수 있다
• 참고로, 위 opt디렉터리는 내 프로젝트 루트에 있는 디렉터리이다

활용한 곳

• sam project에서 공통 모듈을 layer로 빼는데,
• layer로 뺀 공통 모듈을 임포트 할 때 상대 경로를 사용하기 껄끄러운 문제가 있었다

• 로컬에서 개발할 때는 상대 경로로 개발하다가 (자동완성 위해)
• 람다를 배포할 때에, 배포하기 전에 절대 경로로 바꿔준다거나 하는 귀찮은 과정이 있었는데
• jsconfig로 절대 경로를 사용해 내가 만든 공통 모듈을 임포트 해서 사용하니까
• 그런 귀찮은 과정을 하지 않을 수 있었다

참고

• https://nimblewebdeveloper.com/blog/absolute-alias-imports-in-javascript-vscode

1
2
3
4
5
6
7
8
9

{
  // ...
  "paths": {
    "/*": ["./*"],

    // 이런것도 된다
    "@hello/*": ["./src/*"]
  }
}

• Format Document 로 .sql 포맷팅하기

• https://marketplace.visualstudio.com/items?itemName=adpyke.vscode-sql-formatter
• sql-formatter 확장도구 설치

1
2
3
4
5
6
7
8
9
10

{
  // ...

  "[sql]": {
    // 방금 설치한 익스텐션을 통해 포맷팅하도록
    "editor.defaultFormatter": "adpyke.vscode-sql-formatter"
  },
  // sql 키워드(select, from 등)를 대문자로 자동 치환해줌
  "sql-formatter.uppercase": true
}

• 위처럼 세팅해주고 Format Document 명령을 실행하면 잘 동작하는 것을 확인할 수 있다

참고

• https://marketplace.visualstudio.com/items?itemName=adpyke.vscode-sql-formatter

• 마크다운에서는 여러 라인 범위를 포맷팅하지 않도록 설정할 수 있다
• formatOnSave 를 사용해서 내용이 많은 마크다운을 저장할 때, 이미 포맷팅이 잘 되어있더라도
• 좀 오래걸리는 느낌이 있었다
• 그래서 포맷팅을 무시하는 설정을 알아보았다
• 기분탓인지 몰라도 쫌 빨라진 것 같다..?

markdown perttier ignore

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- prettier-ignore -->
Do   not    format   this

format this

<!-- prettier-ignore-start -->
| MY | AWESOME | AUTO-GENERATED | TABLE |
|-|-|-|-|
| a | b | c | d |
<!-- prettier-ignore-end -->

| MY  | AWESOME | AUTO-GENERATED | TABLE |
| --- | ------- | -------------- | ----- |
| a   | b       | c              | d     |

js perttier ignore

1
2
3
4

// prettier-ignore
let a=1

let b = 2;

• js 에서는 한개의 라인을 포맷하지않도록 설정할 수 있다

1
2
3
4
5
6

let c = [1, 2, 3];

let c = [
  //  <-- 주석 넣으면 펼쳐짐
  1, 2, 3,
];

• 중간에 주석을 넣어서 펼쳐지게 포맷팅할 수 있다

참고

• Ignoring Code · Prettier

• 동일한 vscode 설정을 여러컴퓨터에 쉽게 동기화할 수 있다
• github 아이디만 있으면된다
• vscode setting, 확장도구 까지 모두 동기화할 수 있다

Settings Sync

• Settings Sync 확장도구를 설치한다
• 깃허브에 로그인하고 사용한다
• F1 > Sync: Update/Upload Settings 로 현재 세팅을 업로드한다
• 동기화하고싶은 다른 컴퓨터에서 F1 > Sync: Download Settings 를 실행해 다운로드한다

참고

• Settings Sync

cas→ console alert method console.assert(expression, object)
ccl→ console clear console.clear()
cco→ console count console.count(label)
cdb→ console debug console.debug(object)
cdi→ console dir console.dir
cer→ console error console.error(object)
cgr→ console group console.group(label)
cge→ console groupEnd console.groupEnd()
clg→ console log console.log(object)
clo→ console log object with name console.log(‘object :>> ‘, object);
ctr→ console trace console.trace(object)
cwa→ console warn console.warn
cin→ console info console.info
clt→ console table console.table
cti→ console time console.time
cte→ console timeEnd console.timeEnd

• clg 를 치고 tab키를 console.log가 자동완성된다
• 이밖에도 import from 자동완성 등 여러가지가 있다
• ~ snippet 익스텐션을 깔면 사용할 수 있다
• 나는 다양한 스니펫을 제공하는 ES7 React/Redux/GraphQL/React-Native snippets 익스텐션을 설치해서 사용하고 있다

참고

• JavaScript (ES6) code snippets
• ES7 React/Redux/GraphQL/React-Native snippets

1
2
3
4
5
6
7
8
9
10
11
12

[
  // ...
  {
    "key": "ctrl+shift+j",
    "command": "terminal.focus"
  },
  {
    "key": "ctrl+shift+j",
    "command": "workbench.action.focusActiveEditorGroup",
    "when": "terminalFocus"
  }
]

• 나는 위처럼 키바인딩을 해놨다
• Open keyboard Shortcuts (JSON) 으로 들어가 설정한다

• 가끔은 탐색에 포커스가 가있는 경우도 있는데, 이때에 에디터로 포커스하려면
• ctrl + 1, ctrl + 2 등 ctrl + 숫자 키로 코드 에디터에 포커스를 맞출 수 있다

참고

• switch-focus-between-editor-and-integrated-terminal-in-visual-studio-code

Ctrl + Shift + P
F1

• F1 키로도 명령창을 열 수 있다

• Shell launcher 라는 확장프로그램을 통해 쉽게 다른 종류의 터미널을 열 수 있다
• 설치하면 바로 사용가능하다

• 윈도우 cmd를 쓰다가 리눅스 bash 명령어를 쓸일이 있어서
• git bash 터미널을 열어 쓰는데 불편함이 느껴졌다
• 기존에는 디폴트 터미널을 설정하고 터미널을 새로열면 해당 터미널을 사용할 수 있었는데,
• 디폴트 터미널을 변경되어서 다시 원래 쓰던 터미널로 돌렸어야했다
• 이제 그런 귀찮은 과정을 하지않아도 된다

참고

• how-to-add-multiple-terminals-in-vs-code
• Shell launcher

• 와… 진짜 너무 편하다
• 기존에 탭키를 누르면 탈출이 안되고, 들여쓰기 되서 힘들었는데
• 이 확장도구를 활성화하면 탭키로 () {} [] `` 이런 bracket? 들을 손쉽게 탈출할 수 있다

TabOut

• 설치하면 자동으로 active 상태이다
• Ctrl + Shift + P 에서 toggle tabout으로 활성여부를 토글할 수 있다

참고

• TabOut
• Request for tabbing past matching brackets similar to VS · Issue #22864 · microsoft/vscode