visual studio code+react 개발 환경 구축 과정 기반

개발 환경 windows
개발 도구 visual studio code
node 설치 및 npm
windows 설치 node 는node 홈 페이지에서 직접 다운로드 하여 일반 소프트웨어 로 설치 하면 된다.
설치 완료 되면 콘 솔 에서 node 테스트 를 실행 하여 win+r 입력cmd을 성공 적 으로 설 치 했 는 지,터미널 에 직접 입력node -v버 전 번 호 를 출력 하고 성공 적 으로 설치 되 었 는 지 확인 할 수 있 습 니 다.
현재 새 버 전의 node 자체 npm(npm 는 node 와 함께 설 치 된 패키지 관리 도구)입 니 다.node 를 설치 하고 설치 에 성공 한 후 콘 솔 에 계속 입력npm -v하여 설치 에 성 공 했 는 지 확인 할 수 있 습 니 다.같은 성공 으로 버 전 번 호 를 출력 합 니 다.
비 주 얼 스튜디오 코드 설치
vs code 정상 소프트웨어 설치 에 주의 할 필요 가 없 음,직접다운로드 설치
React 설치
문서 참조React JavaScript Tutorial in VS Code문 서 는 이미 상세 하 게 문서 에 따라 한 번 해 보면 거의 문제 가 없다.

로 컬 폴 더 를 만 듭 니 다.즉,항목 을 저장 하 는 폴 더 입 니 다.폴 더 아래 콘 솔 을 엽 니 다.git bash 를 사용 하여 폴 더 아래 에서 오른쪽 단 추 를 누 르 면 git bash 가 시작 되 는 것 을 찾 을 수 있 습 니 다

콘 솔 에 입력npm install -g create-react-appnpm 로 create-react-app 설치

create-react-app 를 설치 한 후 계속 입력create-react-app my-app하여 프로젝트 를 만 듭 니 다my-app는 만들어 진 React 프로젝트 입 니 다.잠시 기 다 려 야 합 니 다(의존 팩 을 다운로드 해 야 합 니 다).완 성 된 전체 파일 구 조 를 볼 수 있 습 니 다.

콘 솔 디 렉 터 리 를 프로젝트 디 렉 터 리 로 전환 하여 실행npm start현재 프로젝트 가 성공 적 으로 만 들 어 졌 는 지 확인 하 는 정상 적 인 상황 에서 명령 을 입력 하면 기본 브 라 우 저 미리 보 기 를 직접 엽 니 다.http://localhost:3000/ 이 때 react 페이지 가 보 입 니 다.

이로써 새로 만 든 React 프로젝트 는 정상적으로 실 행 될 수 있 습 니 다.
5.항목 폴 더 를 VS 코드 로 열 면 전체 파일 구 조 를 볼 수 있 습 니 다.

모든 파일 은 VS 코드 로 직접 수정 할 수 있 습 니 다.
Chrome 용 Debugger 설치
1.VS Code 는 Debugger for Chrome 플러그 인 을 제공 합 니 다.chrome 커 널 debug 를 사용 할 수 있 습 니 다.

직접 검색 해서 설치 하고 다시 불 러 오기 VS Code
2.Debugger for Chrome 을 사용 하여 debug 를 진행 하려 면 항목 을 추가 로 설정 해 야 합 니 다.

여기 서 시작 설정 을 설정 합 니 다.문서 원문 에서 말 한 것 은 새로운launch.json을 만 들 것 입 니 다.저 는launch.json파일 이 존재 하 는데 그 안에 설정 을 추가 하면 됩 니 다.여기에 설정 을 추가 하 는 단 추 를 누 르 면 설정 노드 를 직접 추가 할 수 있 습 니 다.이 안에 chrome 관련 노드 가 두 개 있 습 니 다.Launch 하나 Attach 가 있 습 니 다.

두 노드 를 만 든 후에"request": "launch"의 한 노드 에 url 이 있 습 니 다.이 url 을 이전 React 프로젝트 가 시작 한 url 로 설정 합 니 다.즉,http://localhost:3000/다른 설정 노드 는 기본 값 으로 문제 가 있 으 면 수정 할 수 있 습 니 다.수 정 된 모든 설정 은 다음 과 같 습 니 다.

{
    //    IntelliSense       。 
    //             。
    //        ，   : https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "node",
            "program": "${workspaceFolder}\\start"
        }
    ]
}

항목 시작npm start하고 debug 도구 모음 열기

이전에 추 가 된 chrome 노드 를 선택 하여 시작 합 니 다.이 때 새로운 chrome 페이지 를 엽 니 다.
프로젝트 소스 코드 종 류 를 찾 을 수 있 습 니 다index.js파일 에 정지점 을 두 고 줄 번호 앞에서 왼쪽 단 추 를 누 르 면 페이지 를 새로 고 칠 수 있 습 니 다.

이로써 간단하게 디 버 깅 을 진행 할 수 있 게 되 었 다.
eslint 설치
eslint 는 조립 가능 한 JavaScript 와 JSX 검사 도구 입 니 다.문법 오류 규범 코드 를 검사 하 는 데 사용 할 수 있 습 니 다.

콘 솔 에 입력npm install -g eslinteslint 설치

VS Code 를 통 해 eslint 플러그 인 설치

3.VS Code 명령 패 널 을 열 어 종 류 를 보 거나Ctrl+Shift+PESLint 를 입력 하여.eslintrc.json파일 을 만 드 는 옵션 을 찾 습 니 다.이 때 프로젝트 루트 디 렉 터 리 에 프로필 을 만 듭 니 다.이 때 프로젝트 에 있 는 문법 오류 가 자동 으로 검출 됩 니 다.

참고 문서 에는 분 호 를 설정 하 는 규칙 도 있 습 니 다.필요 한 것 은 추가 할 수 있 습 니 다.
visual studio code+react 개발 환경 구축 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vscode react 환경 구축 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!