VS Code および Cursor の拡張機能と設定まとめ

仕事では VS Code を使い、プライベートでは Cursor を使ったりたまに VS Code を使ったりしています。
拡張機能が Cursor だとなかったり一部異なっていたりしますので、設定を分けて書くことにしました。

最終更新： 2026/04/17

拡張機能（VS Code）

自分で入れなくても依存関係により勝手に入るものも列挙します。

• .NET Install Tool
  • C# で開発をするときに入れるように言われて入れたやつです
• Auto Comment Blocks
  • ドキュメントコメントをつけたりするときにある程度自動生成してくれるようになります
• autoDocstring - Python Docstring Generator
  • Python 用の docstring を自動生成します
• Azure Functions
  • Azure Functions を VS Code で開発するときに使った気がします
• Azure Resources
  • Azure Functions を入れると勝手に入ったと思います
• Better Comments
  • コメントに TODO などのキーワードが入っていると色が変わります
• Better Jinja
  • シンタックスハイライトに jinja html を適用するのに使います。 Jinja も必要です
• Biome
  • ESLint よりも高速に動作する JavaScript の解析ツールです
• Black Formatter
  • Python のフォーマッターですが、Ruff でほぼ同じことが高速にできるのでいらないです
• Bookmarks
  • コード上にしおりみたいなのをつけることができます
• C#
  • C# のコードを書く時には必要です
• Code Spell Checker
  • タイポがあると気づけます
• Color Highlight
  • 色コードに色がつきます
• Color Picker
  • カラーピッカーです
• Container Tools
  • Docker DX を入れたら勝手に入ると思います
• Docker DX
  • Dockerfile を書くときにあったら便利かも
• Error Lens
  • コード上に警告やエラー内容が表示されるようになります
• es6-string-html
  • HTML 上に ES6 以降の書き方をしたときにうまく認識してくれるようになる気がします
• Even Better TOML
  • toml のシンタックスハイライトがつきます
• GitLens - Git supercharged
  • 色々と機能はありますが、コード上に Git のコミット情報が表示されるようになるのが大きいです
• HTML CSS Support
  • なんかあったら便利だった気がする
• HTMLHint
  • HTML の解析ツールです
• indent-rainbow
  • インデントに色がつきます
• Jinja
  • Better Jinja と一緒に使います
• Material Icon Theme
  • アイコンテーマです
• Mypy Type Checker
  • Python の型チェッカーです。最近は Pylance の方を使っているのでこちらは使っていません
• One Dark Pro
  • カラーテーマです
• Output Colorizer
  • ログ出力とかに色を付けて見やすくしてくれるはずですが、利用シーンがほぼありません
• Path Intellisense
  • パスの入力補完をしてくれるはず
• Peacock
  • VS Code 本体の色を変更できます
• Project Manager
  • ワークスペースの切り替えが簡単になるので使用します
• Pylance
  • Python 拡張機能を入れると勝手に入りますが、 pyright による型チェックができます
• Python
  • Python のシンタックスハイライトのために必要です
• Python Debugger
  • Python を入れると勝手に入ります
• Python Environments
  • Python を入れると勝手に入ります
• Rainbow CSV
  • CSV に色がつきます
• Ruff
  • Python の静的コード解析ツールです。 Flake8 よりも高速なのでお勧めです。 isort の代わりもしてくれます
• Select Line Status Bar
  • 選択中の行を数えるのに使用しています
• TODO Highlight
  • TODO などのキーワードをハイライトしてくれます
• Trailing Spaces
  • 余計なスペースが入っていると強調表示してくれます
• Vue (Official)
  • Vue.js を使用する際は入れます

settings.json（VS Code）

settings.json

