집 > 기사 > 웹 프론트엔드 > vs 코드를 사용하여 Nodejs 프로그램 개발을 위한 코드 공유

vs 코드를 사용하여 Nodejs 프로그램 개발을 위한 코드 공유

小云云원래의: 2018-02-07 11:31:521908검색

이 글에서는 주로 vs code를 사용하여 Nodejs 프로그램을 개발하는 방법을 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

최근에 nodejs를 다시 공부하게 되면서 경량 에디터를 선택하는데 고민을 하게 되었어요. .net 개발에 종사하면서부터 Microsoft에서 node js 개발을 위해 Visual Studio용 플러그인을 출시했는데, 사용하기 좋은 것 같아요. , 나는 아직도 이 편집기가 너무 크다고 느낍니다(한 번의 설치는 몇 G입니다)! webstore는 현재 Nodejs 개발에 가장 널리 사용되는 IDE 중 하나입니다. 인기의 이유는 물론 프로젝트 생성, 편집, 디버깅, 간단한 구성, 강력한 지능형 프롬프트가 통합된 Nodejs IDE의 통합 개발 환경 때문입니다. 앞서 말했듯이 저는 .net 개발을 해왔습니다. 마침 Microsoft가 이 편집기에 익숙해지기 위해 다양한 언어로 프로그램을 작성하고 디버깅할 수 있는 경량 텍스트 편집기인 vs code를 출시했습니다. , 후속 작업에 편리할 것이므로 이번에는 이 개발을 위한 편집기로 vs code를 선택했습니다(VScode는 Uedit 및 Noteplus와 같은 강력한 파일 편집기처럼 보이지만 확장 가능하고 강력한 프롬프트 기능도 제공합니다(특히 파일 Node.js 참조 프롬프트) 및 내장된 Nodejs 디버깅 기능으로 일반 편집 도구와 다름) 물론 Microsoft의 향후 전략과도 관련이 있습니다.

이 기사의 전제는 vs 코드를 설치했다는 것입니다! code editor 및 nodejs.Environment가 설치되어 있지 않다면 직접 다운로드하여 설치하세요!

1. Express를 사용하여 프로젝트 생성 [두 단계 모두 dos 모드에서 수행]

1. ! (이미 설치되어 있으면 무시하세요)

npm install -g express

2. 프로젝트 생성

프로젝트 생성(ExpressApp 폴더 생성)

express ExpressApp

Interlude: Linux 환경에 익숙하다면, 직접 만들 수 있습니다. 컴퓨터에 cmder를 설치하세요.(무엇인지 모르시면 Baidu로 가세요.) 이 명령줄 도구는 레이아웃이 아름답고 제가 사용하는 Mini 버전만큼 지루하지 않습니다. Linux에서 모든 기능을 경험하고 싶다면 정식 버전을 다운로드하세요.

3. 타사 패키지를 다운로드합니다.

(1) cmd 명령줄을 사용하여 프로젝트 디렉터리로 전환합니다.

cd d:\nodejs\ExpressApp

(2) 필요에 따라 package.json을 편집하고 다음 명령을 실행하여 설치합니다. third-party package

npm install

프로젝트 디렉토리에서 node_modules는 설치된 타사 패키지

ExpressApp
|– node_modules

(3) 프로젝트를 실행합니다

npm start

출력은 다음과 같습니다. 다음:

ExpressApp@0.0.0 start d:Nodejs_WorkspaceExpressApp
node ./bin/www
참고: npm start 명령은 자동으로 node ./bin/www

브라우저에 http://localhost:3000을 입력합니다. Express 시작 페이지에 액세스하려면

2. VSCode를 사용하여 Nodejs 개발

1. VSCode

code d:\nodejs\ExpressApp 
code.

로 Nodejs를 엽니다. 참고: 현재 프로젝트에서 ExpressApp.bat를 만들고 "code ."를 입력합니다. 이 파일을 사용하여 VSCode

2로 직접 Nodejs 프로젝트를 엽니다. 스마트 프롬프트 추가

VSCode로 Nodejs 프로젝트를 엽니다. 기본적으로 스마트 프롬프트는 없습니다.

(1) TypeScript 정의 관리자(TSD)를 사용하여 프로젝트에 필요한 tsd 파일을 다운로드합니다. VSCode에서 열 때 지능이 있습니다.
tsd를 전역적으로 설치합니다(이미 설치된 경우 무시).

npm install -g tsd

다운로드 필수 구성요소 팁(노드 다운로드, express, requirejs 팁을 예로 들어보세요)

tsd query node --action install
tsd query express --action install
tsd install require

참고:

①여러 프롬프트 구성요소는 쿼리 매개변수 뒤에 공백으로 구분할 수 있습니다. 약어는 tsd query node express –action입니다.

② 구성 요소 설치 프로젝트 디렉터리에 타이핑 폴더를 추가합니다

|– 타이핑
|– 노드
|– 익스프레스
|– 요구

(2) js 파일 참조에 대한 스마트 프롬프트 추가

파일이 다른 파일 common.js를 참조하면 파일 헤더는 다음과 같이 추가됩니다. 전구를 클릭하기만 하면 되며, 힘들게 작업할 필요가 없습니다. 이 구성 파일을 작성했습니다.)

이 구성은 코드가 ES5 표준을 준수하고 Commonjs 사양을 사용한다는 것을 의미합니다. 이 구성은 VScode에서 발행됩니다. 파일에서 참조된 js 파일이 필요하다는 지능형 프롬프트를 실현할 수 있습니다. (테스트할 때 이 구성이 없으면 스마트 프롬프트가 표시됩니다. 이유는 모르겠습니다.)

3. 디버깅

1. VSCode 스케줄링 구성 파일 생성

디버깅 패널을 클릭하고 실행(F5) 버튼, 오른쪽에 드롭다운 상자가 나타나면 "Node.js"

를 선택하세요. 그러면 launch.json 파일이 프로젝트 디렉터리

ExpressAppp

|–.vscode

|– launch에 생성됩니다. .json

필요에 따라 launch.json을 편집하고 시작 구성 항목을 수정할 수 있습니다

2. 중단점 만들기:

필요에 따라 중단점 만들기: js 파일 편집 영역의 왼쪽에 중단점이 추가/제거됩니다

3. Scheduling

디버깅 패널에서 실행을 클릭하거나 단축키 F5를 누르거나, 단일 단계 디버깅을 위해 F10을 누르세요!

실제로 이러한 내용은 Microsoft의 공식 문서에 포함되어 있습니다. 계획된 작은 세부 사항이나 단계는 개발자에게 보이지 않고 무시되므로 향후 개발에 일정한 영향을 미치므로 구성 요구 사항을 엄격히 따르십시오.

vs 코드를 사용하여 Nodejs 프로그램 개발을 위한 코드 공유

관련 기사