[Svelte] VS Code에 환경 세팅하기

VS Code에 Svelte 프로젝트를 시작할 수 있도록 환경을 세팅해보자

 

** 세팅하기 전에, 프로젝트를 시작할 폴더를 만들어 둔다.

 

 

1. VS Code를 실행한 후, 터미널을 연다.

2. 상단의 '파일'에서 미리 만들어 둔 폴더를 연다.

 

3. 터미널에 'npm init svelte@next ~~~' 를 입력한 후, 아래와 같이 설정해준다. (*~~~에는 생성하고자 하는 프로젝트 이름)

 

4. 상단의 '파일'에서 방금 생성한 폴더를 연다.

 

5. 터미널에 'yarn' 명령어로 yarn을 설치한다. (* npm 사용할 사람은 npm install 명령어 사용)

 

6. 왼쪽의 맨 아래 '확장'에서 'Svelte for VS Code' 플러그인을 설치한다.

 

7. src/routes 에 '__layout.svelte' 파일을, src 에 'app.css' 파일을 생성한다.

 

8. 탐색기 부분에 마우스 우클릭하여 'postcss.config.cjs' 파일을 생성한다.

 

9. 터미널에 'npm install --save-dev tailwindcss postcss autoprefixer' 입력한다.

   (= 'yarn add tailwindcss postcss autoprefixer')

 

10. 터미널에 'npx tailwind init' 명령어를 입력한 후, 생성된 'tailwind.config.js' 파일의 이름을 'tailwind.config.cjs'로 변경한다.

 

11. 확인해 봐야할 파일의 내부 코드이다.

src/routes/__layout.svelte

src/app.css

postcss.config.cjs

svelte.config.js

tailwindcss.config.cjs

 

12. 마지막으로 'index.svelte' 에 화면에 보여주기 위한 간단한 코드를 작성한다.

 

13. 인터넷에 'localhost:3000' 을 입력하여 접속하면 완료!

---

 

★ 더 빠르고, 편리한 사용을 위한 Tailwind CSS  자동완성 사용하는 방법 ★

    ≫  VS Code Extends에서 'Tailwind CSS IntelliSense' 을 설치!

 

설치하고 난 후 입력해보면 아래 사진처럼 자동완성이 적용되는 것을 볼 수 있다.