• css를 조금 더 아름답고 일관되게 작성해보자
• 기본 prettier 포맷팅을 사용하면 들여 쓰기를 예쁘게 고쳐준다
• 그런데 규칙 없이 나열된 속성들을 일관되게 포맷팅을 하고 싶은 욕구가 생겨서 찾아보았다
• 이런 것들은 직접 하는 것보다는 도구의 도움을 받는 게 훨씬 좋다고 생각한다

prettier-plugin-style-order

• (참고) 나는 scss로 작업했다

1
2
3
4

yarn add -D prettier-plugin-style-order

// postcss-scss 도 인스톨 하라고 메시지가 나옴
yarn add -D postcss-scss

• 이렇게 패키지를 설치하고,
• fonmat on save 옵션이 켜져 있다면,
• 아무 css 파일에서 저장을 해보면 순서가 아름답게 정렬되는 것을 알 수 있다
• 기존에 작업하던 것들을 일괄적으로 포맷팅 하고 싶다면
• npm script에 prettier 명령어로 원하는 경로의 css파일들을 지정해서 일괄 포맷팅 한다
• "cssSort": "prettier --write src/**/*.scss"

생각

• 이전에는 항상 css를 주먹구구 중에서도 주먹구구로 작성해왔는데,
• 그러지 않을 수 있겠다

• css property order, css property sort 이런 식으로 검색을 했었는데
• stylelint 등 여러 가지 css를 정렬하는 도구들이 있는 것 같았다
• 그런데 prettier을 사용하고 있기 때문에, 다른 거 쓰지 말고 prettier에서 플러그인을 깔아서 해결해 보자 하여 prettier-plugin-style-order를 설치해서 사용해 보았다

참고

• https://9elements.com/css-rule-order/
• https://github.com/brandon-rhodes/Concentric-CSS/blob/master/style3.css
• https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/

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

단축키

• 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

1
2
3
4
5
6

{
  // (...)
  "emmet.includeLanguages": {
    "javascript": "javascriptreact" // <-- react에서도 emmet 사용가능하도록
  }
}

• settings.json에 추가한다

• 추가로 "emmet.triggerExpansionOnTab": true, 설정을 추가하면 tab키를 눌러 자동완성할 수 있다

참고

• VScode + React emmet 사용하기
• Learn Emmet In 15 Minutes - Double Your HTML Coding Speed

• 마크다운에서는 여러 라인 범위를 포맷팅하지 않도록 설정할 수 있다
• 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 키로도 명령창을 열 수 있다