20240118_TIL #19
[1] TIL
1. VScode Extension 추천
[code 수정, 자동 완성 관련]
(1) Auto Rename Tag
시작하고 닫히는 태그 동시에 수정 가능
(2) HTML CSS Suppor : id, class 자동완성
(3) ESLint
소스코드에서 오류를 알려줌.
협업시 code convention을 강제로 해줌
Human error 방지
(4) Highlight Matching Tag
: 태그 왼쪽에 세로선=> 어느 태그 안에 들어있는지
(5) Error Lens
(6) Firebase
: 자동완성
(7) Html tag wrapper
: tag 감쌀 때 사용
(8) JS code snippets:
console.table, console.clear, console.group
(9) Turbo Console Log
(10) Code Spell Checker : 영어 오타 잡아줌
(11) Pretty TypeScript Errors
: TypeScript 에러를 보기 좋게 보여줌
(12) Prettier-code formatter
: 저장 시 알아서 코드 정리
- 설정 -> format on save
(13) VScode Styled Components
Styled Component 자동 완성 => react 개발에 유용함.
(14) Quokka
- js 코드 짜기에 조금 수월해짐
- 코드 입력 시 결과값을 실시간으로 확인 가능
- autoplay : 코드 실행 순서 알려줌 (아마 유료?)
[시각적인 효과 관련]
(1) Color Highlight
Color code 색상 확인 가능
(2) Comment Anchors
주석, 문자열, 문서 등에 앵커 태그 배치 => 찾기 쉬움
(3) Vscode-icons
VScode 아이콘 예쁘게
(4) Material icon theme
파일, 폴더 아이콘 변경
(5) Material theme
VS code 테마 설정
(6) Xcode theme
테마 설정
[Git 관련]
(1) Git History
: git commit 이력 보여줌
(2) GitHub Actions : syntax highlighting
=> vercel에 배포하면 쓸 일 없음.
(3) GitLens
- 코난, 부검
- 코드에 커서 올리면 작성자, 커밋 메시지 등 표시됨.
💥 금단 💥
(4) GitHub Copilot
AI 비서, 유료
공부할 때는 비추
💥 금단 💥
(5) GitHub Copilot chat
chatGPT에서 코드 갖고옴
공부할 때는 비추
[기타]
(1) Env
API key처럼 숨겨야하는 것들 관리
(2) Korean Language Pack
편-안 vs 간지
(3) Live Server
로컬에서 실시간으로 확인 가능하도록
(4) Live Share
Notion처럼 실시간으로 코드 리뷰 가능, 협업에 좋음
(5) Markdown All in One
- Readme 작성할 때 좋음
- 한 눈에 잘 보이도록 만들어줌
(6) Next.nav
- url, component 구조를 도식으로 보여줌
- Next 공부할 때 좋음
(7) Npm intellisense
npm 모듈을 자동 완성
(8) Path intellisense
./ 경로 입력 시 자동입력 가능
(9) Polacode-2022
code capture할 때 좋음
최신 버젼 말고 2022를 설치해야한다고 함.
(10) WakaTime
순수 코딩한 시간을 알 수 있음.
(11) SVG
svg 코딩에 유용한 듯