{
    // ウィンドウのコマンドセンター
    "window.commandCenter": false,
    // ウィンドウのタイトル
    "window.title": "${activeEditorLong}${separator}${rootName}${separator}${activeRepositoryBranchName}",
    // UI全体のサイズ
    "window.zoomLevel": 0.7,
    // コードエディタの文字サイズ
    "editor.fontSize": 17,
    // 行間(px)。 0 にすると自動
    "editor.lineHeight": 21,
    // カラーテーマ
    "workbench.colorTheme": "One Dark Pro",
    // アイコンテーマ
    "workbench.iconTheme": "material-icon-theme",
    // タブの折り返し
    "workbench.editor.wrapTabs": true,
    // 起動時に開かれるエディタ
    "workbench.startupEditor": "none",
    // レイアウト制御
    "workbench.layoutControl.enabled": false,
    // Tab キーを入力したらスペースを挿入する
    "editor.insertSpaces": true,
    // 文字入力時のサジェスト
    "editor.quickSuggestions": {
        "other": "off",
        "comments": "off",
        "strings": "off"
    },
    // NOTE: 以下を使うと Auto Comment Blocks が効かなくなるのでコメントアウト
    // サジェストを起動する文字
    // "editor.suggestOnTriggerCharacters": false,
    // サジェストの選択
    "editor.suggestSelection": "first",
    // 空白の表示
    "editor.renderWhitespace": "all",
    // フォント設定
    "editor.fontFamily": "HackGen",
    // ツールチップがホバー表示されるまでの時間
    "editor.hover.delay": 1000,
    // ミニマップ表示設定
    "editor.minimap.enabled": true,
    // ミニマップのスライダー表示
    "editor.minimap.showSlider": "always",
    // スティッキースクロールの有効化
    "editor.stickyScroll.enabled": true,
    // マウスホイール感度
    "editor.mouseWheelScrollSensitivity": 3,
    // ルーラーを表示する文字数位置
    "editor.rulers": [
        120,
        200
    ],
    // 保存時の設定
    "editor.codeActionsOnSave": {
        // 保存時に整形
        "source.fixAll": "explicit",
        // インポートを整形
        "source.organizeImports": "explicit",
        // importエラーを解決
        "source.addMissingImports": "explicit"
    },
    // 非基本ASCII文字のハイライト
    "editor.unicodeHighlight.nonBasicASCII": false,
    "[html]": {
        "editor.tabSize": 2,
        "editor.defaultFormatter": "biomejs.biome"
    },
    // HTMLのフォーマット時、勝手に改行させない
    "html.format.wrapLineLength": 0,
    "[xml]": {
        "editor.tabSize": 2,
    },
    "[markdown]": {
        "files.trimTrailingWhitespace": false
    },
    "[sql]": {
        "files.trimTrailingWhitespace": false
    },
    "[java]": {
        "editor.tabSize": 4,
    },
    "[javascript]": {
        "editor.tabSize": 4,
        "editor.defaultFormatter": "biomejs.biome",
        "editor.formatOnSave": true
    },
    "[javascriptreact]": {
        "editor.formatOnSave": true,
        "editor.formatOnType": true
    },
    "[typescript]": {
        "editor.tabSize": 4,
        "editor.insertSpaces": true,
        "editor.defaultFormatter": "biomejs.biome",
        "editor.formatOnSave": true
    },
    "[json]": {
        "editor.defaultFormatter": "biomejs.biome",
        "editor.formatOnSave": true
    },
    "[jsonc]": {
        "editor.defaultFormatter": "biomejs.biome",
        "editor.formatOnSave": true
    },
    "[python]": {
        "editor.defaultFormatter": "charliermarsh.ruff",
        "editor.formatOnSave": true,
        "editor.formatOnType": true
    },
    "[jinja-html]": {
        "editor.tabSize": 2,
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[css]": {
        "editor.defaultFormatter": "biomejs.biome",
        "editor.formatOnSave": true
    },
    // 使用するターミナル
    "terminal.integrated.defaultProfile.windows": "Command Prompt",
    // ファイルの改行コード
    "files.eol": "\n",
    "files.autoGuessEncoding": true,
    // ファイル末尾に空行を入れるか
    "files.insertFinalNewline": true,
    // ファイル末尾の余計な空白を取り除くか
    "files.trimTrailingWhitespace": true,
    // ファイル末尾の余計な空行を取り除くか
    "files.trimFinalNewlines": true,
    // Java用設定
    "files.exclude": {
        "**/.classpath": true,
        "**/.project": true,
        "**/.settings": true,
        "**/.factorypath": true
    },
    "workbench.colorCustomizations": {
        "editorLineNumber.activeForeground": "#00ff84",
        "editorLineNumber.foreground": "#bcbcbc",
        "editor.lineHighlightBackground": "#202020",
        "editor.wordHighlightBackground": "#ffffff00",
        "editor.wordHighlightBorder": "#606060",
        "editor.selectionBackground": "#008064a8",
        "editor.selectionHighlightBackground": "#0020ffc0",
        "editor.selectionHighlightBorder": "default",
        "editor.findMatchBackground": "#ff000070",
        "editor.findMatchBorder": "default",
        "editor.findMatchHighlightBackground": "#ffee0030",
        "editor.findMatchHighlightBorder": "default",
        "tab.border": "#008064",
        "tab.activeBackground": "#005040",
        "tab.hoverBackground": "#005040",
        "statusBar.foreground": "#d6d6d6"
    },
    "todohighlight.keywords": [
        "DEBUG:",
        "REVIEW:",
        {
            "text": "NOTE:",
            "backgroundColor": "rgba(255, 189, 36, 0.5)",
            "color": "#ffffff",
            "borderRadius": "5px",
            "overviewRulerColor": "grey"
        },
        {
            "text": "HACK:",
            "color": "#000",
            "borderRadius": "5px",
            "isWholeLine": false,
        },
        {
            "text": "TODO:",
            "color": "red",
            "borderRadius": "5px",
            "backgroundColor": "yellow",
        },
        {
            "text": "TEST:",
            "color": "red",
            "borderRadius": "5px",
            "backgroundColor": "yellow",
        }
    ],
    "security.workspace.trust.untrustedFiles": "open",
    "indentRainbow.ignoreErrorLanguages": [
        "markdown",
        "plaintext"
    ],
    // インデントがずれている場合の背景色
    "indentRainbow.errorColor": "rgba(128, 32, 32, 0.2)",
    // インデントにスペースとタブスペースが混在している場合の背景色
    "indentRainbow.tabmixColor": "rgba(128, 132, 96, 0.2)",
    // Using the light mode
    "indentRainbow.indicatorStyle": "light",
    // we use a simple 1 pixel wide line
    "indentRainbow.lightIndicatorStyleLineWidth": 1,
    // the same colors as above but more visible
    "indentRainbow.colors": [
        "rgba(255, 255, 64, 0.3)",
        "rgba(127, 255, 127, 0.3)",
        "rgba(255, 127, 255, 0.3)",
        "rgba(79, 236, 236, 0.3)"
    ],
    // Example of regular expression in JSON (note double backslash to escape characters)
    "indentRainbow.ignoreLinePatterns": [
        "/[ \t]* [*]/g", // lines beginning with <whitespace><space>*
        "/[ \t]+[/]{2}/g" // lines beginning with <whitespace>//
    ],
    "cSpell.ignoreRegExpList": [
        "[０-９Ａ-Ｚａ-ｚぁ-んァ-ヶ亜-熙纊-黑]+"
    ],
    "cSpell.userWords": [],
    "cSpell.ignorePaths": [
        "package-lock.json",
        "package.json",
        ".vscode",
        "README.md",
        "Vagrantfile"
    ],
    // おそらく Biome を入れたら入ったと思う
    "json.schemaDownload.trustedDomains": {
        "https://schemastore.azurewebsites.net/": true,
        "https://raw.githubusercontent.com/": true,
        "https://www.schemastore.org/": true,
        "https://json.schemastore.org/": true,
        "https://json-schema.org/": true,
        "https://biomejs.dev": true
    }
}

