VSCode 拡張機能と設定まとめ

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

拡張機能

• Auto Comment Blocks
• autoDocstring - Python Docstring Generator
• Better Comments
• Better Jinja
• Black Formatter
• Bookmarks
• Code Spell Checker
• Color Highlight
• Docker
• 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
• GitLens - Git supercharged
• HTMLHint
• indent-rainbow
• IntelliCode API Usage Examples （何かのタイミングで勝手に入る）
• 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

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.layoutControl.enabled": 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"
    },
    "editor.unicodeHighlight.nonBasicASCII": false,
    "[html]": {
        "editor.tabSize": 2,
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "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
    },
    "[jinja-html]": {
        "editor.tabSize": 2,
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "terminal.integrated.defaultProfile.windows": "Command Prompt",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "files.eol": "\n",
    "files.autoGuessEncoding": true,
    "files.insertFinalNewline": true,
    "files.trimTrailingWhitespace": true,
    "files.trimFinalNewlines": true,
    "files.exclude": {
        "**/.classpath": true,
        "**/.project": true,
        "**/.settings": true,
        "**/.factorypath": true
    },
    "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.findMatchHighlightBackground": "#ffee0030",
        "editor.findMatchBorder": "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",
        }
    ],
    "security.workspace.trust.untrustedFiles": "open",
    "flake8.args": [
        "--config=.flake8"
    ],
    "indentRainbow.ignoreErrorLanguages": [
        "markdown", "plaintext"
    ],
    // 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

例えばこんな感じ

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 の設定は外出しできたので、別途ファイルに書いた方がいいかも。

.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 の例

.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 も含まれています。

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

.flake8

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

.flake8

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

pyproject.toml

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

.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 がないと怒るので、それだけ無視したい

.htmlhintrc

{
    "doctype-first": false
}

keybindings.json

ユーザーフォルダ配下
AppData > Roaming > Code > User > keybindings.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 で文字コードを指定して開けます。