본문 바로가기

웹언어/코딩에디터사용법

[VS CODE] VS CODE의 외부 JS문서에서 제이쿼리 자동완성기능 추가

728x90
반응형

- html문서에 직접 제이쿼리 플러그인을 연결하고 제이쿼리언어를 치면 자동완성 기능이 실행됩니다.

 

## 예시 화면

자동완성으로 메서드들이 잘 뜨는 것을 확인 가능

 

 

 

 

 

 

- 하지만 외부 js문서를 빼고 작업하면 자동완성이 뜨지 않아 모두 코딩해야합니다.

 

## 예시화면

- 자동완성이 전혀 되지 않는 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

** VS CODE 외부JS문서에서 제이쿼리 자동완성하는 법!!!

 

1. node.js를 설치

- Node.js를 사용하면 서버에서 JavaScript를 실행할 수 있다.

 

## 다운로드 주소

https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

## 버전 선택

- 다운로드 받은 파일을 설치

- 현재는 14버전으로 되어 있는데 그것을 설치하세요!

 

 

 

 

## Node.js의 장점

- 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임

- 웹브라우저 환경이 아닌 곳에서도 자바스크립트를 이용한 연산이 가능

- 리액트 프로젝트를 준비하기 위해 필요한 webpack, babel 등의 도구들을 실행하는데에 사용

- 패키지 매니저 도구인 npm이 자동 설치

- npm으로 수 많은 개발자가 만든 패키지(재사용가능한 코드)를 설치하고 관리할 수 있음

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. npm init

- npm을 한번도 사용해본적 없는 개발자라면 vs code 터미널에서 아래 명령어를 작성합니다.

 

npm init

 

 

## 명령어 작성화면

- 위에서 처럼 [터미널]-[새터미널]에서 터미널을 연 후 명령어를 작성하고 설정을 쭉 작성합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

3. npm에 제이쿼리 작성 명령어 작성

- 자동완성될 코드를 터미널에 연결

 

npm install @types/jquery --save 

 

 

## 명령어 작성화면

- 터미널에서 명령어 작성 후 엔터를 치시면 됩니다.

 

 

 

 

 

 

 

 

 

 

4. 외부 js문서에서 테스트

- 이벤트가 자꾸 밑줄이 그어지지만 메서드들이 뜨는 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

728x90
반응형