ワークスペース個別に設定するsettings.json（VS Code）

例えばこんな感じ

settings.json

{
    "python.autoComplete.extraPaths": [
        "path\\to\\hoge",
        "path\\to\\fuga"
    ],
    "python.analysis.extraPaths": [
        "path\\to\\hoge",
        "path\\to\\fuga"
    ],
    "terminal.integrated.env.windows": {
        "PYTHONPATH": "C:/path/to/hoge;C:/path/to/fuga",
        "PATH": "C:/path/to/hoge;C:/path/to/fuga"
    }
}

拡張機能（Cursor）

• autoDocstring - Python Docstring Generator
• Better Comments
• Better Jinja
• Biome
• Black Formatter
• Bookmarks
• Code Spell Checker
• Color Highlight
• Color Picker
• Container Tools
• Docker DX
• Error Lens
• es6-string-html
• Even Better TOML
• GitLens — Git supercharged
• HTML CSS Support
• HTMLHint
• indent-rainbow
• Jinja
• Material Icon Theme
• Mypy Type Checker
• One Dark Pro
• Output Colorizer
• Path Intellisense
• Peacock
• Project Manager
• Python
• Python
• Python Debugger
• Rainbow CSV
• Ruff
• Tailwind CSS IntelliSence
• TODO Highlight
• Trailing Spaces
• Vue (Official)

settings.json （Cursor）

settings.json

