ここに画像の説明を挿入

I.はじめに

フロントエンドプロジェクトエンジニアリングのコード仕様とは、プロジェクト内のコードスタイルと形式の一貫性を確保し、コードの可読性と保守性を向上させるために、フロントエンドプロジェクトで一連のコード仕様を定義することを指します。通常、コード仕様には次の側面が含まれます。

インデントと改行: コードの構造を明確にするために、均一なインデントと改行ルールを使用します。
命名規則: 統一された命名規則を使用して、コード内の変数、関数、クラスなどの名前を読みやすく、認識しやすくします。
コメントの仕様: 統一されたコメントルールを使用して、コード内のコメントをより明確にします。
コード形式: コードをより美しく見せるために、統一されたコード形式を使用します。
コードの編成: 統一されたコード編成方法を使用して、コード構造をより明確にします。

コード規範の実装は、コード検査ツールやコード書式設定ツールなどを使用して自動化できるため、開発者はコードを作成するときに規範に簡単に従うことができます。同時に、コード仕様はチームメンバー間のコラボレーションにも役立ち、コードの理解と変更が容易になります。

2、ESLint

ESLint は、主にコード内の潜在的な問題、バグ、不整合、非推奨のパターンを見つけて修正するために使用される静的コード分析ツールです。これは、コードの品質を向上させ、よくある間違いを回避し、チームメンバーが統一されたコーディング規約に確実に従うようにするのに役立ちます。
ESLint チュートリアル - ナゲット

GitHub - eslint/eslint: JavaScript コードの問題を見つけて修正します。

3. より美しく

Prettier は、一貫したスタイル仕様に準拠するようにコードをフォーマットすることに重点を置いたコードフォーマットツールです。コードのインデント、改行、引用符などが自動的に調整され、さまざまなエディターや環境間でコードの外観が一貫していることが保証されます。
簡単に言うと、ESLint はコードが仕様に準拠しているかどうかにより注意を払うのに対し、Pretter は仕様に従ってコードをフォーマットする機能を提供します。

より美しく、独自のコードフォーマッタ

4. 実戦プロジェクト

vite + vue3 + ts + pinia + vueuse を使用してエンタープライズレベルのフロントエンドプロジェクトを作成する方法を教える - Nuggets

4.1 環境依存のバージョン

"dependencies": {
    
    
  "@vueuse/core": "^10.4.1",
  "axios": "^1.5.0",
  "element-plus": "^2.3.12",
  "pinia": "^2.1.6",
  "vue": "^3.3.4",
  "vue-router": "^4.2.4"
},
"devDependencies": {
    
    
  "@types/node": "^20.5.7",
  "@typescript-eslint/eslint-plugin": "^6.5.0",
  "@typescript-eslint/parser": "^6.5.0",
  "@vitejs/plugin-vue": "^4.2.3",
  "eslint": "^8.48.0",
  "eslint-config-prettier": "^9.0.0",
  "eslint-plugin-prettier": "^5.0.0",
  "eslint-plugin-vue": "^9.17.0",
  "prettier": "^3.0.3",
  "sass": "^1.66.1",
  "typescript": "^5.0.2",
  "unplugin-auto-import": "^0.16.6",
  "unplugin-vue-components": "^0.25.2",
  "vite": "^4.4.5",
  "vue-tsc": "^1.8.5"
}

4.2 pnpmの使用

pnpm はフロントエンドエンジニアリングプロジェクトの未来です -
なぜ Nuggets pnpm は npm と糸の次元削減を攻撃しているのですか - Nuggets は
 すでに 2022 年にあり、pnpm はもうすぐ登場します! - ナゲット

初期の npm には、node_modules がネストされており、複数のパッケージが同じ依存プロジェクトに依存していました。
Npm3とyarnは早くからフラットデザインを採用し始めましたが、ゴースト依存関係があり、プロジェクト構造が不確かです

pnpm は、高速でディスク容量を節約できる依存関係インストールツールです。
ファイル/ディレクトリ属性を記述する i ノード i ノードのデータベース
ハードリンクは新しいファイルを作成しますが、同じソースデータを指す同じ i ノードを指します。
ソフトリンクは異なる i ノードを作成しますが、データブロックにはファイルパスが保存され、パス (ショートカット) に沿ってソースデータを指します。
.pnpm ファイルはハードリンクを通じてメインディスクのストアファイルにリンクされており、pnpm のインストールは .pnpm ファイルへのソフトリンクに依存します。