VSCODE遠隔コンテナにおけるSvelte＆Tarwind CSS開発

背景

それは私の最初の以来、しばらくの間、私はいくつかの新しい追加と変更でSvelteリモートコンテナの例を更新するように考えついた.
新しいvscode devcontainerの特徴は以下の通りです:

風のCSSのスターターアプリとスベルト

開発中にスクリーンサイズを表示するCSSデバッグ画面

生産を最適化するために構成された積雪

プロダクションビルドのためのDockerfileとnginxの設定

キャッシュと圧縮を有効にする

Svelte／Tailwind開発をサポートするいくつかのVSCODE拡張

私がSvelteと現在のTarwind CSS(大きな組合せIMHO)を学び続けて、積雪のためにロールパンを交換したので、このセットアップは時間とともに進化しました.

パッチワーク / スベートスノーパック

始める

このレポをプロジェクトのフォルダにクローン

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

あなたのプロジェクトGitレポへの起源を変えてください

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

依存関係のインストール

yarn install

devサーバを起動する

yarn start

何か驚くべきものを構築する

主な枠組みとツール

Svelte - フロントエンド開発フレームワーク

Tailwind CSS - ユーティリティフレームワーク

Snowpack - フロントエンドビルドツール

Tailwind CSS Debug Screens - 現在アクティブな画面を表示する

devコンテナのvscode拡張モジュール

Svelte - Sluteコンポーネントの構文強調表示、コードの書式設定、およびリッチIntelliSense.

Tailwind CSS IntelliSense - インテリジェント風船

Refactor CSS - マークアップでのCSSクラス名の組み合わせを再認識する

Headwind - 独裁型CWSクラスソータ

将来の仕事

devコンテナに追加/更新する方法についてのいくつかの考え

タイプスクリプトのサポート

より現実的な起動アプリ(コンポーネント、ページ、ルータなど)を構築する

eslintときれいな設定

このdevcontainerをよりよくする方法のためのどんな他の入力/推薦も大いに有り難いです.