{
    // ウィンドウのコマンドセンター
    "window.commandCenter": false,
    // ウィンドウのタイトル
    "window.title": "${activeEditorLong}${separator}${rootName}${separator}${activeRepositoryBranchName}",
    // UI全体のサイズ
    "window.zoomLevel": 0.7,
    // コードエディタの文字サイズ
    "editor.fontSize": 17,
    // 行間(px)。 0 にすると自動
    "editor.lineHeight": 21,
    // カラーテーマ
    "workbench.colorTheme": "One Dark Pro",
    // アイコンテーマ
    "workbench.iconTheme": "material-icon-theme",
    // タブの折り返し
    "workbench.editor.wrapTabs": true,
    // 起動時に開かれるエディタ
    "workbench.startupEditor": "none",
    // レイアウト制御
    "workbench.layoutControl.enabled": false,
    // Tab キーを入力したらスペースを挿入する
    "editor.insertSpaces": true,
    // 文字入力時のサジェスト (いったん無効化)
    // "editor.quickSuggestions": {
    //     "other": "off",
    //     "comments": "off",
    //     "strings": "off"
    // },
    // NOTE: 以下を使うと Auto Comment Blocks が効かなくなるのでコメントアウト
    // サジェストを起動する文字
    // "editor.suggestOnTriggerCharacters": false,
    // サジェストの選択
    "editor.suggestSelection": "first",
    // 空白の表示
    "editor.renderWhitespace": "all",
    // フォント設定
    "editor.fontFamily": "HackGen",
    // ツールチップがホバー表示されるまでの時間
    "editor.hover.delay": 1000,
    // ミニマップ表示設定
    "editor.minimap.enabled": true,
    // ミニマップのスライダー表示
    "editor.minimap.showSlider": "always",
    // スティッキースクロールの有効化
    "editor.stickyScroll.enabled": true,
    // マウスホイール感度
    "editor.mouseWheelScrollSensitivity": 3,
    // ルーラーを表示する文字数位置
    "editor.rulers": [
        120,
        200
    ],
    // 保存時の設定
    "editor.codeActionsOnSave": {
        // 保存時に整形
        "source.fixAll": "explicit",
        // インポートを整形
        "source.organizeImports": "explicit",
        // importエラーを解決
        "source.addMissingImports": "explicit"
    },
    // 非基本ASCII文字のハイライト
    "editor.unicodeHighlight.nonBasicASCII": false,
    "[html]": {
        "editor.tabSize": 2,
        "editor.defaultFormatter": "biomejs.biome"
    },
    // HTMLのフォーマット時、勝手に改行させない
    "html.format.wrapLineLength": 0,
    "[xml]": {
        "editor.tabSize": 2,
    },
    "[markdown]": {
        "files.trimTrailingWhitespace": false
    },
    "[sql]": {
        "files.trimTrailingWhitespace": false
    },
    "[java]": {
        "editor.tabSize": 4,
    },
    "[javascript]": {
        "editor.tabSize": 4,
        "editor.defaultFormatter": "biomejs.biome",
        "editor.formatOnSave": true
    },
    "[javascriptreact]": {
        "editor.formatOnSave": true,
        "editor.formatOnType": true
    },
    "[typescript]": {
        "editor.tabSize": 4,
        "editor.insertSpaces": true,
        "editor.defaultFormatter": "biomejs.biome",
        "editor.formatOnSave": true
    },
    "[json]": {
        "editor.defaultFormatter": "biomejs.biome",
        "editor.formatOnSave": true
    },
    "[jsonc]": {
        "editor.defaultFormatter": "biomejs.biome",
        "editor.formatOnSave": true
    },
    "[python]": {
        "editor.defaultFormatter": "charliermarsh.ruff",
        "editor.formatOnSave": true,
        "editor.formatOnType": true
    },
    "[jinja-html]": {
        "editor.tabSize": 2,
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[css]": {
        "editor.defaultFormatter": "biomejs.biome",
        "editor.formatOnSave": true
    },
    // 使用するターミナル
    "terminal.integrated.defaultProfile.windows": "Command Prompt",
    // ファイルの改行コード
    "files.eol": "\n",
    "files.autoGuessEncoding": true,
    // ファイル末尾に空行を入れるか
    "files.insertFinalNewline": true,
    // ファイル末尾の余計な空白を取り除くか
    "files.trimTrailingWhitespace": true,
    // ファイル末尾の余計な空行を取り除くか
    "files.trimFinalNewlines": true,
    // Java用設定
    "files.exclude": {
        "**/.classpath": true,
        "**/.project": true,
        "**/.settings": true,
        "**/.factorypath": true
    },
    "workbench.colorCustomizations": {
        "editorLineNumber.activeForeground": "#00ff84",
        "editorLineNumber.foreground": "#bcbcbc",
        "editor.lineHighlightBackground": "#202020",
        "editor.wordHighlightBackground": "#ffffff00",
        "editor.wordHighlightBorder": "#606060",
        "editor.selectionBackground": "#008064a8",
        "editor.selectionHighlightBackground": "#0020ffc0",
        "editor.selectionHighlightBorder": "default",
        "editor.findMatchBackground": "#ff000070",
        "editor.findMatchBorder": "default",
        "editor.findMatchHighlightBackground": "#ffee0030",
        "editor.findMatchHighlightBorder": "default",
        "tab.border": "#008064",
        "tab.activeBackground": "#005040",
        "tab.hoverBackground": "#005040",
        "statusBar.foreground": "#d6d6d6"
    },
    "todohighlight.keywords": [
        "DEBUG:",
        "REVIEW:",
        {
            "text": "NOTE:",
            "backgroundColor": "rgba(255, 189, 36, 0.5)",
            "color": "#ffffff",
            "borderRadius": "5px",
            "overviewRulerColor": "grey"
        },
        {
            "text": "HACK:",
            "color": "#000",
            "borderRadius": "5px",
            "isWholeLine": false,
        },
        {
            "text": "TODO:",
            "color": "red",
            "borderRadius": "5px",
            "backgroundColor": "yellow",
        },
        {
            "text": "TEST:",
            "color": "red",
            "borderRadius": "5px",
            "backgroundColor": "yellow",
        }
    ],
    "security.workspace.trust.untrustedFiles": "open",
    "indentRainbow.ignoreErrorLanguages": [
        "markdown",
        "plaintext"
    ],
    // インデントがずれている場合の背景色
    "indentRainbow.errorColor": "rgba(128, 32, 32, 0.2)",
    // インデントにスペースとタブスペースが混在している場合の背景色
    "indentRainbow.tabmixColor": "rgba(128, 132, 96, 0.2)",
    // Using the light mode
    "indentRainbow.indicatorStyle": "light",
    // we use a simple 1 pixel wide line
    "indentRainbow.lightIndicatorStyleLineWidth": 1,
    // the same colors as above but more visible
    "indentRainbow.colors": [
        "rgba(255, 255, 64, 0.3)",
        "rgba(127, 255, 127, 0.3)",
        "rgba(255, 127, 255, 0.3)",
        "rgba(79, 236, 236, 0.3)"
    ],
    // Example of regular expression in JSON (note double backslash to escape characters)
    "indentRainbow.ignoreLinePatterns": [
        "/[ \t]* [*]/g", // lines beginning with <whitespace><space>*
        "/[ \t]+[/]{2}/g" // lines beginning with <whitespace>//
    ],
    "cSpell.ignoreRegExpList": [
        "[０-９Ａ-Ｚａ-ｚぁ-んァ-ヶ亜-熙纊-黑]+"
    ],
    "cSpell.userWords": [],
    "cSpell.ignorePaths": [
        "package-lock.json",
        "package.json",
        ".vscode",
        "README.md",
        "Vagrantfile"
    ],
    "biome.suggestInstallingGlobally": false
}

ワークスペース個別に設定するsettings.json（Cursor）

VS Code と同じでいいかと思いきや、ちょっと違うんですよ、最悪です。

settings.json

{
    "python.autoComplete.extraPaths": [
        "path\\to\\hoge",
        "path\\to\\fuga"
    ],
    "cursorpyright.analysis.extraPaths": [
        "path\\to\\hoge",
        "path\\to\\fuga"
    ],
    "terminal.integrated.env.windows": {
        "PYTHONPATH": "C:/path/to/hoge;C:/path/to/fuga",
        "PATH": "C:/path/to/hoge;C:/path/to/fuga"
    }
}

---

