VSCode 원격 컨테이너에서 Svelte 및 Tailwind CSS 개발

배경

첫 번째 이후로 오랜 시간이 흘렀기 때문에 몇 가지 새로운 추가 및 변경 사항으로 Svelte 원격 컨테이너 예제를 업데이트할 것이라고 생각했습니다.

새로운 VSCode devcontainer의 기능은 다음과 같습니다.

Tailwind CSS 시작 앱이 포함된 Svelte

개발 중에 화면 크기를 표시하는 Tailwind CSS 디버그 화면

프로덕션 빌드를 최적화하도록 구성된 Snowpack

프로덕션 빌드를 위한 Dockerfile 및 nginx 구성

캐싱 및 압축이 활성화된 nginx 구성

Svelte/Tailwind 개발을 지원하는 여러 VSCode 확장

이 설정은 시간이 지남에 따라 Svelte와 Tailwind CSS(훌륭한 조합 imho)를 배우고 Rollup을 Snowpack으로 교체하면서 발전했습니다.

패트릭 나이즈 / svelte-snowpack-tailwind

시작하기

이 리포지토리를 프로젝트의 폴더에 복제합니다.

git clone https://github.com/patrickneise/svelte-snowpack-tailwind.git <your-project-name>

원본을 프로젝트 git repo로 변경

git remote set-url origin <path-to-your-project git repo>

종속성 설치

yarn install

개발 서버 시작

yarn start

Svelte 및 Tailwind CSS로 놀라운 것을 구축하십시오.

devcontainer의 주요 프레임워크 및 도구

Svelte - 프런트 엔드 개발 프레임워크

Tailwind CSS - 유틸리티 우선 CSS 프레임워크

Snowpack - 프런트엔드 빌드 도구

Tailwind CSS Debug Screens - 현재 활성 화면을 표시합니다

.

devcontainer의 VSCode 확장

Svelte - Svelte 구성 요소에 대한 구문 강조 표시, 코드 서식 지정 및 풍부한 인텔리전스.

Tailwind CSS IntelliSense - Intelligent Tailwind CSS 도구

Refactor CSS - 마크업에서 반복되는 CSS 클래스 이름 조합을 식별하는 데 도움이 됨

Headwind - 의견이 있는 Tailwind CSS 클래스 분류기

미래의 일

devcontainer에 추가/업데이트할 항목에 대한 몇 가지 생각:

Typescript 지원

보다 현실적인 시작 앱(구성 요소, 페이지, 라우터 등) 구축

Eslint 및 더 예쁜 구성

이 devcontainer를 개선하는 방법에 대한 다른 입력/권장 사항은 대단히 감사하겠습니다.