vscode - 확장

1. 기본

Prettier - Code formatter⭐
ESLint⭐
Live Server⭐
Image preview⭐
Svg Preview
indent-rainbow⭐
- 들여쓰기 한 부분에 무지개색으로 칠해줘서 들여쓰기가 명확하게 되서 가독성을 높여줌
cdnjs
Bracket Select⭐
- alt + a로 괄호 안의 문자열을 선택
Surround⭐
- 코드를 선택하고 ctrl + shift + T를 누르고 제어문을 선택하면 자동완성
Font Awesome Gallery
Project Manager⭐
project-tree
tldraw : 그림 그릴 떄

2. 번역

korToEng : 변수 지을 떄, ⭐
- Window : Ctrl + F12로 한 -> 영 번역
- MacOS : Cmd + F12
Google Translate
- 번역할 거 드래그하고, Ctrl + Shift + T누르면, 밑에 줄에 번역해줌
- 번역할 거 드래그하고, Shift + Alt + T누르면, 번역 결과 후보 단어 선택 뜸
- 설정에서 First Language를 zh-cn(중국어)에서 ko로 변경

3. 설정(User.setting.json)

3.1 주석 색 변경, 이탤릭체 해제

1/* 주석 색상, litalic font 해제 설정 */
2"editor.tokenColorCustomizations": {
3"textMateRules": [
4  {
5    "scope": [
6      "comment",
7      "comment.block",
8      "comment.block.documentation",
9      "comment.line",
10      "constant",
11      "constant.character",
12      "constant.character.escape",
13      "constant.numeric",
14      "constant.numeric.integer",
15      "constant.numeric.float",
16      "constant.numeric.hex",
17      "constant.numeric.octal",
18      "constant.other",
19      "constant.regexp",
20      "constant.rgb-value",
21      "emphasis",
22      "entity",
23      "entity.name",
24      "entity.name.class",
25      "entity.name.function",
26      "entity.name.method",
27      "entity.name.section",
28      "entity.name.selector",
29      "entity.name.tag",
30      "entity.name.type",
31      "entity.other",
32      "entity.other.attribute-name",
33      "entity.other.inherited-class",
34      "invalid",
35      "invalid.deprecated",
36      "invalid.illegal",
37      "keyword",
38      "keyword.control",
39      "keyword.operator",
40      "keyword.operator.new",
41      "keyword.operator.assignment",
42      "keyword.operator.arithmetic",
43      "keyword.operator.logical",
44      "keyword.other",
45      "markup",
46      "markup.bold",
47      "markup.changed",
48      "markup.deleted",
49      "markup.heading",
50      "markup.inline.raw",
51      "markup.inserted",
52      "markup.italic",
53      "markup.list",
54      "markup.list.numbered",
55      "markup.list.unnumbered",
56      "markup.other",
57      "markup.quote",
58      "markup.raw",
59      "markup.underline",
60      "markup.underline.link",
61      "meta",
62      "meta.block",
63      "meta.cast",
64      "meta.class",
65      "meta.function",
66      "meta.function-call",
67      "meta.preprocessor",
68      "meta.return-type",
69      "meta.selector",
70      "meta.tag",
71      "meta.type.annotation",
72      "meta.type",
73      "punctuation.definition.string.begin",
74      "punctuation.definition.string.end",
75      "punctuation.separator",
76      "punctuation.separator.continuation",
77      "punctuation.terminator",
78      "storage",
79      "storage.modifier",
80      "storage.type",
81      "string",
82      "string.interpolated",
83      "string.other",
84      "string.quoted",
85      "string.quoted.double",
86      "string.quoted.other",
87      "string.quoted.single",
88      "string.quoted.triple",
89      "string.regexp",
90      "string.unquoted",
91      "strong",
92      "support",
93      "support.class",
94      "support.constant",
95      "support.function",
96      "support.other",
97      "support.type",
98      "support.type.property-name",
99      "support.variable",
100      "variable",
101      "variable.language",
102      "variable.name",
103      "variable.other",
104      "variable.other.readwrite",
105      "variable.parameter"
106    ],
107    "settings": { "fontStyle": " " } // 주석과 키워드, 파라미터에 적용된 이탤릭 폰트스타일 해제
108  }
109],
110"comments": "##5b9463" // 주석 색상변경

3.2 괄호 색상

옵션에 bracket pair 다 키기 괄호 색상 커스터마이징

1{
2  "editor.bracketPairColorization.enabled": true,
3  "workbench.colorCustomizations": {
4    "editorBracketHighlight.foreground1": "##5caeef",
5    "editorBracketHighlight.foreground2": "##dfb976",
6    "editorBracketHighlight.foreground3": "##c172d9",
7    "editorBracketHighlight.foreground4": "##4fb1bc",
8    "editorBracketHighlight.foreground5": "##97c26c",
9    "editorBracketHighlight.foreground6": "##abb2c0",
10    "editorBracketHighlight.unexpectedBracket.foreground": "##db6165"
11  }
12}

3.3 전체 세팅

1{
2  "editor.accessibilitySupport": "on",
3  "prettier.printWidth": 100,
4  "editor.defaultFormatter": "esbenp.prettier-vscode",
5  "workbench.iconTheme": "material-icon-theme",
6  "audioCues.volume": 0,
7  "terminal.integrated.env.osx": {},
8  "window.zoomLevel": 0.5,
9  "autoprefixer.formatOnSave": true,
10  "editor.formatOnSave": true,
11  "audioCues.chatResponsePending": "off",
12  "audioCues.terminalCommandFailed": "off",
13  "audioCues.taskFailed": "off",
14  "audioCues.taskCompleted": "off",
15  "audioCues.onDebugBreak": "off",
16  "audioCues.notebookCellCompleted": "off",
17  "audioCues.notebookCellFailed": "off",
18  "audioCues.diffLineDeleted": "off",
19  "audioCues.diffLineInserted": "off",
20  "audioCues.diffLineModified": "off",
21  "audioCues.lineHasBreakpoint": "off",
22  "audioCues.lineHasError": "off",
23  "audioCues.lineHasFoldedArea": "off",
24  "audioCues.lineHasInlineSuggestion": "off",
25  "audioCues.noInlayHints": "off",
26  "workbench.colorTheme": "Catppuccin Macchiato",
27  // 이탤릭체 해제
28  "editor.tokenColorCustomizations": {
29    "textMateRules": [
30      {
31        "scope": [
32          "comment",
33          "comment.block",
34          "comment.block.documentation",
35          "comment.line",
36          "constant",
37          "constant.character",
38          "constant.character.escape",
39          "constant.numeric",
40          "constant.numeric.integer",
41          "constant.numeric.float",
42          "constant.numeric.hex",
43          "constant.numeric.octal",
44          "constant.other",
45          "constant.regexp",
46          "constant.rgb-value",
47          "emphasis",
48          "entity",
49          "entity.name",
50          "entity.name.class",
51          "entity.name.function",
52          "entity.name.method",
53          "entity.name.section",
54          "entity.name.selector",
55          "entity.name.tag",
56          "entity.name.type",
57          "entity.other",
58          "entity.other.attribute-name",
59          "entity.other.inherited-class",
60          "invalid",
61          "invalid.deprecated",
62          "invalid.illegal",
63          "keyword",
64          "keyword.control",
65          "keyword.operator",
66          "keyword.operator.new",
67          "keyword.operator.assignment",
68          "keyword.operator.arithmetic",
69          "keyword.operator.logical",
70          "keyword.other",
71          "markup",
72          "markup.bold",
73          "markup.changed",
74          "markup.deleted",
75          "markup.heading",
76          "markup.inline.raw",
77          "markup.inserted",
78          "markup.italic",
79          "markup.list",
80          "markup.list.numbered",
81          "markup.list.unnumbered",
82          "markup.other",
83          "markup.quote",
84          "markup.raw",
85          "markup.underline",
86          "markup.underline.link",
87          "meta",
88          "meta.block",
89          "meta.cast",
90          "meta.class",
91          "meta.function",
92          "meta.function-call",
93          "meta.preprocessor",
94          "meta.return-type",
95          "meta.selector",
96          "meta.tag",
97          "meta.type.annotation",
98          "meta.type",
99          "punctuation.definition.string.begin",
100          "punctuation.definition.string.end",
101          "punctuation.separator",
102          "punctuation.separator.continuation",
103          "punctuation.terminator",
104          "storage",
105          "storage.modifier",
106          "storage.type",
107          "string",
108          "string.interpolated",
109          "string.other",
110          "string.quoted",
111          "string.quoted.double",
112          "string.quoted.other",
113          "string.quoted.single",
114          "string.quoted.triple",
115          "string.regexp",
116          "string.unquoted",
117          "strong",
118          "support",
119          "support.class",
120          "support.constant",
121          "support.function",
122          "support.other",
123          "support.type",
124          "support.type.property-name",
125          "support.variable",
126          "variable",
127          "variable.language",
128          "variable.name",
129          "variable.other",
130          "variable.other.readwrite",
131          "variable.parameter"
132        ],
133        "settings": { "fontStyle": " " } // 주석과 키워드, 파라미터에 적용된 이탤릭 폰트스타일 해제
134      }
135    ],
136    "comments": "#5b9463" // 주석 색상변경
137  },
138  "prettier.semi": false,
139  "prettier.jsxSingleQuote": true,
140  "prettier.singleQuote": true
141}

4. 코드편집

문(if, try)으로 감쌀려는 코드를 드래그한 후 Ctrl + Shipft + P 누르고, surround 검색
- if, try 문 등을 감쌀 떄(wrap) 사용
TODO Highlight
- 주석 쓸 떄 // TODO:, // FIXME:로 쓰면 하이라이트 해줌

5. 마크다운

6. 테마 및 아이콘

테마
- Atom Material Theme⭐
- Catppuccin for VSCode⭐
- One Dark Theme⭐
- One Monokai 80s Theme⭐
- Tokyo Night⭐
아이콘
- vscode-icons
- Material Icon Theme⭐
VSCode 왼쪽 네비게이션 아이콘 변경
- Fluent Icons⭐

7. HTML, CSS

Auto Rename Tag : 자동으로 태그 열고 닫고 해주는 확장툴
Auto Close Tag : HTML 같은 앞의 태그의 이름을 지정하면 뒤에 태그도 자동으로 바꿔주는 확장툴
HTML CSS Support
HTML End Tag Labels
HTML to CSS autocompletion : CSS 파일에서 HTMl의 class나 id에 이름을 띄워주는 확장 프로그램
px to rem & rpx & vw (cssrem)
Autoprefixer
CSS Navigation
- HTML 같은 파일에서 class에 적용된 CSS 속성으로 바로 이동하게 해주는 확장툴
- <Ctrl> + <마우스 클릭>을 하면 해당 CSS로 이동
- 예전에는 CSS Peek 썻음

8. JS

9. Git

10. React / Native

Auto Import ES6, TS, JSX, TSX
ES7+ React/Redux/React-Native snippets
- rfc : 함수형 컴포넌트 생성⭐
- rcc : 클래스형 컴포넌트 생성
- rsi : 화살표함수 컴포넌트 생성
- uses : useState 스니펫⭐
- 다른 Snippet 명령어

11. TailwindCSS

12. Styled-components

vscode-styled-components

13. C/C++

Clang-Format

13. 정신건강/재미

vscode-pets
- VScode 탐색기 밑에 VS Code Pets로 동물들보며 멘탈잡게 도와줌

Nextra를 이용해 블로그 만들기 vscode - 단축키 & 기능