ここからはエディタは関係のないお話です。

Prettier の設定ファイル

Biome を使うようになったのでもう使っていません。

.prettierrc

{
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "printWidth": 200,
    "overrides": [
        {
            "files": "*.js",
            "options": {
                "semi": true
            }
        },
        {
            "files": ["*.html"],
            "options": {
                "tabWidth": 2
            }
        }
    ]
}

ESLint の設定ファイル

Biome を使うようになったのでもう使っていません。

ESLint のバージョンが 9 系になったので、内容が変わりました。

eslint.config.js

import js from '@eslint/js';
import globals from 'globals';

// 共通のルール定義
const commonRules = {
    // === 基本的なエラー・警告設定 ===
    // 未使用の変数・関数・パラメータをエラーとして表示する
    'no-unused-vars': 'error',
    // console.log、console.warn 等の使用を警告として表示する（本番環境では不適切なため）
    'no-console': 'warn',
    // 宣言されていない変数や関数が使用されたらエラーとして表示する
    'no-undef': 'error',
    // グローバル変数（ window, document 等）への再代入をエラーとして表示する
    'no-global-assign': 'error',

    // === コードスタイル・フォーマット ===
    // セミコロンが使用されていない場合にエラーとして表示する（Prettier による自動フォーマットで問題なくなるはず）
    semi: 'error',
    // クォートの種類（シングル/ダブル）をチェックする設定だが、 Prettier による自動フォーマットがあるので off にする
    quotes: 'off',
    // インデント（スペース/タブ、数）をチェックする設定だが、 Prettier による自動フォーマットがあるので off にする
    indent: 'off',
    // 行末の不要な空白をチェックする設定だが、 Prettier による自動フォーマットがあるので off にする
    'no-trailing-spaces': 'off',
    // ファイル末尾の改行の有無をチェックする設定だが、 VSCode 標準の自動フォーマットがあるので off にする
    'eol-last': 'off',
    // オブジェクト等の末尾のカンマを必須あるいは禁止にする設定だが、 Prettier による自動フォーマットがあるので off にする
    'comma-dangle': 'off',
    // 行の最大文字数をチェックする設定だが、 Prettier による自動フォーマットがあるので off にする
    'max-len': 'off',

    // === アロー関数・関数関連 ===
    // アロー関数の本体のスタイルを統一する（デフォルトでは可能な限り波括弧を省略する）
    'arrow-body-style': 'error',
    // アロー関数の引数の括弧の使用を統一する（デフォルトでは常に括弧を使用）
    'arrow-parens': 'error',
    // アロー関数の矢印（=>）の前後のスペースを統一する（デフォルトでは前後両方にスペースを配置）
    'arrow-spacing': 'error',
    // argumentsオブジェクトの代わりにrestパラメータの使用を推奨し、 arguments が使用されていればエラーとして表示する
    'prefer-rest-params': 'error',
    // apply()の代わりにスプレッド構文 (...) の使用を推奨し、 apply() が使用されていればエラーとして表示する
    'prefer-spread': 'error',

    // === ジェネレーター・イテレーター ===
    // ジェネレーター関数 function* の * の配置スタイルを統一する（デフォルトでは * の前後両方にスペースを配置）
    'generator-star-spacing': 'error',
    // yield* の * の配置スタイルを統一する（デフォルトでは * の前後両方にスペースを配置）
    'yield-star-spacing': 'error',

    // === インポート・エクスポート ===
    // 同じモジュールからの重複する import 文があればエラーとして表示する
    'no-duplicate-imports': 'error',
    // 同じ名前への不要な名前変更（例: import { foo as foo } ）を禁止し、不要な名前変更があればエラーとして表示する
    'no-useless-rename': 'error',

    // === オブジェクト・クラス ===
    // 不要な計算プロパティキー（例: { ['a']: 1 } を { a: 1 } にすべき）を禁止し、不要な計算プロパティがあればエラーとして表示する
    'no-useless-computed-key': 'error',
    // 不要なコンストラクタ（空のコンストラクタ等）を禁止し、不要なコンストラクタがあればエラーとして表示する
    'no-useless-constructor': 'error',

    // === 変数宣言・スコープ ===
    // 再代入されない変数は const を使用することを強制し、 let/var が使用されていればエラーとして表示する
    'prefer-const': 'error',

    // === テンプレートリテラル・演算子 ===
    // スプレッド/restパラメータの ... の後ろのスペースを統一する（デフォルトではスペースを入れない）
    'rest-spread-spacing': 'error',
    // テンプレートリテラルの ${} 内側のスペースを統一する（デフォルトではスペースを入れない）
    'template-curly-spacing': 'error',
};

// 共通のグローバル変数定義
const commonGlobals = {
    ...globals.browser,
    ...globals.es2022,
    bootstrap: 'readonly',
    Vue: 'readonly',
    axios: 'readonly',
    flatpickr: 'readonly',
};

