728x90
Java를 작업하기엔 이클립스가 최적화되어 있지만 CSS나 HTML, JS 등을 작업할 때는 VSC의 extention을 사용하여 작업하는 것이 효율적이다.
아래의 순서만 따라하면 VSC에서 사용하고 이클립스로 자동 저장이 되어 매우 편리!
1. VSC 다운로드
https://code.visualstudio.com/download
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
2. VSC에 extention을 다운로드 (권장)
- 이 기능이 코드를 볼 때 편리하게 만들어줌, 필수는 아님!
위의 extention 중 Live Server는 고친 HTML과 CSS를 동시간으로 보여줄 수 있는 시스템.
Live Server을 다운받은 후에 Ctrl + Shift P 누르고 live server을 실행하면 브라우저에서 실시간으로 확인할 수 있다.
3. 이클립스 실행 후 VSC와 연동
이클립스 Preference > file 검색 > Editor 하단에 File Association에서 VSC와 연동할 확장 파일 선택
만약 연동할 파일이 보이지 않는다면 아래 add를 누르고
파일 확장명을 직접 입력하여 추가한다.
예시 ( .jsp, .css, .html) > dot( . ) 반드시 추가
나의 경우는 CSS, HTML, JSP 파일과 연동할 것이기 때문에 아래의 .js, .html, .css파일을 각각 선택해서 하단의 add를 누른다.
add를 누른다
External programs를 들어가서 visual을 검색한 후 Visual Studio Code 원본파일 클릭 후 OK!
다시 설정에 preference > workspace를 들어간다
workspace에서 Refresh using native hooks or polling 설정을 체크
4. 이클립스 내에서 VSC 연동
위의 설정이 끝났다면 연동하고 싶은 파일을 선택하자
원하는 파일에 우측 클릭 후에 Open With > VSC 연동파일 클릭
그러면 VSC가 뜰텐데 VSC에서 작업하고 Ctrl + S를 눌러서 저장하면 이클립스에서도 저장되는 것을 볼 수 있다!
728x90
'국비과정 > HTML & CSS' 카테고리의 다른 글
| radio 태그와 select 태그의 차이점 (0) | 2022.03.21 |
|---|---|
| HTML 유용한 태그 정리( (0) | 2022.03.10 |
| HTML tag 종류 (in-line tag, blocked tag) (0) | 2022.03.08 |
| HTML에서 css파일, JavaScript 파일 연결하는 방법 (0) | 2022.03.08 |
| 기기별 해상도 - 반응형 웹 설정하는 법 (@media) (0) | 2022.03.06 |