VSCodeで生産性を上げる

はじめに

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

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

おすすめ拡張機能

• Bookmarks

  • 動作	コマンド
    行のbookmarkの設定・解除	option + cmd + k
    次のbookmarkへ	option + cmd + l
    前のbookmarkへ	option + cmd + j

• streetsidesoftware.code-spell-checker
  • スペルミスと思われるものを指摘してくれる。
    
• gitLens
  • 行で（文字がない部分）で一定時間hoverするとそのコードを誰が作成したかわかるので、そこからPRなどを辿ることができる。
• github.copilot, github.copilot-chat
  • AIでコーディングをサポート。なかったら生きていけない。chatの方はソースの読解についてAIに質問できる。
• amazonwebservices.aws-toolkit-vscode, amazonwebservices.codewhisperer-for-command-line-companion, hashicorp.terraform
  • AWSの操作をコマンドラインでやるかた向け。
• ms-vscode-remote.remote-containers, ms-vscode-remote.remote-ssh, ms-vscode-remote.remote-ssh-edit, ms-vscode.remote-explorer
  • remote sshして開発するときに非常に重宝します。
  • 左下の　「リモートウィンドウを開きます」からこんな感じ
    
• dunstontc.vscode-go-syntax, golang.go, premparihar.gotestexplorer, msyrus.go-doc
  • Go言語を用いて開発する方
• oderwat.indent-rainbow
  
• mosapride.zenkaku
  • 全角の検知をしてくれる
    

マルチカーソル

動作	コマンド
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

• 自動保存
• コメントアウト
• 行数の右クリックでgitのlink作成
• 行数の右の色
  • 赤い三角は削除された行
  • 緑のバーは新しく追加された行
  • 青いバーは変更された行
• スクロールバーに小さいが変更が反映される
  • 青はspell checkerに引っかかったもの
• go使っている時にgoのlangurage serverが正常に動作しない場合
  • go restart lunguage server
  • cmd + shift + p -> reload windowを入力

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

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

設定例

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

イメージ図

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

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

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

• cmd + clickで定義元へのjump
  • 定義元がある場所までカーソルを移動させることができる
  • (ちょっと使いづらい点)
    • interfaceから実装へ移動できない
    • 複数結果があるときはピーク(別タブ)で表示される
  • (改善策): settings.jsonを変更
    • 複数の結果がある場合にでるピークを経由しないで直接ファイルへ行きたい場合
      • "editor.gotoLocation.multipleImplementations": "gotoAndPeek",
        • ※たまに実装ではなくmockへ移動してしまうため、gotoではなくgotoAndPeekに変更
    • interfaceから実装へクリックで移動したい場合
      • "editor.gotoLocation.alternativeDefinitionCommand": "editor.action.goToImplementation",
        • '定義へ移動' の結果が現在の場所である場合に実行される代替コマンド
        • デフォルトで参照元へ移動なのでそれを上書きする

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

• Go: Restart Languagge Server
  • goplsを再起動させる、mockgenしてコード自動生成してもエディター上の問題が解消されない場合に実装
  • develover reload windowでも解消される
• Go: Toggle Test File
  • goの実装ファイル<->テストファイルへの移動を行ったり来たりできる。
  • ファイルに移動するだけでカーソルがある関数に対応するtestには飛んでくれない。
• Go: Generate Interface Stubs
  • ${レシーバの変数名} ${struct名} ${interface}を入力するとメソッドを自動生成
• Go: Fill Struct
  • 変数に構造体を入れるときにstructの中身を埋めてくれる
  • メタ情報の追加が"json:\"lastName\""になりバッククォートでの記述でなく設定で変える方法が今のところ見つかっていないので使いづらい。
• Go: Add Tags To Struct Fields
  • 構造体を定義するときにメタ情報を自動定義してくれる。設定でjson以外のメタ情報を定義できるのでよさそう。こちらはバッククォートで記述してくれる。
• Go: Generate Unit Tests For Function
  • ユニットテストを自動で作成してくれる。

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

• goplsの設定
  • https://github.com/golang/tools/blob/master/gopls/doc/settings.md

ソースコードの検索機能

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

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

おわりに

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