export default [
    js.configs.recommended,
    // グローバル関数を定義する独自ファイルに対する ESLint の定義
    {
        files: ['src/frontend/static/assets/js/common.js'],
        languageOptions: {
            ecmaVersion: 2022,
            sourceType: 'script', // ES Modules の場合は module を指定する
            globals: commonGlobals,
        },
        rules: {
            ...commonRules,
            // このファイルはグローバル関数を定義するため、 no-implicit-globals をオフにする
            'no-implicit-globals': 'off',
        },
    },
    // その他の JS ファイルに対する ESLint の定義
    {
        files: ['src/**/*.js'],
        ignores: ['src/frontend/static/assets/js/common.js'], // 先に定義した分は除外する
        languageOptions: {
            ecmaVersion: 2022,
            sourceType: 'script',
            globals: {
                ...commonGlobals,
                showAlert: 'readonly', // グローバルから呼び出せる独自関数はこんな感じで定義すると再代入や再定義を防げる、はず
            },
        },
        rules: {
            ...commonRules,
            // 暗黙的にグローバル変数を作成した際にエラーとして表示する
            'no-implicit-globals': 'error',
        },
    },
    {
        ignores: ['node_modules/**', 'dist/**', 'build/**', '*.min.js'],
    },
];

そもそも ESLint を使うための準備

ついでに HTMLHint も含まれています。

console

# プロジェクトフォルダでコマンドを実行
npm install eslint globals

pyproject.toml

Flake8 を辞めて Ruff に移行したので pyproject.toml で全て完結できるようになりました。

.pyproject.toml

[tool.black]
line-length = 120 # 1行の最大文字数
target-version = ['py313'] # 対象とするPythonバージョン

[tool.ruff]
# 基本設定
line-length = 120 # 1行の最大文字数
target-version = "py313" # 対象とするPythonバージョン

# 自動修正を有効にする
fix = true

# 解析対象から除外するパス
exclude = [
    ".git",
    ".venv",
    "__pycache__",
    "migrations",
    "node_modules",
    "chef-repo",
    "docker",
]

# 解析対象のルートディレクトリ
src = ["src"]

[tool.ruff.lint]
# 有効にするルールセット
select = [
    "E",   # pycodestyleのエラー
    "W",   # pycodestyleの警告
    "F",   # pyflakesによる検出
    "I",   # isortによるインポート順序
    "B",   # flake8-bugbearによるバグの検出
    "C4",  # flake8-comprehensionsによる内包表記の改善
    "C90", # mccabeによる循環的複雑度の検出
    "D",   # pydocstyleによるドキュメンテーションスタイルの検出
    "UP",  # pyupgradeによる最新構文へのアップグレード
    "ARG", # flake8-unused-argumentsによる未使用引数の検出
    "SIM", # flake8-simplifyによる単純化提案
    "TCH", # flake8-type-checkingによる型チェックの最適化
    "PIE", # flake8-pieによるPython標準の改善
    "TID", # flake8-tidy-importsによるインポートの整理
    "Q",   # flake8-quotesによるクォートスタイルの統一
    "RUF", # Ruff固有のルール
]

# 無視するルール
ignore = [
    "E203",  # E203: コロンの前に空白がある（pycodestyle）
    "D413",  # D413: 最後のセクションの後に空行がない（pydocstyle）
]

[tool.ruff.lint.isort]
# importの並び順設定
known-first-party = ["src"] # first-partyとして扱うモジュール
force-single-line = false # importを1行1モジュールに強制しない
lines-after-imports = 2 # import群の後に空ける行数

[tool.ruff.lint.mccabe]
max-complexity = 10 # 許容する循環的複雑度の上限

[tool.ruff.lint.pylint]
max-args = 8 # 関数が受け取れる引数の上限

[tool.mypy]
python_version = "3.13" # 解析対象のPythonバージョン
ignore_missing_imports = true # 依存が見つからないimportのエラーを無視
disallow_untyped_defs = false # 型注釈のない関数定義を許可
check_untyped_defs = true # 型注釈のない関数も型チェック
warn_unused_ignores = true # 使われていないtype: ignoreを警告
warn_no_return = true # 戻り値がない可能性を警告
warn_unreachable = true # 到達不能コードを警告
warn_no_explicit_any = true # 暗黙のAnyを警告

# 動的に追加されたメンバ変数へのアクセスを許可
# Flaskのapp.dbやcurrent_app.dbのように、実行時に属性が追加される場合に使用
disable_error_code = ["attr-defined"]

.htmlhintrc

HTMLHint 用の設定ファイルです。

.htmlhintrc

{
    // DOCTYPE宣言を最初に必須にするかどうか
    "doctype-first": false,
    // タグ名を小文字に統一
    "tagname-lowercase": true,
    // 属性名を小文字に統一
    "attr-lowercase": true,
    // 属性値をダブルクォートで囲む
    "attr-value-double-quotes": true,
    // 属性値を空にしない（false: 許可）
    "attr-value-not-empty": false,
    // 属性の重複を禁止
    "attr-no-duplication": true,
    // ID属性の重複を禁止
    "id-unique": true,
    // src属性を空にしない
    "src-not-empty": true,
    // タグのペア（開始タグと終了タグ）を強制
    "tag-pair": true,
    // 自己閉じタグの使用を強制（false: 許可しない）
    "tag-self-close": false,
    // head内のscriptタグを禁止（false: 許可）
    "head-script-disabled": false,
    // styleタグを禁止（false: 許可）
    "style-disabled": false,
    // titleタグを必須にする
    "title-require": true,
    // imgタグにalt属性を必須にする
    "alt-require": true,
    // インラインスタイルを禁止（false: 許可）
    "inline-style-disabled": false,
    // インラインスクリプトを禁止（false: 許可）
    "inline-script-disabled": false,
    // スペースとタブの混在を禁止（"space": スペースに統一）
    "space-tab-mixed-disabled": "space",
    // idとclassの値の命名規則（"dash": ダッシュ区切り）
    "id-class-value": "dash"
}

