LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@landwarrior(ランド ウォリア)

VSCode 拡張機能と設定まとめ

Last updated at Posted at 2021-04-14

Cursor をメインで使っています。 VSCode と同じ設定にしたので、更新。
Code Spell Checker のために例外設定がたくさん必要なのがネックです。
※ Cursor だと一部動かなくなった拡張機能があるみたいなので、そのうち分けて記載するかも。

拡張機能

  • .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

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

例えばこんな感じ

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

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

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 + i は、 Cursor のデフォルトです。
これで、 Ctrl + Alt + L でシンタックスハイライトの言語を変更でき、 Ctrl + Alt + U で文字コードを指定して開けます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?