html-bx-03

• CSS/JS/画像を用意するためのボイラープレートです
• Node.js を使用します
• モジュールバンドルとしてViteを使用します
• 各種設定は必要に応じて変更してください

使い方（と想定シチュエーション）

1. zip 形式で本リポジトリをダウンロード or git clone xx で別の名前をつけてclone
2. zip ファイルを解凍し、フォルダ名を任意のプロジェクト名に変更する or git remote set-url origin xx で任意のリポジトリに紐付ける
3. プロジェクトのディレクトリに移動し、pnpm installコマンドを実行してパッケージをインストールする
4. 必要に応じて、README.md や各種設定ファイルを編集する
5. pnpm imageやpnpm iconで画像を加工してから、pnpm devで開発を始める
6. pnpm buildでdistへ出力されるcss/style.cssとjs/app.js等を個々のプロジェクトへ移動させて、ご利用ください

コマンド

• dev
  開発用サーバーを立ち上げる。

• build
  ビルドする。
  ビルド後の HTML ファイルは Prettier でフォーマットされる。

• preview
  ローカルで静的なサーバーを起動し、dist のファイルを localhost で配信する。プロダクションビルドが問題ないかどうかを自分のローカル環境で確認するために使用する。

• lint
  lint する。

• fix
  fix する。

• image
src/images内の画像をsrc/public/imgへ最適化、WebP 等を出力する。
  devより先の実行を想定

• icon
src/public/icons/icon.pngをリサイズ。750px * 750px から小さいものを生成
  devより先の実行を想定

コーディングルール

HTML

フォーマッター

• Prettierを使用する

CSS

• 原則として、SCSS ファイルをコンパイルして生成した CSS ファイルを直接編集することは避けた方が良い
• EVERY LAYOUTをオレオレ解釈したObjectとComponent、utilityで構築することを想定

SCSS

コンパイラ

• Dart Sassを使用する

CSS プロセッサー

• PostCSSを使用する
• プラグインとして以下を使用する
  • autoprefixer

リンター・フォーマッター

• stylelintを使用する
• ベースのルールとしてstylelint-config-standard-scssを使用する

JavaScript

モジュールバンドラ

• Viteを使用する。

リンター・フォーマッター

• ESLintを使用する
• ベースのルールとしてeslint:recommendedを使用する
• プラグインとして以下を使用する
  • eslint-plugin-css-import-order
  • eslint-plugin-import
  • eslint-plugin-unused-imports