vue3+vite プロジェクト構成 ESlint、プリッタープラグイン

ESlint とプリッタープラグインを構成する

Vue 3 + Vite プロジェクトでは、次の手順で ESLint および Prettier プラグインを構成できます。

プラグインのインストール:
プロジェクトのルートディレクトリでターミナルを開き、次のコマンドを実行して ESLint プラグインと Prettier プラグインをインストールします。
```
npm install eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier --save-dev
```
上記のコマンドは、ESLint、Prettier、および関連するプラグインと構成をインストールします。
.eslintrc.jsファイルの作成:
プロジェクトのルートディレクトリに名前付きのファイルを作成し.eslintrc.js、次の内容を追加します。
```
module.exports = {
      
      
  extends: [
    'plugin:vue/vue3-recommended',
    'prettier',
    'prettier/vue'
  ],
  plugins: ['vue', 'prettier'],
  rules: {
      
      
    'prettier/prettier': 'error'
  }
};
```
上記の構成では、plugin:vue/vue3-recommended拡張機能を使用して、Vue 3 が推奨するルールに基づいて ESLint を構成しました。また、 Prettier の書式設定ルールをサポートする拡張機能prettierも導入しましたprettier/vue。最後に、prettier/prettierコードが Prettier 形式に準拠していることを確認するために、ルールを構成してエラーレベルに設定しました。
.prettierrc.jsファイルの作成:
プロジェクトのルートディレクトリに名前付きのファイルを作成し.prettierrc.js、次の内容を追加します。
```
module.exports = {
      
      
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
  printWidth: 80,
  tabWidth: 2
};
```
上記の構成では、semi(セミコロンを使用するかどうか)、singleQuote(一重引用符を使用するかどうか)、trailingComma(末尾のカンマを使用するかどうか)、printWidth(行の最大長)、tabWidth(インデントのスペースの数など) などのいくつかの一般的な Prettier 構成を使用しました。）。
VS Code エディターを構成する:
VS Code エディターを使用している場合は、次の手順で保存時の自動フォーマットとコード標準チェックを構成できます。
- 拡張機能ストアに次のプラグインをインストールします: ESLint、Prettier - コードフォーマッタ
- VS Code の設定 ( Preferences → Settings) を開き、次の設定項目を検索して編集します。
```
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[vue]": {
        
        
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
        
        
    "language": "vue",
    "autoFix": true
  }
]
```
上記の設定により、Vue ファイルの保存時のコードのフォーマットと ESLint が有効になります。
コードの検査と書式設定を実行する:
ターミナルで次のコマンドを実行して、コードを検査し、書式設定します。
```
npx eslint .
npm run lint --fix
```
上記のコマンドを使用して、プロジェクト内のコード仕様を確認し、いくつかの単純な問題を修正します。

上記の手順を通じて、Vue 3 + Vite プロジェクトで ESLint および Prettier プラグインを構成し、それらを使用してコードの品質とスタイルの一貫性を維持できます。

利用シーンとメリット・デメリット

ESLint と Prettier プラグインを使用すると、次のシナリオと長所と短所が生じます。

使用するシーン:

統一されたコードスタイル: ESLint と Prettier は、一貫したコードスタイル仕様を強制し、チームメンバーが作成したコードのスタイルが一貫していることを保証し、コードの可読性と保守性を向上させることができます。
潜在的な問題の検出: ESLint は、宣言されていない変数、未使用の変数、不要なコードなど、コード内の潜在的な問題やエラーを検出して、開発者が開発プロセス中にこれらの問題を見つけて修正できるようにします。
自動フォーマット: Prettier は、コードが一貫したインデント、改行、引用符などを維持するようにコードを自動的にフォーマットできるため、コードフォーマットを手動で調整する時間と作業負荷が軽減されます。

アドバンテージ：

一貫したコードスタイル: 統一された ESLint ルールと Prettier ルールを構成することで、チームメンバーが作成したコードのスタイルが一貫していることを保証し、コードの可読性と保守性を向上させることができます。
コード品質の向上: ESLint は、コード内の潜在的な問題やエラーを検出し、開発者が開発プロセス中にこれらの問題を見つけて修正できるように支援し、コードの品質を向上します。
自動フォーマット: Prettier は、コードが一貫したインデント、改行、引用符などを維持するようにコードを自動的にフォーマットできるため、コードフォーマットを手動で調整する時間と作業負荷が軽減されます。

欠点:

構成の複雑さ: ESLint と Prettier の構成には、特にプラグインのルールと構成オプションを理解する必要がある初めての開発者にとって、ある程度の時間と学習コストがかかる場合があります。
柔軟性の低下: 特定のルールや書式設定オプションが個人またはチームの設定と一致しない場合があるため、ルールやオプションを調整およびカスタマイズするには追加の時間と労力が必要になる場合があります。
追加のオーバーヘッド: ESLint と Prettier は、コードを保存またはビルドするたびに実行して、コードをチェックしてフォーマットする必要があるため、特に大規模なプロジェクトでは追加のオーバーヘッドが追加される可能性があります。

要約すると、ESLint プラグインと Prettier プラグインは、コードスタイルの統一、コード品質の向上、自動フォーマット化において重要な役割を果たしますが、構成の複雑さと柔軟性、追加のオーバーヘッドを考慮する必要があります。ほとんどの場合、これらはプロジェクトのメンテナンスやチームのコラボレーションに非常に役立ちます。

Vite は JS と CSS をパックして分割します

パッケージ化に Vite を使用する場合、生成された JavaScript ファイルと CSS ファイルは構成によって分割できます。一般的に使用される構成オプションをいくつか示します。

JavaScript ファイルの分割:ファイル
では、構成項目vite.config.jsを使用して JavaScript ファイルの分割方法を指定できます。rollupOptionsたとえば、分割するチャンクは、outputオプションの属性を使用して手動で指定できます。manualChunks
```
export default {
      
      
  rollupOptions: {
      
      
    output: {
      
      
      manualChunks: {
      
      
        vendor: ['vue', 'axios'], // 将 vue 和 axios 打包到 vendor.js
        utils: /^lodash/ // 打包以 lodash 开头的模块到 utils.js
      }
    }
  }
}
```
上記の構成では、2 つの分割ブロックvendorとを指定しましたutils。vendorブロックには Vue と Axios が含まれ、utilsブロックには lodash で始まるモジュールが含まれます。
CSS ファイルの分割:
デフォルトでは、Vite はすべての CSS ファイルを 1 つのファイルにパックします。CSS ファイルを分割する必要がある場合は、extractCSS構成アイテムを使用して分割を有効にすることができます。
```
export default {
      
      
  build: {
      
      
    cssCodeSplit: true
  }
}
```
上記の設定を使用した後、Vite は各エントリファイルの CSS を別のファイルに抽出します。

JavaScript ファイルと CSS ファイルを分割すると、追加のネットワークリクエストが増加する可能性があるため、分割時の読み込みパフォーマンスとファイル量のバランスをとる必要があることに注意してください。実際の状況に応じて、モジュールの依存関係やコードサイズに応じて合理的な分割構成を行うことができます。