ViteとESLint / Prettier / Stylelintを連携して開発環境を整える

ESLintの導入と設定方法

まずはJavaScript/TypeScriptの構文チェックを行うESLintを導入します。

1. インストール

npm install -D eslint

TypeScriptを使用している場合は以下も追加します。

npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. 設定ファイルの作成

プロジェクトルートに .eslintrc.js を作成します。

module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
    ],
    env: {
        browser: true,
        es2021: true,
    },
    rules: {
        semi: ['error', 'always'],
        quotes: ['error', 'single'],
    },
};

---

Prettierとの併用と競合対策

Prettierはコードの整形ツールですが、ESLintと競合することがあります。そのため、連携用のプラグインを導入します。

1. インストール

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

2. 設定ファイルの更新

.eslintrc.js に以下を追加します。

extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
],

3. Prettier設定ファイルの作成

prettier.config.js または .prettierrc を作成します。

module.exports = {
    singleQuote: true,
    semi: true,
    tabWidth: 4,
    trailingComma: 'es5',
};

---

StylelintでCSS/SCSSをチェック

CSSやSCSSのコード品質を保つにはStylelintが便利です。

1. インストール

SCSS対応の場合：

npm install -D stylelint stylelint-scss stylelint-config-standard-scss

2. 設定ファイルの作成

.stylelintrc.js を作成します。

module.exports = {
    extends: ['stylelint-config-standard-scss'],
    rules: {
        indentation: 4,
        'string-quotes': 'single',
    },
};

3. 対象ファイルの指定

package.json にスクリプトを追加しておくと便利です。

"scripts": {
    "lint:css": "stylelint 'src/**/*.{css,scss}'"
}

---

VS Codeとの連携

VS Codeの拡張機能として以下をインストールしましょう。

• ESLint
• Prettier - Code formatter
• Stylelint

設定ファイル例（.vscode/settings.json）：

{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "eslint.validate": ["javascript", "typescript"],
    "stylelint.validate": ["css", "scss"]
}

---

まとめ：ViteとLint系ツールで整える開発基盤

ViteにESLint、Prettier、Stylelintを組み合わせることで、コードの品質管理が一気に効率化します。設定は一度きりで、チーム全体のコーディングスタイルを統一できるため、プロジェクトのスケーラビリティにも貢献します。早い段階で導入しておくことで、バグの予防と開発体験の向上を同時に実現できます。