はじめに
プログラミングの生産性UPの観点で、VSCode, Linuxコマンド, タイピング, gitコマンドなどを再際勉強中で、今回はVSCodeの設定に関して。
抜け漏れがあったので、個人的に設定しておいた方が良いものを記載しておく（macOS）。
こちらの連載記事がまとまっていて参考になった。
https://codezine.jp/article/corner/936
画面構成と名称
１）キャプションバー：編集中のファイルやワークスペースの表示
２）アクティビティバー
３）プライマリサイドバー
４）エディタグループ
５）セカンダリサイドバー
６）パネル
７）ステータスバー：Gitのブランチ名、GitHubへの発行ボタン、問題の発生状況、カーソル位置、タブのスペース数、文字コード、改行文字、プログラミング言語、フィードバックや通知のショートカットアイコンが表示
ファイル作成：言語 or テンプレート選択
command + n で新規ファイル作成したときに、作成ファイルに
「言語の選択、または 別のエディターを開く を使用して開始します。入力を開始して無視するか、［表示しない］をもう一度クリックします。」
とリンク付き文言があり（今までスルーしていた）、select a languageを選択すると、ファイルの言語を選択できる。
例えば、htmlを選択すると、htmlファイルが作成され、さらにファイル上でhtmlと入力すると、テンプレ候補が表示されて、選択挿入できる。また、ファイルを保存するときに自動で.htmlの拡張子がつく
VSCodeの設定
［Command］＋［,］で設定を開く
ファイル自動保存
- off：自動保存しない（デフォルト）
- afterDelay：Auto Save Delayで指定される時間後（デフォルトは1秒）に自動保存する
- onFocusChange：エディターからフォーカスが外れたら自動保存する
- onWindowChange：ウインドウが切り替わったら自動保存する
マルチカーソル：option + shift
複数箇所に一気に同じ文字列を入力したり選択する
- option：optionキーを押しながらマウスの左クリックを繰り返して1つずつ選択
- optin + shift：optionキーとshiftキーを押しながらマウスをドラッグすることで一気に複数選択
行の折り返し（Editor: Word Wrap）→boundedに設定
- off：行を折り返さない（デフォルト）
- on：行をビューポート（エディターの幅）で折り返す
- wordWrapColumn：「Editor: Word Wrap Column」で折り返す
- bounded：ビューポート（エディターの幅）か「Editor: Word Wrap Column」の小さい方で折り返す
個人的には、boundedで、折り返し状態がエディタを左右にスクロールする手間が省けるのでboundedに設定
開いたファイルの文字エンコーディングを自動判別（Files：Auto Guess Encoding）：ON
Shift JISで扱っているファイルがある場合に対応したいとき
ショートカット
Ctrl + G：特定の行番号にジャンプ
現在開いているファイルで、[Ctrl + G]をクリック。すると中央上部に入力欄が出てくるので飛びたい行番号を入力しエンターを押すと、その行番号に飛ぶ。
拡張機能
コメントの色分け表示 ──Better Comments
ハイライト（*）・警告（!）・疑問点（?）・TODOごとに色分け表示される
ファイルを簡単に複製する―Duplicate action
VSCode上でファイルを複製するには、エクスプローラー上でコピー＋貼り付けの2段階のアクションが必要だが、これを1個のアクションで済ませられる。
ファイルやディレクトリでみいクリックして、［Duplicate file or directory］を選択。
ウインドウ上部に複製後のファイル名（フォルダ名）を入力する欄が表示されるので、適当に編集して［Enter］を押すと複製が実行される。
ChatGPTをVSCodeから利用：ChatGPT – Genie AI
拡張機能インストール後、メニューバーにopen ai api keyを入れるようにアナウンス出るので、入れる
設定画面を開いて、下記にカスタマイズ
enable conversation history：on
open ai model：お好みで。
temperature：プログラミングに関しては精度高く回答して欲しいので0に
chatgptに回答を英語ではなく日本語にしてもらうように設定（必要なら。ただトークン消費量上がる）。
下記のプロンプトがデフォルト英語になっている部分を日本語に変更するとChatGPTの回答も日本語になる
アクティビティで、GenieAIアイコンをクリックすると、プライマリサイドバーがChatGPTとの対話スレッドに切り替わる。試しに、下記のように聞いてみると、レスポンス返ってきた。
CursorやGithub Copilotと一緒だとは思うが、VSCode上で画面を行き来することなくChatGPTを利用できるのは良い。OpenAI APIを利用しているので、gpt4で使いすぎると思わぬ料金請求になっているかもしれない。
純粋なChatGPTの画面に切り替えて質問していると、途中から英語になったりすることがあるので（コードが英語なので）、その手間が省けるのは良さそう。
あとは、対象コードを選択した状態で、右クリック→Genieを選択すると下記を選ベる。
- Genie: Add Tests(テストを追加する)
- Genie: Find bugs(バグを見つける)
- Genie: Optimize (最適化する)：コードを単純化したり、不要なメモリアクセスを削減したりなど。
- Genie: Explain (説明する)
- Genie: Add Comments (コメントの追加)
- Genie: Complete code (コードを完成させる)：未完成の部分やかけている部分を完成させる。
- Genie: Ad-hoc prompt：選択したコードに対して、自分が設定したプロンプトを利用し回答を得る。
VSCodeでGitを使う設定に関しては下記
コメント