VSCODE 설정 및 extension 설치

1. Material Theme

VSCODE 테마(색상)를 변경해준다.
테마에 관한 다양한 extension들이 있지만, 기존부터 써왔고 크게 불만 없어서 계속 사용하기로 했다.

📝 setting.json 설정값

"workbench.colorTheme": "Material Theme Darker High Contrast"

2. Prettier

code를 formatting해주는 편안한 툴
설치 후 따로 설정을 해주어야 한다.

📝 setting.json 설정값

  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.singleQuote": true

3. Material Icon Theme

Icon을 예쁘게 만들어준다.
기존부터 써오던 extension이라 이제 안 쓰면 약간 어색하다.

4. Indent-rainbow

code의 들여쓰기를 색상처리하여 가독성 있게 해준다.

5. HTML to CSS autocompletion

CSS를 작성할 때, HTML에서 설정한 class, id를 전달해준다. CSS 작성시 도움을 준다.
있다 없으니깐 조금 아쉬워서 설치하게 되었다.

6. CSS Peek

HTML에서 정의된 값(class.etc)을 ctrl(cmd)+click 해주면 해당 CSS로 이동해주는 유용한 extention이다.

7. HTML CSS surport

HTML에서 CSS의 자동완성을 이용할 수 있다.

8. Live Server

실시간으로 브라우져상 구현된 화면을 편하게 볼 수 있다.

9. Error Lens

기존에는 code spell checker extension을 사용하였는데, 한번 써보려고 설치해보았다.
VSCODE 상으로 오타, 괄호 실수 등 왠만한 오류는 실행 전에 미리 경고해준다.

10. Code Runner

별도의 처리 없이 VSCODE 상에서 코드를 실행시켜준다.
기존에 javascript 문서를 작성할 때 썼던 거 같은데 일단 설치해줬다.

11. Color Hightlight

VSCODE 상에서 color 값(#ccc #fff.etc)을 조금 더 직관적으로 보여준다. 그냥 예뻐서 설치했다.

12. Gitmoji

github에 commit할때 comment에 emoji를 삽입 할 수 있게 해준다.

13. Highlight Matching Tag

매칭되는 닫는 tag나 여는 tag를 강조해주는 extension이다. 가독성이 좋아진다.

14. Scss-lint

강의를 들으며 다운 받은 extension인데 scss 파일에서 설정해놓은 문법 오류를 표시해준다.
기억으로는 Ruby도 설치하고 이것저것 설정하느라 애먹었던 기억이 나지만, 아직 강의를 수강 중이므로 설치했다.

📝 setting.json 설정값

  "scssLint.configDir": ".",
  "scssLint.languages": ["sass", "scss"],
  "scssLint.runOnTextChange": true

15. intelliSense for CSS class names in HTML

🔍 기타 설정

❕ 스타트업 에디터 끄기

📝 setting.json 설정값

"workbench.startupEditor": "none"

❕ 주석 색깔 변경

주석 색깔을 가독성 있게 바꿔 준다.

📝 setting.json 설정값

"editor.tokenColorCustomizations": {
    "comments": "#00ff88"
  }

❕ 탭 사이즈 변경

📝 setting.json 설정값

"editor.tabSize": 2

❕ 오픈 모드 변경

파일을 한 번만 눌러도 열리면 여러모로 불편하다.

📝 setting.json 설정값

"workbench.list.openMode": "doubleClick"

❕ Auto Rename Tag

(21.11.10) VSCODE 자체에서 Auto rename tag 기능을 사용 가능하다.

📝 setting.json 설정값

"editor.linkedEditing": true

❕ Git Settings

git에 관련된 setting

📝 setting.json 설정값

"git.enableSmartCommit": true,
"git.confirmSync": false

❌ 보류 중인 Extension

Auto Close Tag Code Spell Checker docs-images ftp-simple Mithril Emmet PHP Debug PHP Intelephense SFTP

이번에 VSCODE를 초기화하면서 기존에는 설치하였지만 지금 환경에는 설치하지 않은 extension들이다.
그냥 쓰다가 불편하면 다시 설치해서 사용할 예정이다.

❌ 이제 필요없는 Extension

1. bracket pair colorize

'퉁퉁코닝'님의 이제 필요없는 Extension 영상

유용하게 쓰던 bracket pair colorizer 익스텐션을 이제 사용하지 않아도 된다.
visual studio code에서 21년 8월 자체 개발을 완료했다.

setting에서 bracket pair colorization을 검색 후 check 해주면 된다.

※ 따로 색상을 customizing 할 수 있다.

📝 setting.json 설정값

  "editor.bracketPairColorization.enabled": true

2. Auto Rename Tag

visual studio code에서 자체 개발을 완료했다.

📝 setting.json 설정값

  "editor.linkedEditing": true

출처 및 참고

'한의정'님의 VS Code 확장프로그램 추천 #1
'드림코딩'님의 웹개발을 위한 필수 익스텐션 10개 추천
'김버그'님의 UI 개발 부트캠프