개요

"VSCode React TypeScript"에서 구구하면 상당히 나오는데, 왠지, 내 환경이라면 잘 되지 않았습니다.

그래서 나 나름의 잘 가는 방법을 남겨 둡니다.
※Chrome, VSCode, Node.js는 인스톨 완료를 전제로 하고 있습니다.

내용

VSCode에 React+TypeScript 개발 환경을 구축하고,
디버깅 할 때까지 목표로합니다.

전제

프로젝트는 D:\Develop\react001 에 작성합니다.

절차

1. React 프로젝트 템플릿 생성

다음은 명령 프롬프트에서 실행됩니다.

명령 프롬프트

mkdir D:\Develop\react001
cd D:\Develop\react001
d:
npx create-react-app ./ --template typescript

다음과 같이 Happy hacking!이 표시되면 성공적으로 만들 수 있습니다.

2.eslint 설정

Eslint는 정적 분석 도구입니다.
위의 프로젝트 생성이 성공한 시점에서 eslint 설치가 완료되었으므로,
eslint를 초기화합니다.

명령 프롬프트

npx eslint --init
√ How would you like to use ESLint?
 → problemsを選択
√ What type of modules does your project use?
 → esmを選択
√ Which framework does your project use?
 → reactを選択
√ Does your project use TypeScript?
 → Yesを選択
√ Where does your code run?
 → browserを選択
√ What format do you want your config file to be in?
 → JavaScriptを選択
√ Would you like to install them now with npm?
 → Yesを選択

3.Prettier 로컬 설치

prettier는 소스 코드를 성형하는 도구입니다.
편리하므로 넣어 둡니다.

명령 프롬프트

npm install --save-dev --save-exact prettier

4.eslint-config-prettier 설치

Prettier와 Eslint는 싸우기 때문에 그것을 해결하는 도구를 넣습니다.

명령 프롬프트

npm install --save-dev eslint-config-prettier

5.eslint-config-prettier 구성 파일을 수정했습니다.

.eslintrc.json

    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
+       "prettier"
    ],

6.prettier 설정 파일 ".prettierrc"를 손으로 작성

D:\Develop\react002 아래에 생성한다.

.prettierrc

# 中身を下記にする。
+{
+  semi : true,
+}

7.VSCode 디버깅 설정

VSCode에서 디버깅을 위해 구성 파일을 만듭니다.

새 구성 파일

1.에서 만든 폴더를 VSCode에서 열기 → 실행 메뉴 → 구성 추가


Chrome을 선택.


launch.json 수정

launch.json이 열리므로 위와 같이 수정.

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
-           "url": "http://localhost:8080",
+           "url": "http://localhost:3000",
-           "webRoot": "${workspaceFolder}"
+           "webRoot": "${workspaceFolder}",
+           "sourceMaps": true,
+           "sourceMapPathOverrides": {
+               "webpack:///./*": "${webRoot}/src/*"
+           },
        }
    ]
}

8.prop-types 설치

TypeScript로 코딩하면 상당히 빠른 단계에서 매개 변수 검사 오류로 고민합니다.
그 때 설치가 필요하므로 이 단계에서 넣어 둡니다.

명령 프롬프트

npm install --save-dev prop-types

9. 디버그 실행

디버깅 전 준비 1

디버깅하기 전에 만든 프로젝트를 열고 중단 점을 늘린다.
왼쪽 도크의 탐색기 버튼 → App.tsx → 여섯 번째 줄에 중단 점


디버깅 전 준비 2

디버깅하기 전에 명령 프롬프트에서 "npm start"를 실행하십시오.


Compiled successfully!가 나오면 디버깅을 시작할 수 있습니다.
먼저 Chrome이 일어날 때가 있기 때문에, 그 때는 그 Chrome은, 일단 닫는다.


왼쪽 도크 실행 및 디버그 버튼 → 디버그 시작을 누릅니다.


이제 브레이크 포인트에 멈출 것입니다.


무사히 브레이크 포인트에서 멈췄다.
계속한다.


성공적으로 표시되었습니다.

10. 디버그 종료

종료할 때는 Ctrl+C로 종료하고 계속 표시하고 있는 Chrome을 닫으면 된다.


Ctrl+C를 누릅니다. → Y로 엔터로 종료.
Chrome은 열린 상태이므로 스스로 Close한다.

이상, 알면 간단했습니다.

❈
vscode에 하기 확장 기능도, 어쨌든 편리할지도.
・ES7 React/Redux/GraphQL/React-Native snippets
・Bracket Pair Colorizer 2