[vscode] 나의 필수 extensions 모음

<필수>

• ES7+ React/Redux/React-Native snippets : rfce / rafce 등 사용

<도움>

• Auto Rename Tag: 시작 태그 또는 닫는 태그 중 하나를 수정하면 동시에 다른 한쪽 태그도 자동으로 수정됩니다.
• Color Highlight: 색상 코드가 있다면 코드에 색상을 배경으로 입혀서 보여줍니다.
• Error Lens: 에러에 마우스를 올리지 않아도 바로 옆에 에러를 표시해줍니다.
• indent-rainbow: 텍스트 앞의 들여쓰기에 색상을 지정해서 쉽게 구분할 수 있습니다.
• Material Icon Theme: 파일과 폴더에 아이콘이 생겨요!
• tabout: 탭을 눌러서 따옴표(이제 이 말이 어색함), 괄호들에서 빠져나갈 수 있습니다. 탭탭탭
• Tailwind CSS IntelliSense : tailwind 사용 시 자동완성
  
• vscode-styled-components : styled-components 사용 시 자동완성 (css는 왠만하면 있는 듯, 꼭 검색해봐야 함 ^0^)

 

<곂침 주의>

이름	설명	카테고리	비고
Palenight Theme	Palenight 테마를 설치합니다.	테마	현재 제가 사용하는 테마입니다.
Material Icon Theme	여러분의 파일 폴더 등 여러 아이콘을 Material Icon으로 변경 가능하도록 합니다.	아이콘 테마	현재 제가 사용하는 아이콘 테마입니다.
Code Spell Checker	vscode내에 단어들의 스펠링을 체크합니다. 만약 여러분이 movies라는 변수를 만들어야 하는데 오타로 movvies 라고 작성하면 movvies는 없는 영어단어기 때문에 경고 표시가 나타납니다.	유틸	오타를 줄여주는 정말 좋은 확장프로그램입니다.
ESLint	ESLint는 자바스크립트 코드에서 일관된 스타일을 유지하고 버그를 미리 찾을 수 있도록 도와주는 도구로, 코드를 정적으로 분석하여 문제점을 보고해줍니다.	유틸
highlight-icemode-select	원하는 단어를 선택시 다른파일에서도 하이라이트 기능을 지원합니다.	유틸	코드 오타를 빨리 확인 할 수 있습니다.
Prettier - Code formatter	코드를 일관된 스타일로 자동으로 정렬해 주는 코드 포맷터입니다.	유틸	필수 프로그램입니다! 설치 후 기본 설정으로 이용해도 됩니다. [포메터 설정] F1 누른 후 “format document with” 검색 후 엔터 → prettier 선택 후 엔터 [포멧 적용] F1 누른 후 “format document” 검색 후 엔터 누르면 → 현재 열린 코드에 정렬 및 다른 포멧형식이 자동으로 지정됨
REST Clinet	개발자가 VSCode 내에서 직접 HTTP 요청을 생성, 보내고 응답을 확인할 수 있게 해주는 도구입니다.	API, 유틸	postman 이나 Thunder Client로 대체 가능 이 확장 프로그램은 차후에 또 간단히 소개를 해드리겠습니다.
GitHub Copilot	AI를 활용하여 코드를 작성하는 과정에서 실시간으로 코드 완성을 제안해주는 도구입니다.	AI, 유틸	아주 유명한 프로그램이죠 전 설치는 하였지만 disable시켜서 사용하지는 않고있습니다. 관심있으신분들은 설치하고 한번 테스트 해보면 좋을 거 같네요.
Tabnine AI Autocomplete for Javascript, Python	인공지능을 활용하여 자바스크립트와 파이썬 코드 작성 시 자동 완성 기능을 제공합니다.	AI, 유틸	github copilot과 비슷한 프로그램입니다. 이것도 사용하다가 현재는 disable시켰습니다. 코드 생산성에는 도움이 많이됩니다만 예전에 zep(게더타운비슷한 프로그램)사용시 같이 사용하니 cpu사용률이 너무 높아져서 현재는 사용하지 않습니다.
Code GPT	vscode내에서 chatgpt에 접속해서 질문, 코드리펙토링, 테스트코드 등을 수행할 수 있습니다.	AI, 유틸	저는 설치하였지만 그냥 chatGPT사이트를 이용하고있습니다.
Parameter Hints	함수를 호출할 때 매개변수에 대한 실시간 힌트를 제공하여 코드 작성을 돕는 도구입니다.	유틸	함수의 매개변수내용을 코드화면에 표시하여서 좋은 기능입니다. 현재는 파라미터로 인해서 제가 코드 작성할 때 가독성(라인이 길어져서)이 조금 안 좋다고 판단하여 사용하지는 않습니다. 하지만 여러분들은 설치하시면 함수에 어떤 인자를 넣어야 할지 힌트가 나오기 때문에 유용할 수 있습니다.
GitLens — Git supercharged	코드의 변경 이력, 누가 언제 작성했는지 등 Git 정보를 자세하게 볼 수 있게 돕는 도구입니다.	git, 유틸
Error Lens	vscode에서 에러가 발생시 코드 에디터 창에서 바로 에러 내용을 보여줍니다.	유틸
Atom One Dark Theme	아톰에디터 테마를 설치합니다..	테마
Material Theme	Material 테마를 설치합니다.	테마
Auto Close Tag	html 작성시 <h1>등 태그를 작성시 닫는 태그를 자동으로 작성해줍니다.	html
Auto Rename Tag	html 수정시 <h1>등 태그를 p태그로 바꾸면 뒤에 닫는 태그도 자동으로 변경해줍니다.	html
Bracket Pair Colorization Toggler	소괄호 중괄호 대괄호 등의 괄호들을 짝에맞게 색깔을 지정해줍니다.	유틸
EJS language support	VSCode에서 EJS(Embedded JavaScript) 템플릿 구문을 이해하고, 구문 강조, 스니펫, 닫는 태그 자동 완성 등의 편리한 기능을 제공하는 확장 프로그램입니다	유틸	node 배우면서 템플릿엔진을 ejs로 설정하신다면 이 확장프로그램을 까시는게 좋습니다.