확장프로그램들

개발공부

vscode의 다양한 확장 프로그램 사용하기

Korean Language Pack for Visual Studio Code

vscode를 한국어로 변환해주는 확장 프로그램

맥북 기준으로 command+shift+P를 누르면 명령 팔레트를 불러올 수 있는데, config를 검색해 사용 가능한 명령 목록을 필터링한다. 표시 언어 구성 명령을 선택 후 ko로 선택

Debugger for Chrome

디버깅 시작을 누르고, Chrome 선택

메뉴바 - 디버그 - 구성 열기 - launch.json

1
2
3
4
5
6
7
8
9
10
11
12
{
 "version": "0.2.0",
 "configurations": [
   {
     "name": "Chrome",
     "type": "chrome",
     "request": "launch",
     "url": "http://localhost:3000",
     "webRoot": "${workspaceRoot}/src"
   }
 ]
}

이후 원하는 라인에 브레이크포인트를 걸어 원래 하던 방식으로 디버깅을 진행하면 된다.

ESLint

자바스크립트 문법 검사를 실행해주며, 에러 발생 코드는 아니어도 설정에 따라 에러처럼 보이도록 표기할 수 있다.

만약 vscode가 아닌 다른 에디터기에서 사용할 경우, .eslintrc 확장자를 가진 파일로 설정해주면 동작한다.

Prettier

자동으로 코드를 정리해주는 확장 프로그램. 설정 파일에서 Format On Save 부분에 체크를 할 경우, 저장 때마다 정해진 코드 스타일로 바꾸어 저장한다.

만약 vscode가 아닌 다른 에디터기에서 사용할 경우, .prettierrc 확장자를 가진 파일로 설정해주면 동작한다.

같이 보면 좋을 포스트

리액트 관련 크롬 확장 프로그램

react dev tools

hightlight updates 라는 기능으로 어떤 상태에 변화가 생기고, 어떤 요소가 해당 변화에 영향을 받는지를 알 수 있다.

Redux DevTools

리덕스 상태 및 자식 요소들에게 내려주는 props들 확인 가능