VSCodeで生産性を上げる (original) (raw)

はじめに

こんなツイートを見て執筆をしようと思いました。

https://x.com/reo_kashiwazaki/status/1801103020983546243?s=46&t=yWfp0Ao85uPgDNU-Mzm9ew

実際に、VSCodeは機能の追加や拡張機能の開発が活発に行われており、かつUIもユーザーフレンドリーであるため人気のエディターだと思います。VSCodeを使いこなせるのとそうでないのではエンジニアリングの生産性に大きな差が出てしまうと思います。

パンくずの設定

'>' を入力します。

'>' preferences: Open User Settings (JSON)を入力します。

僕のsettings.jsonは以下です。

{
    "workbench.colorTheme": "GitHub Dark",
    "terminal.integrated.fontFamily": "MesloLGM Nerd Font",

        "terminal.integrated.profiles.osx": {
          "fish": {
              "path": "/opt/homebrew/bin/fish",
              "args": [
                  "-l"
              ]
          }
        },
        "terminal.integrated.defaultProfile.osx": "fish",
            //パンくずの設定
            "breadcrumbs.enabled": true,
            "breadcrumbs.icons": true,
            "breadcrumbs.filePath": "last",

            //ターミナルの設定
            "terminal.integrated.fontSize": 18,
            "terminal.integrated.copyOnSelection": true, //ターミナルの文字列の選択範囲を自動コピー

            //マークダウンの設定
            "markdown.preview.fontFamily": "'Fantasque Sans Mono', -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', 'Ubuntu', 'Droid Sans', sans-serif",
            "markdown.preview.fontSize": 18,

            //エディターの設定
            "editor.fontFamily": "'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace",
            "editor.fontSize": 18,
            "editor.fontLigatures": true,
            "editor.renderControlCharacters": true, // 制御文字を表示
            "editor.suggestSelection": "recentlyUsedByPrefix",
            "editor.acceptSuggestionOnEnter": "off",
            "editor.renderLineHighlight": "all", // 選択行を行番号含めすべてハイライト
            "editor.formatOnPaste": true, // ペースト時に自動でフォーマット
            "editor.formatOnType": true, // 入力した行を自動でフォーマット
            "editor.snippetSuggestions": "inline", // Emmet などのスニペット候補を優先して表示
            "editor.wordWrap": "off", // エディターの幅で折り返し
            "editor.minimap.enabled": false, //ミニマップの表示

            //Emmetの設定
            "emmet.showSuggestionsAsSnippets": true, // Emmet などのスニペット候補を優先して表示
            "emmet.triggerExpansionOnTab": true, // TAB キーで Emmet を展開
            "emmet.variables": {"lang": "ja"}, // Emmet で展開される HTML の言語を指定

            "html.format.wrapLineLength": 0, //行の文字数制限（0で自動改行無効）

            //ワークベンチの設定
            "workbench.editor.enablePreview": false, //タブの上書き
            "workbench.tree.renderIndentGuides": "always",
            "workbench.view.alwaysShowHeaderActions": true,
            "workbench.editor.tabSizing": "shrink",// タブの表示設定
            "workbench.editor.labelFormat": "short", // タブに表示する文字列の設定

            "zenMode.hideActivityBar": false, //禅モード時のアクティビティバー表示(間違えて入ったときに助かる)

            "window.title": "${activeEditorMedium}${separator}${rootName}", // ウインドウ上部に表示する文字列の設定
            "window.zoomLevel": 0,

            //保存時の動作設定
            "files.trimFinalNewlines": true, // ファイルの保存時に最終行以降を削除
            "files.trimTrailingWhitespace": true, // ファイルの保存時に行末の空白を削除

            "[markdown]": {"files.trimTrailingWhitespace": false}, // Markdown のファイルは行末の空白を削除しない

            "diffEditor.renderSideBySide": true,
            "workbench.iconTheme": "vscode-icons",
            "codeQL.telemetry.enableTelemetry": true,
            "opa.dependency_paths.opa": "/Users/atsushi.sada/opa",
            "opa.dependency_paths.regal": "/Users/atsushi.sada/regal",
            "opa.languageServers": [
                "regal"
            ],
            "terminal.integrated.env.osx": {
                "FIG_NEW_SESSION": "1"
            },
            "github.copilot.editor.enableAutoCompletions": true, // Git の差分を行内に表示
}

