フロントエンドコードの仕様
vue3 バージョン: [Vue&React] バージョン
3.2.47
TSバージョン：[TS&JS]バージョン
5.0.4
vite バージョン: [Webpack&Vite] バージョン
4.3.9
エスリントのバージョン:
8.43.0
命名ルール：【名前を見て意味を理解する】
プロジェクトの命名:
すべて小文字、ダッシュで区切る
例: my_project_name
ディレクトリの命名:
プロジェクトの命名規則を参照してください。
すべて小文字、ダッシュで区切る
複数の構造がある場合には複数の名称を使用する必要があります。
例：images、
JS/VUEファイル
プロジェクトの命名規則を参照してください。すべて小文字で、ダッシュで区切られています。
例：chat_model.js【chat.vue】
CSS/SCSS ファイルの命名:
名前を見て意味を理解してください。プロジェクトの命名規則を参照してください。すべて小文字で、ダッシュで区切られています。
例：chat.css
HTML ファイルの名前:
プロジェクトの命名規則を参照してください。すべて小文字で、ダッシュで区切られています。
例: chat.html
HTML:
文法
インデントにはソフト タブ (スペース 4 つ) を使用します。
ネストされたノードはインデントする必要があります。
属性では二重引用符を使用し、一重引用
符は使用しないでください。属性名はすべて小文字で、区切り文字としてダッシュを使用します。
タグを自動的に閉じないでください。末尾のスラッシュ ( HTML5 仕様では、これらはオプションであると記載されています);
オプションの終了タグ (例: および ) を省略しないでください。
HTML5 ドキュメントタイプ
この単純な doctype をページの先頭で使用して標準モードを有効にし、すべてのブラウザで可能な限り一貫して表示されるようにします。
doctype は大文字と小文字を区別しませんが、慣例により、doctype は大文字で表記されます (HTML 属性に関しては、大文字または小文字)。
lang 属性
HTML5 仕様によると、次のようになります。
lang 属性を html タグに追加する必要があります。これは音声ツールや翻訳ツールに役立ち、発音と翻訳の方法を伝えることができます。
lang 属性の詳細については、こちらをご覧ください。
言語リストはサイトポイントで見つけることができます。
ただし、sitepoint では言語の広範なカテゴリのみが提供されます。たとえば、中国語では zh のみが提供されますが、香港、台湾、中国本土は区別されません。Microsoft は、zh-cn、zh-hk、zh-tw に分類された、より詳細な言語リストを提供しています。
文字コード
明示的な文字エンコーディングを宣言することにより、ブラウザは Web コンテンツに適したレンダリング方法 (通常は「UTF-8」として指定される) を簡単かつ迅速に決定できます。
IE互換モード
タグを使用して、ページを表示する IE のバージョンを指定します。
CSS、JSを導入する
HTML5 仕様によれば、CSS と JS を導入する場合、通常、text/css と text/javascript がデフォルト値であるため、type を指定する必要はありません。
import を使用して導入する
属性の順序
読みやすさを確保するために、プロパティは特定の順序で表示される必要があります。
クラス
ID
名
data-*
src、for、type、href、value、max-length、max、min、pattern
placeholder、title、alt
aria-*、role
required、readonly、disabled
クラスは再利用性の高いコンポーネント用に設計されているため、まず第一にあるべきです。
ID はより具体的であり、慎重に使用する必要があるため、2 番目に指定します。
JSがタグを生成する
JS ファイル内でタグを生成すると、コンテンツの検索や編集が難しくなり、パフォーマンスが低下します。この状況は可能な限り避けるべきです。
タグの数を減らす
HTML コードを記述するときは、冗長な親ノードを避けるように努める必要があります。
HTML を小さくするには、繰り返しとリファクタリングが必要になることがよくあります。
CSS/SCSS:
インデント
ソフトタブを使用（スペース4つ）
セミコロン
各プロパティ宣言の最後にセミコロンを追加します。
スペース
次の場合にはスペースは必要ありません。
属性名の後に
複数のルールで、
「!」の後の「!重要」の前の区切り文字「,」。
属性値の「(」の後と「)」の前。
行の末尾に余分なスペースがあってはなりません
。スペースは必須です。次の状況:
属性値の前
セレクタ '>'、'+'、'~' 前後
'{' 前
!重要 '!'
@else 前後
',' 属性値
コメント内の '/ ' 前後 ' /' 前後
空行
次の状況では空行が必要です。
scss のネストされたルールを含め、ファイルの最後に空行 '}' を入れ、その後
に空行を続けることをお勧めします。属性の間には適切な空行が必要です。詳細については、属性宣言の順序を参照してください。
改行
次の状況では改行は必要ありません。
'{'フォワード
次の状況では改行が必要です。
「{」の後と「}」の前に、
各属性に独自の
行があります。「,」の後には複数のルール区切り文字があります。
コメント
コメントには「/* */」を使用してください(scssでは「//」は使用しないでください) 詳細は右の記述方法を参照してください。
インデントはコードの次の行と一致しています。
コード行の最後にスペースで区切って配置できます。
引用符
最外層では二重引用符を使用します。
URL の内容は引用符で囲む必要があります。
属性セレクターの属性値には引用符が必要です。
名前
クラス名はダッシュで区切られた小文字を使用します。ID はキャメル ケースで
名前が付けられます。scss
の変数、関数、ミックス、およびプレースホルダーはキャメル ケースで名前が付けられます。
プロパティ宣言の順序
関連する属性宣言は右側の順序でグループ化され、グループ間には空行が必要です。
色
カラー 16 進数では小文字が使用されます。
色にはできるだけ 16 進数の略語を使用してください。
プロパティの略語
プロパティの省略形では、プロパティ値の正しい順序を明確にする必要があります。また、ほとんどの場合、プロパティの省略形に含まれるすべての値を設定する必要はないため、プロパティの省略形をできる限り個別に宣言することをお勧めします。より明確にする。
margin はパディングの逆であり、省略する必要があります。
一般的な属性の略語には次のものがあります。
フォント
背景
遷移
アニメーション
メディアからのお問い合わせ
メディア クエリ ルールは、関連するルールの近くに置くようにしてください。メディア クエリ ルールを別のスタイル ファイルにまとめたり、文書の最後に放り込んだりしないでください。そうすると、後で全員が忘れやすくなります。 。
SCSS関連
送信されたコードには @debug を含めないでください。
申告順序:
@content を含まない@extend
@include には
@include
独自の属性の
ネストされたルールが含まれます
@import によって導入されるファイルには、先頭の「_」と末尾の「.scss」は必要ありません。
ネストは最大 5 レベルを超えることはできません。
@extend でプレースホルダー セレクターを使用します。
不要な親参照記号「&」を削除してください。
その他
空のスペースを許可しないルール。
要素セレクターでは小文字が使用されます。
小数点の前の 0 を削除します。
数値から不要な小数点と末尾の 0 を削除します。
属性値「0」の後に単位を追加しないでください。
接頭語が異なる同じ属性の記述方法は縦方向に揃える必要がありますので、詳細は右記の記述方法を参照してください。
接頭辞のない標準属性は、接頭辞付きの属性の後に記述する必要があります。
同じルール内に繰り返し属性を含めないでください。繰り返し属性が連続しているかどうかは関係ありません。
1 つのファイルに 2 つの同一のルールを含めないでください。
border: none;; の代わりに border: 0; を使用します。
セレクターは 4 レベルを超えてはなりません (scss では、4 レベルを超える場合は、ネストされた方法で記述することを検討する必要があります)。
投稿されたコードには @import を含めないでください。
「*」セレクターはできるだけ使用しないでください。
JS:
インデント
ソフトタブ（スペース4つ）を使用します。
単線の長さ
80 を超えないようにしてください。ただし、エディターがワードラップをオンにしている場合は、1 行の長さは無視できます。
セミコロン
次の状況の場合はセミコロンが必要です。
変数宣言
式
return
throw
Break
continue
do-while
空間
次の状況ではスペースは必要ありません。
オブジェクトのプロパティ名の後、
接頭辞の単項演算子の後、接尾
辞の単項演算子の前、関数
呼び出し括弧
の前、関数宣言または関数式に関係なく、「(」の前にスペースはありません。「[
」配列の後および
オブジェクトの前の '] ' の前の '{' '}' の前後
'(' の前後 ')'
次の状況ではスペースが必要です。
二項演算子の前後 三項演算子
「?:」の前後
コードブロック「{」の前
次のキーワードの前: else、while、catch、finally
次のキーワードの後: if、else、for、while、do、switch、case 、try、catch、finally、with、return、typeof
単一行コメント '//' の後ろ (単一行コメントがコードと同じ場合は、'//' の前にも必要です)、マルチコメントの後-line コメント '*'
オブジェクトの属性値の前
に、For ループの場合、セミコロンの後にスペースを残します。前提条件が複数ある場合は、カンマの後にスペースを残します。関数宣言
または関数式のいずれであっても、
関数のパラメータ間の「{」の前にスペースを入れる必要があります。
空行
次の状況では空行が必要です。
変数宣言後（コードブロックの最終行で変数を宣言する場合は空行は不要）コメント前（コードブロックの先頭行に
コメントがある場合は空行は不要）
コードブロック (関数呼び出し、配列、オブジェクト内 ファイル内に空行は必要ありません)
ファイルの最後に空行を残します
改行
改行が発生する場合は、行の末尾に「,」または演算子が必要です。
次の状況では改行は必要ありません。
次のキーワードの後: else、catch、finally
コード ブロック '{' の前
次の状況では改行が必要です。
コード ブロック '{' の後および '}' の前、
変数割り当て後
一行コメント
二重スラッシュの後にはスペースが必要です。
インデントはコードの次の行と一致しています。
コード行の最後にスペースで区切って配置できます。
複数行のコメント
少なくとも 3 行、「*」の後にスペースを入れてください。右の書き方を参照してください。
次のような状況での使用をお勧めします。
理解するのが難しいコードセグメント
エラーを含む可能性
のあるコードセグメント ブラウザ固有の HACK コード
ビジネスロジックと強く関連するコード
ドキュメントのコメント
@param、@method などのさまざまなタグについては、usejsdoc および JSDoc ガイドを参照してください。
次のような状況での使用をお勧めします。
すべての定数
すべての関数
すべてのクラス
引用符
最外層では一重引用符を使用します。
変数の名前付け
標準変数の名前はキャメルケースで付けられます (オブジェクトの属性を除き、主に CGI によって返されるデータを考慮します) 変数名では
「ID」が大文字になります 変数
名では「URL」が大文字になります
「Android」が大文字になります変数名の最初の文字です。変数名の最初の文字
「iOS」は小文字で、最後の 2 文字は大文字です。
定数はすべて大文字で、アンダースコアで接続されています。
コンストラクタ、大文字の jquery オブジェクトの最初の文字は、次
で始まる名前にする必要があります「$」
変数宣言
関数スコープ内のすべての変数宣言は、できる限り関数ヘッダーで記述し、1 つの var で宣言する必要があります。2 つの連続した var 宣言は許可されません。
関数
関数宣言であっても関数式であっても、「(」の前にスペースはありませんが、「{」の前にはスペースが必要です。
関数呼び出しの括弧の前にスペースは必要ありません。
すぐに実行される関数は括弧の層で囲む必要があります。
インライン関数には名前を付けないでください。
パラメータは「,」で区切られます。カンマの後にスペースがあることに注意してください。
配列、オブジェクト
オブジェクト属性名を引用符で囲む必要はありません。
オブジェクトは 1 行ではなくインデントして書かれます。
配列またはオブジェクトの末尾にカンマがあってはなりません。
括弧
次のキーワードの後には中かっこを続ける必要があります (コード ブロックに 1 行しか含まれていない場合でも): if、else、for、while、do、switch、try、catch、finally、with。
その他
タブとスペースを混在させないでください。
1 つの場所で複数のタブやスペースを使用しないでください。
改行文字には「LF」を使用します。
コンテキストへの参照 this には、「_this」、「that」、「self」のいずれかを使用してのみ名前を付けることができます。
行末に空白文字があってはなりません。
スイッチのフォールスルーおよびデフォルトなしの状況については、コメントで特別に説明する必要があります。
空のコード ブロックは許可されません。
開発環境の依存関係:
"dependencies": {
"@ant-design/icons-vue": "^6.1.0",
"@element-plus/icons-vue": "^2.1.0",
"@vueuse/components": "^10.2.0",
"@vueuse/core": "^10.2.0",
"ant-design-vue": "^3.2.19",
"axios": "^1.4.0",
"dayjs": "^1.11.8",
"echarts": "^5.4.2",
"element-plus": "^2.3.6",
"mitt": "^3.0.0",
"naive-ui": "^2.34.3",
"pinia": "2.0.35",
"pinia-plugin-persistedstate": "^3.1.0",
"qs": "^6.11.1",
"tdesign-vue-next": "^1.3.7",
"vue": "^3.2.47",
"vue-router": "^4.2.2"
},
"devDependencies": {
"@commitlint/cli": "^17.6.6",
"@commitlint/config-conventional": "^17.6.6",
"@types/node": "^18.15.11",
"@types/nprogress": "^0.2.0",
"@types/qs": "^6.9.7",
"@typescript-eslint/eslint-plugin": "^5.59.10",
"@typescript-eslint/parser": "^5.59.10",
"@vitejs/plugin-vue": "^4.2.0",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"autoprefixer": "^10.4.14",
"cz-git": "^1.7.0",
"eslint": "^8.43.0",
"eslint-config-prettier": "^8.8.0",
"eslint-define-config": "^1.20.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-simple-import-sort": "^10.0.0",
"eslint-plugin-vue": "^9.14.1",
"husky": "^8.0.3",
"import": "^0.0.6",
"less": "^4.1.3",
"less-loader": "^11.1.3",
"lint-staged": "^13.2.2",
"mockjs": "^1.1.0",
"nprogress": "^0.2.0",
"plop": "^3.1.2",
"postcss": "^8.4.24",
"postcss-html": "^1.5.0",
"postcss-less": "^6.0.0",
"postcss-px-to-viewport": "^1.1.1",
"postcss-scss": "^4.0.6",
"prettier": "^2.8.8",
"rollup-plugin-visualizer": "^5.9.2",
"stylelint": "^15.8.0",
"stylelint-config-recommended": "^12.0.0",
"stylelint-config-recommended-vue": "^1.4.0",
"stylelint-config-standard": "^33.0.0",
"stylelint-config-standard-scss": "^10.0.0",
"stylelint-order": "^6.0.3",
"stylelint-prettier": "^3.0.0",
"typescript": "5.0.4",
"unocss": "^0.53.1",
"unplugin-auto-import": "^0.16.4",
"unplugin-icons": "^0.16.3",
"unplugin-vue-components": "^0.25.1",
"vite": "^4.3.9",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-html": "^3.2.0",
"vite-plugin-imagemin": "^0.6.1",
"vite-plugin-mkcert": "^1.15.0",
"vite-plugin-mock": "^3.0.0",
"vite-plugin-pages": "^0.31.0",
"vite-plugin-progress": "^0.0.7",
"vite-plugin-restart": "^0.3.1",
"vite-plugin-style-import": "^2.0.0",
"vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-vue-images": "^0.6.1",
"vite-plugin-vue-setup-extend": "^0.4.0",
"vue-eslint-parser": "^9.3.1",
"vue-tsc": "^1.7.0"
}