biome.jsonc

ESLint と Prettier の設定をインポートして整理したものが以下です。

biome.jsonc

{
    // Biome設定ファイルのスキーマバージョン（IDEの補完やバリデーションに使用）
    "$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",

    // バージョン管理システム（VCS）の設定
    "vcs": {
        "enabled": true, // VCS統合を有効化（Gitの設定を自動検出）
        "clientKind": "git", // 使用するVCSクライアントの種類
        "useIgnoreFile": true // .gitignoreファイルを利用してファイルを無視
    },

    // ファイル処理の設定
    "files": {
        // 処理対象とするファイルのパターン
        "includes": ["**", "!node_modules/**", "!**/dist/**", "!**/build/**", "!**/*.min.js", "!**/*.jinja"]
    },

    // フォーマッターの設定（コード整形のルール）
    "formatter": {
        "enabled": true, // フォーマッターを有効化
        "formatWithErrors": false, // エラーがある場合でもフォーマットしない
        "indentStyle": "space", // インデントスタイル: "space"（スペース）または "tab"（タブ）
        "indentWidth": 4, // インデントの幅（スペース数）
        "lineEnding": "lf", // 改行コード: "lf"（Unix）、"crlf"（Windows）、"cr"（Mac）
        "lineWidth": 200, // 1行の最大文字数
        "attributePosition": "auto", // HTML/JSX属性の位置: "auto"（自動）、"multiline"（複数行）
        "bracketSameLine": false, // 開始ブラケットを同じ行に配置しない
        "bracketSpacing": true, // オブジェクトリテラルのブラケット内にスペースを入れる
        "expand": "auto", // 配列やオブジェクトの展開: "auto"（自動）、"always"（常に）、"never"（しない）
        "useEditorconfig": true // .editorconfigファイルの設定を読み込む
    },
    // リンターの設定（コードの品質チェックルール）
    "linter": {
        "enabled": true, // リンターを有効化
        "rules": {
            "recommended": false, // 推奨ルールセットを無効化（個別に設定するため）

            // 複雑度に関するルール（コードの複雑さを減らす）
            "complexity": {
                "noArguments": "error", // argumentsオブジェクトの使用を禁止
                "noUselessConstructor": "error", // 無意味なコンストラクタを禁止
                "noUselessRename": "error", // 無意味な名前の変更を禁止
                "useLiteralKeys": "error", // リテラルキーの使用を強制
                "noAdjacentSpacesInRegex": "error", // 正規表現内の連続するスペースを禁止
                "noExtraBooleanCast": "error", // 不要な真偽値へのキャストを禁止
                "noUselessCatch": "error", // 無意味なcatchブロックを禁止
                "noUselessEscapeInRegex": "error", // 正規表現内の不要なエスケープを禁止
                "noUselessFragments": "warn" // 不要なフラグメントを禁止
            },

            // 正確性に関するルール（バグやエラーを防ぐ）
            "correctness": {
                "noConstAssign": "error", // const変数の再代入を禁止
                "noConstantCondition": "error", // 常に真/偽になる条件式を禁止
                "noEmptyCharacterClassInRegex": "error", // 空の文字クラスを禁止
                "noEmptyPattern": "error", // 空のパターンを禁止
                "noGlobalObjectCalls": "error", // グローバルオブジェクトの直接呼び出しを禁止
                "noInvalidBuiltinInstantiation": "error", // 無効な組み込みオブジェクトのインスタンス化を禁止
                "noInvalidConstructorSuper": "error", // 無効なconstructor内のsuper呼び出しを禁止
                "noNonoctalDecimalEscape": "error", // 8進数エスケープシーケンスを禁止
                "noPrecisionLoss": "error", // 精度の損失を禁止
                "noSelfAssign": "error", // 自己代入を禁止
                "noSetterReturn": "error", // setterのreturn文を禁止
                "noSwitchDeclarations": "error", // switch文内の宣言を禁止
                "noUndeclaredVariables": "error", // 未宣言変数の使用を禁止
                "noUnreachable": "error", // 到達不能なコードを禁止
                "noUnreachableSuper": "error", // 到達不能なsuper呼び出しを禁止
                "noUnsafeFinally": "error", // 安全でないfinallyブロックを禁止
                "noUnsafeOptionalChaining": "error", // 安全でないオプショナルチェーンを禁止
                "noUnusedLabels": "error", // 未使用のラベルを禁止
                "noUnusedPrivateClassMembers": "error", // 未使用のプライベートクラスメンバーを禁止
                "noUnusedVariables": "error", // 未使用変数を禁止
                "useIsNan": "error", // NaNチェックにはisNaN()を使用
                "useValidForDirection": "error", // 有効なforループの方向を使用
                "useValidTypeof": "error", // 有効なtypeof演算子を使用
                "useYield": "error" // ジェネレータ関数ではyieldを使用
            },

            // コードの一貫性やスタイルに関するルールを有効化する項目
            "style": {
                "useConst": "error" // constの使用を強制（再代入されない変数）
            },

            // 疑わしいコードパターンに関するルール（潜在的なバグを検出）
            "suspicious": {
                "noAssignInExpressions": "error", // 式内での代入を禁止
                "noAsyncPromiseExecutor": "error", // 非同期Promiseエグゼキューターを禁止
                "noCatchAssign": "error", // catch句での変数代入を禁止
                "noClassAssign": "error", // クラスの再代入を禁止
                "noCompareNegZero": "error", // -0との比較を禁止
                "noConstantBinaryExpressions": "error", // 定数の二項式を禁止
                "noControlCharactersInRegex": "error", // 正規表現内の制御文字を禁止
                "noDebugger": "error", // debugger文を禁止
                "noDuplicateCase": "error", // switch文の重複したcaseを禁止
                "noDuplicateClassMembers": "error", // 重複したクラスメンバーを禁止
                "noDuplicateElseIf": "error", // 重複したelse ifを禁止
                "noDuplicateObjectKeys": "error", // 重複したオブジェクトキーを禁止
                "noDuplicateParameters": "error", // 重複したパラメータを禁止
                "noEmptyBlockStatements": "error", // 空のブロック文を禁止
                "noFallthroughSwitchClause": "error", // switch文のフォールスルーを禁止
                "noFunctionAssign": "error", // 関数の再代入を禁止
                "noConsole": "warn", // consoleの使用を警告（エラーではない）
                "noGlobalAssign": "error", // グローバル変数の代入を禁止
                "noImportAssign": "error", // importの再代入を禁止
                "noIrregularWhitespace": "error", // 不正な空白文字を禁止
                "noMisleadingCharacterClass": "error", // 誤解を招く文字クラスを禁止
                "noPrototypeBuiltins": "error", // プロトタイプの組み込みメソッドを禁止
                "noRedeclare": "error", // 再宣言を禁止
                "noShadowRestrictedNames": "error", // 制限された名前のシャドウを禁止
                "noSparseArray": "error", // スパース配列を禁止
                "noUnsafeNegation": "error", // 安全でない否定を禁止
                "noUselessRegexBackrefs": "error", // 無意味な正規表現の後方参照を禁止
                "noWith": "error", // with文を禁止
                "useGetterReturn": "error" // getterでreturn文を使用
            }
        },
        // リンターを適用するファイルのパターン
        "includes": ["**", "!node_modules/**", "!**/dist/**", "!**/build/**", "!**/*.min.js"]
    },
    // JavaScript固有のフォーマッター設定
    "javascript": {
        "formatter": {
            "jsxQuoteStyle": "double", // JSX属性のクォートスタイル: "double"（ダブルクォート）
            "quoteProperties": "asNeeded", // オブジェクトプロパティのクォート: "asNeeded"（必要な場合のみ）
            "trailingCommas": "es5", // 末尾のカンマ: "es5"（ES5互換）、"all"（常に）、"none"（なし）
            "semicolons": "always", // セミコロン: "always"（常に）、"asNeeded"（必要な場合のみ）
            "arrowParentheses": "always", // アロー関数の括弧: "always"（常に）、"asNeeded"（必要な場合のみ）
            "bracketSameLine": false, // 開始ブラケットを同じ行に配置しない
            "quoteStyle": "single", // 文字列のクォートスタイル: "single"（シングルクォート）
            "attributePosition": "auto", // JSX属性の位置: "auto"（自動）
            "bracketSpacing": true // オブジェクトリテラルのブラケット内にスペースを入れる
        }
    },

    // HTML固有のフォーマッター設定
    "html": {
        "formatter": {
            "indentScriptAndStyle": false, // <script>と<style>タグ内をインデントしない
            "selfCloseVoidElements": "never" // 空要素を常に自己閉じタグにしない（<br>のまま）
        }
    },
    // CSSファイルのパーサー設定
    "css": {
        "parser": {
            "tailwindDirectives": true // Tailwind CSS v4の構文（@custom-variant、@applyなど）を許可
        }
    },
    // 特定のファイルやパスに対する設定の上書き
    "overrides": [
        // src配下のJavaScriptファイル専用の設定
        {
            "includes": ["src/**/*.js"],
            // グローバル変数の定義（ブラウザAPIやライブラリなど）
            "javascript": {
                "globals": [
                    "$",
                    "bootstrap",
                    "Vue",
                    "flatpickr",
                    "axios"
                ]
            }
        },
        // HTMLファイル専用の設定
        {
            "includes": ["**/*.html"],
            "formatter": {
                "indentWidth": 2 // HTMLファイルのインデント幅を2に設定
            }
        }
    ],
    // アシスト機能の設定（IDE統合機能）
    "assist": {
        "enabled": true, // アシスト機能を有効化
        "actions": {
            "source": {
                "organizeImports": "on" // インポート文の自動整理を有効化
            }
        }
    }
}

Biome を使用するためには以下を実行し、インストールする必要があります。

console

npm install -D --save-exact @biomejs/biome

keybindings.json

ユーザーフォルダ配下
VS Code : AppData > Roaming > Code > User > keybindings.json
Cursor : AppData > Roaming > Cursor > User > keybindings.json

最初のは Cursor のデフォルト設定なので、後ろ二つが個人的に追加したものです。

keybindings.json

// Place your key bindings in this file to override the defaults
[
    {
        "key": "ctrl+i",
        "command": "composerMode.agent"
    },
    {
        "key": "ctrl+alt+l",
        "command": "workbench.action.editor.changeLanguageMode",
        "when": "!notebookEditorFocused"
    },
    {
        "key": "ctrl+alt+u",
        "command": "workbench.action.editor.changeEncoding"
    }
]

これで、 Ctrl + Alt + L でシンタックスハイライトの言語を変更でき、 Ctrl + Alt + U で文字コードを指定して開けます。