vscode익스텐션 / 단축키와 맥단축키

VSCODE 익스텐션

기타

Korean Language Pack for Visual Studio Code
Prettier - Code formatter (프리티어는 포맷터다. 코드를 깔끔하게 해주는 역할)
Auto Rename Tag
Doxygen Documentation Generator
Todo Tree
Live Server (Five Server)
Markdown Preview Github Styling
Pretty TypeScript Errors (타입스크립트 에러메세지 보기좋게 해줌)
Error Lens (에러와 경고메세지를 소스오른쪽에 보여줌)
Indent-Rainbow
Dev Containers
Dcoker

HTML/CSS/JS

CSS Peek
HTML CSS Support
ESLint ( JS의 린트이다. 포맷터와는 다르게 문법의 오류가 있을법한 부분을 지적해준다. 포맷터도 포함되어있긴하다)
JavaScript (ES6) code snippets
stylus
Pretty TypeScript Errors

주의사항

eslint (린트/포맷터) 와 Prettier(포맷터)는 충돌할수있다. 그 경우에 아래의 플러그인을 설치한다

eslint-config-prettier : eslint에서 prettier와 충돌할 수 있는 rule을 꺼버림 (추천) ✅

코드 오류를 잡는데는 eslint, 코드 포맷팅에는 prettier를 사용하는 방법이다.
eslint-plugin-prettier : prettier를 eslint의 rules로 동작하게 함 (비추천)

포맷팅 문제도 오류로 출력되어서 오류 메시지가 지나치게 많아지며 느리다.

GIT

Git Graph
Git History ( 맥 단축키 option + H )
GitLens — Git supercharged

VUE

Vetur
Vue VSCode Snippets

PHP

PHP Debug
PHP Intelephense
PHP Server

Laravel

Laravel Artisan
Laravel Intelephense
Laravel Snippets

Python

Pylance
Python
Python Debugger

SQL

SQLite

PHP Intelephense설치 후 setting.json에 아래와 같이 설정하면 파일 저장시 자동 포맷팅해준다

{
    "[php]": {
        "editor.formatOnSave": true
    }
}

VSCODE 단축키

단축키(맥)

⇧ ⌘ H (Shift + Ctrl + H) : 전체 검색
⌥ ⌘ F (Ctrl + H) : 바꾸기
⇧ ⌘ F (Shift + Ctrl + F) : 검색
⌘ ⇧ L(Cmd + Shift + L) : 선택한 단어 전체 선택

단축키(윈도우)

F9 : 해당라인 브레이크 포인트 지정

맥단축키

현재 열려있는 포트 리스트 확인

lsof -PiTCP -sTCP:LISTEN

lsof 명령어 상세

lsof: List Open Files의 약어로, 열린 파일의 목록을 출력하는 명령어입니다. (리눅스 & 맥 둘다 사용가능하므로 유용)
-P: port number를 숫자 형태로 출력합니다.
-i: 네트워크 소켓을 열린 파일 중에서 필터링합니다.
TCP: TCP 프로토콜을 사용하는 파일만 출력합니다.
s: 연결 상태를 지정합니다.
TCP:LISTEN: 현재 LISTEN 상태인 TCP 연결만 필터링합니다.

특정 포트 상태 확인

lsof -i :[3000]
특정 포트 종료

kill -9 [PID]
스타일없이 붙여넣기

Shift + Option + Command + V
프롬프트의 명령어 전부삭제

ctrl + u
맥에서 해당 서버의 포트가 열려있는지 확인

nc -zv [아이피번호] [포트번호]
굵게⌘ B
기울임꼴⌘ I
밑줄⌘ U
취소선Ctrl ⌘ K
강조표시Ctrl ⌘ H
전체화면 Ctrl ⌘ F
전체화면 이동 ctrl + 방향키
터미널에서 현재 단어 삭제 Ctrl + W ( 자주 사용)

참조

prettier / eslint

VSCODE 익스텐션

PHP Intelephense설치 후 setting.json에 아래와 같이 설정하면 파일 저장시 자동 포맷팅해준다

VSCODE 단축키

단축키(맥)

단축키(윈도우)

맥단축키

VSCODE 단축키

맥단축키