この設定で以下のような表示のUIが実現します。プラグインやシェルの設定などもありますが概ねwindowの表示に関係しているものが多いです。

導入している拡張機能

拡張機能は上から5つ目くらいのところにあるアイコンから導入できます。

僕が入れている拡張機能一覧は以下です。

$ code --list-extensions

aaron-bond.better-comments
amazonwebservices.aws-toolkit-vscode
amazonwebservices.codewhisperer-for-command-line-companion
bruno-api-client.bruno
christian-kohler.path-intellisense
dunstontc.vscode-go-syntax
esbenp.prettier-vscode
formulahendry.auto-rename-tag
formulahendry.code-runner
github.copilot
github.copilot-chat
github.github-vscode-theme
github.vscode-codeql
github.vscode-pull-request-github
golang.go
hashicorp.terraform
ibm.output-colorizer
mechatroner.rainbow-csv
mosapride.zenkaku
ms-ceintl.vscode-language-pack-ja
ms-python.debugpy
ms-python.python
ms-vscode-remote.remote-containers
ms-vscode-remote.remote-ssh
ms-vscode-remote.remote-ssh-edit
ms-vscode.remote-explorer
ms-vsliveshare.vsliveshare
msyrus.go-doc
oderwat.indent-rainbow
pkief.material-icon-theme
premparihar.gotestexplorer
ritwickdey.liveserver
run-at-scale.terraform-doc-snippets
shd101wyy.markdown-preview-enhanced
streetsidesoftware.code-spell-checker
tailscale.vscode-tailscale
vscode-icons-team.vscode-icons
wayou.vscode-todo-highlight

おすすめ拡張機能

マルチカーソル

動作 コマンド
cmd + d カーソルがある場所の単語を選択できる
cmd + shift + L カーソルがある場所の単語を全て選択できる
option + click 欲しい場所にマルチカーソルをおく
option + shift + click 複数行のマルチカーソル
option + shift + ドラッグ 複数行のマルチカーソル

ファイル移動

動作 コマンド memo
開いているタブの中でファイルを選択して移動 ctrl + tab
開いているタブの中のファイルの位置を指定して移動 ctrl + 1 / 2 / 3... 一番左が1
開いているタブの位置を指定して移動 cmd + 1 / 2 / 3... 一番左が1
開いているタブを閉じる cmd + w

ファイル検索

動作 コマンド memo
ファイル内検索 cmd + f
フォルダ内検索 cmd + shift + f
ファイル名を検索して移動 cmd+p
ファイル内シンボル検索 cmd + shift + o シンボルとは: 関数やクラス、メソッド等のこと
フォルダ内シンボル検索 cmd + t

カーソル移動

動作 コマンド
行数移動 ctrl + g
カーソルを1つ右へ ctrl + f
カーソルを1つ左へ ctrl + b
行頭へ ctrl + a
行末へ ctrl + e
1つ下の行へ ctrl + n
1つ上の行へ ctrl + p
単語間移動 option + ← / →

定義元、参照元、実装元への移動

動作 コマンド
定義へ移動 cmd + click
別タブで定義元へ option + cmd + click
前に戻る ctrl + -
次へ進む ctrl + _

tips

Go言語のデバッグ環境を準備する

デバッグしたいリポジトリに.vscode ディレクトリを作成してそこにlaunch.jsonを準備する。プログラムが動作する起点のパスを明記することを忘れない。そうしないとデバッガが使えません。

設定例

{
    "version":"0.2.0",
    "configurations":[
        {
            "name":"Debug",
            "type":"go",
            "request":"launch",
            "program":"${workspaceFolder}/cmd/sisakulint"
        }
    ]
}

イメージ図

実行とデバッグ（4つ目のアイコン）を押すとデバッグコンソールにデバッグ結果が表示されました！

これでかなりデバッグが容易になりますし、Goユーザーは基本的にこのやり方でソースコードのデバッグをしていると思います。

golang.go : 拡張機能のあれこれ

※vscode action(コマンドパレットから実行できるcmd + shift + p）

拡張機能のアクションにもショートカット設置可能

ソースコードの検索機能

検索機能を使ってソースコード内部から絞り込みをする場合、検索バーに入力しつつ「大文字と小文字を区別する」や「単語単位で検索する」や「正規表現を使用する」などの機能を使います。

含めるファイルや除外するファイルの選定ができる点も嬉しいです。

おわりに

他にも設定はいろいろあると思いますが、誰かの参考になると嬉しいです。