VSCode 拡張機能と設定まとめ

Cursor をメインで使っています。 VSCode と同じ設定にしたので、更新。  
Code Spell Checker のために例外設定がたくさん必要なのがネックです。

# 拡張機能

- .NET Install Tool
- Auto Comment Blocks
- autoDocstring - Python Docstring Generator
- Azure Functions
- Azure Resources （気づいたら入っていた）
- Better Comments
- Better Jinja
- Black Formatter
- Bookmarks
- C#
- C# Dev Kit
- Code Spell Checker
- Color Highlight
- Container Tools （気づいたら入っていた）
- Docker
- Docker DX
- Error Lens
- es6-string-html
- ESLint
- Extension Pack for Java
    - LanguageSupport for Java(TM) by Red Had
    - Debugger for Java
    - Test Runner for Java
    - Maven for Java
    - Gradle for Java
    - Project Manager for Java
    - IntelliCode （これは Java を使わない場合でも別途入れる）
- Flake8
- GitHub Copilot
- GitHub COpilog Chat
- GitLens - Git supercharged
- HTMLHint
- indent-rainbow
- IntelliCode API Usage Examples （何かのタイミングで勝手に入る）
- IntelliCode for C# Dev Kit （C# Dev Kit を入れると入ると思う）
- isort
- Jinja
- Live Share （テレタイプしないなら不要）
- Lombok Annotations Support for VS Code
- Material Icon Theme
- Mypy Type Checker
- One Dark Pro
- Output Colorizer
- Path Intellisense
- Peacock
- PHP Extension Pack
    - PHP Debug
    - PHP IntelliSense
- Prettier - Code formatter
- Project Manager
- Pylance （Pyahon を入れると勝手に入る）
- Python
- Python Debugger （Pyahon を入れると勝手に入る）
- Rainbow CSV
- Select Line Status Bar
- Spring Boot Extension Pack
    - Spring Boot Tools
    - Spring Initializr Java Support
    - Spring Boot Dashboard
- TODO Highlight
- Trailing Spaces
- VS Color Picker
- Vue - Official

# settings.json

```json:settings.json
{
    // ウィンドウのコマンドセンター
    "window.commandCenter": false,
    // ウィンドウのタイトル
    "window.title": "${activeEditorLong}${separator}${rootName}${separator}${activeRepositoryBranchName}",
    // カラーテーマ
    "workbench.colorTheme": "One Dark Pro Darker",
    // アイコンテーマ
    "workbench.iconTheme": "material-icon-theme",
    // タブの折り返し
    "workbench.editor.wrapTabs": true,
    // 起動時に開かれるエディタ
    "workbench.startupEditor": "none",
    // レイアウト制御
    "workbench.layoutControl.enabled": false,
    // 文字入力時のサジェスト
    "editor.quickSuggestions": {
        "other": "off",
        "comments": "off",
        "strings": "off"
    },
    // サジェストを起動する文字
    "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.organizeImports": "explicit"
    },
    // 非基本ASCII文字のハイライト
    "editor.unicodeHighlight.nonBasicASCII": false,
    "[html]": {
        "editor.tabSize": 2,
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    // 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": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true,
        "editor.formatOnType": true
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[python]": {
        "editor.defaultFormatter": "ms-python.black-formatter",
        "editor.formatOnSave": true,
        "editor.formatOnType": true
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jinja-html]": {
        "editor.tabSize": 2,
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    // 使用するターミナル
    "terminal.integrated.defaultProfile.windows": "Command Prompt",
    // IntelliCode の機械学習モデルを活用して、より賢明な候補選択が行えるらしい
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    // ファイルの改行コード
    "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
    },
    // Java用設定
    "java.inlayHints.parameterNames.enabled": "none",
    "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",
    // flake8の設定
    "flake8.args": [
        "--config=.flake8"
    ],
    "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": []
}
```

### ワークスペース個別に設定するsettings.json

例えばこんな感じ

```json:settings.json
{
    "[java]": {
        "editor.tabSize": 2
    },
    "[javascript]": {
        "editor.tabSize": 2,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "python.analysis.extraPaths": [
        "path\\to\\hoge",
        "path\\to\\fuga"
    ],
    "python.autoComplete.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"
    }
}
```

### .prettierrc

Prettier の設定は外出しできたので、別途ファイルに書いた方がいいかも。

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

### .eslintrc.json

ESLint の例

```json:.eslintrc.json
{
    "env": {
        "browser": true,
        "es6": true,
        "es2021": true,
        "jquery": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module",
        "ecmaVersion": "latest"
    },
    "plugins": [
        "jquery"
    ],
    "globals": {
        "Vue": false
    },
    "rules": {
        "semi": "error",
        "arrow-body-style": "error",
        "arrow-parens": "error",
        "arrow-spacing": "error",
        "generator-star-spacing": "error",
        "no-duplicate-imports": "error",
        "no-useless-computed-key": "error",
        "no-useless-constructor": "error",
        "no-useless-rename": "error",
        "prefer-const": "error",
        "prefer-rest-params": "error",
        "prefer-spread": "error",
        "rest-spread-spacing": "error",
        "template-curly-spacing": "error",
        "yield-star-spacing": "error"
    }
}

```

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

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

```sh
# プロジェクトフォルダでコマンドを実行
npm init -yy
npm install eslint@8.57.0 eslint-plugin-jquery eslint-plugin-vue htmlhint
```

### .flake8

flake8 の設定を外出しできました。

```ini:.flake8
[flake8]
max-line-length = 120
ignore = E203, E402, W503
max-complexity = 10
```

### pyproject.toml

Black の改行位置と isort の設定（ `src_paths` は自作モジュールのプロジェクトフォルダからの相対パスを指定すればいい）

```ini:.pyproject.toml
[tool.black]
line-length = 120

[tool.isort]
profile = "black"
line_length = 120
multi_line_output = 3
include_trailing_comma = true
force_grid_wrap = 0
use_parentheses = true
ensure_newline_before_comments = true
split_on_trailing_comma = true
force_single_line = false
skip = [".venv", ".git", "migrations"]
src_paths = ["src/common", "src/frontend", "src/backend"]

[tool.mypy]
python_version = "3.12"
ignore_missing_imports = true
disallow_untyped_defs = false
check_untyped_defs = true
warn_unused_ignores = true
warn_no_return = true
warn_unreachable = true
warn_no_explicit_any = true
```

### .htmlhintrc

必ず DOCTYPE がないと怒るので、それだけ無視したい

```json:.htmlhintrc
{
    "doctype-first": false
}
```

# keybindings.json

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

```json:keybindings.json
// Place your key bindings in this file to override the defaults
[
    {
        "key": "ctrl+shift+l",
        "command": "workbench.action.editor.changeLanguageMode",
        "when": "!notebookEditorFocused"
    },
    {
        "key": "ctrl+k m",
        "command": "-workbench.action.editor.changeLanguageMode",
        "when": "!notebookEditorFocused"
    },
    {
        "key": "ctrl+shift+u",
        "command": "workbench.action.editor.changeEncoding"
    }
]
```

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