このリポジトリは、以下の記事を参考にprettier eslint を導入しました。
https://dev.to/tao/adding-eslint-and-prettier-to-nuxt-3-2023-5bg
- sm(スマホサイズ) ~480px
- md(ミドルサイズ) ~768px
- lg(タブレットサイズ) ~1000px
- xl(ラージサイズ) ~1200px
1200px~をデフォルトとする。
- 濃いめの文字色 #444455
- 基本の文字色 #575F6A
- 基本の背景色 #FCF9EF
できるだけマジックナンバーを減らしてデザインの共通化にに努めたい。 異なるデザインでも同様の意図で同様の値を取る場合は、カスタムプロパティに登録することを検討されたし。
文法や規則上守らないとエラーになるわけではないが、チーム内でのお約束があるので記載しています。
- パスはフォルダを分けて管理する
/about に該当する vue ファイルは、pages/about/index.vue に存在するべきである。
- クラス名は page-root に統一する
pages フォルダ内の vue ファイルは、template タグ直下のタグに page-root というクラス名を命名する。
- ファイル名はアッパーキャメルケース
- クラス名はケバブケース
template タグ直下のタグにファイル名のケバブケースをクラス名にする。
PrimaryCard.vue なら、クラス名は primary-card とする。
- コンポーネントに margin を持たせない
- 開発はmainからbranchを切って行う
- mainに直接pushはしない
- 本番環境に関してはrelease-branchを使う
- mainの状態を反映させるときにはmainからreleaseにPRを出す
- inline css は使用しない
- マジックナンバーを極力避ける
- 単一ファイル内でもカスタムプロパティの定義をする