Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@tsutsumin_pro

VSCode関連で独自にちょっとだけカスタマイズした環境設定を晒す(part. 3/3)

Last updated at Posted at 2021-04-27

はじめに

自分が主にMacで使ってるテキストエディタVSCodeを使用しながら設定を少しずつ弄ったきたので、色々学習してきた内容を書きはじめる前に、まずはその紹介と使ってみた感想を述べていきます(長くなりそうなので、３回に分けて記事を書きます)。

前提条件

  • macOS Catalina ( バージョン 10.15.7 )
  • Visual Studio Code.app ( バージョン 1.55.2 )

※これらのバージョンはこの記事を書いた時のものであり、設定時のバージョンはこれよりも古い可能性があります。

環境設定

主に、以下の5つを実施しました。

  1. 拡張機能の追加
  2. テーマ(拡張機能の一つ)の実装
  3. 表示されるプロンプトを短くかつ見やすくする
  4. 設定項目一覧から幾つかの項目を変更
  5. キーバインド

ここでは上の５つの内から、
4. 設定項目一覧から幾つかの項目を変更
5. キーバインド
について書いていきます。

4. 設定項目一覧から幾つかの項目を変更

command + ,で、VSCodeを使い易くする設定の一覧を確認できる。この設定というものは、どんなソフトにも必ずと言っていいほど備わっているもので、特に、このVSCodeは大規模なテキストエディタであるからか、その項目数はかなりのものである。それに加えて、インストールした拡張機能用の設定項目もある。さすがにそれらを全て見ていくのは困難なので、こちらの記事等を参考にして、幾つかピックアップして変更してみた。具体的には、settings.jsonを開いて、どんな項目を弄ったのかを振り返る。

settings.json
"editor.tabSize": 2
"editor.renderWhitespace": "all"

１回tabキーを押した時の１つのタブに相当するスペース(空白文字)の数、及びその空白文字をどう表示するか。この辺は好みだけど、スペース数は偶数個にすることが多いのかな。

settings.json
"files.autoSave": "onFocusChange"

ファイルの自動保存をどのタイミングで行うか。フォーマッタと組み合わせると鬼に金棒。

settings.json
"window.zoomLevel": 0

ウィンドウのズームレベル。拡大縮小は人それぞれ。

settings.json
"workbench.sideBar.location": "right"
"workbench.statusBar.visible": true

サイドバーの表示位置と、ステータスバーを表示するかしないか。画面を２分割して、左にブラウザ、右にVSCodeという形式で作業をしていたからか、サイドバーは右側にある方が使い易かった(アクティビティバーも連動して動く)。それに慣れると、VSCodeのみフルスクリーンで使用してても右側にある方が落ち着く..ステータスバーには、Gitのブランチ名やエラーの数、カーソルがある位置の行や列の番号などの主要な情報が記載されているので、常に表示させておく方が良いかも。

settings.json
"editor.minimap.enabled": false
"editor.hover.enabled": false
"editor.parameterHints.enabled": false

ミニマップはコードが長くなればなるほどあった方が良いと思うが、今は非表示中。エディタの領域をなるべく広く使いたい。
また、ホバーやパラメータヒントはコーディング中にピョコピョコ出てきて鬱陶しかったので、これも非表示中。エディタの領域に余計な情報は載せたくない。

settings.json
"files.insertFinalNewline": true
"files.trimFinalNewlines": true

最終行の後に自動的に改行して新しい行を追加し、且つそれよりも下の不要な行を削除する。設定項目欄の説明を日本語化していると

有効にすると、ファイルの保存時に最終行以降の新しい行をトリミングします。

と記述されてあるが、この以降の以という漢字はそれも含むという意味なので、矛盾が生じている。また、"files.trimFinalNewlines"のみを設定しているなら、当然新しい行は手動で挿入しなければいけなくなるが、この場合も最終行のすぐ下の１行だけは削除されないで残るというちょっと特殊な仕様になっている。

settings.json
"files.trimTrailingWhitespace": true

ファイルの保存時に末尾の不要な空白を削除する。

settings.json
"editor.renderControlCharacters": true

制御文字1を表示させて、文字化けを未然に防げるようになる。オススメの設定！

settings.json
"workbench.editor.closeEmptyGroups": false
"workbench.startupEditor": "none"

エディタの最後のタブを閉じた時の空のグループを手動で閉じるようにして、グリッドの一部として保持するようにする。また、VSCode起動時に復元すべき前のセッションが無い場合は、ウェルカムページも無題の新規ファイルも何も表示させないようにする。ここの設定は人それぞれ。

settings.json
"terminal.integrated.copyOnSelection": true

ターミナル上で選択したテキストをコピーする。

settings.json
"editor.formatOnPaste": true
"editor.formatOnType": true

コピペ時と入力時に自動的にフォーマットされるようにする。

settings.json
"workbench.colorTheme": "GitHub Dark"

ワークベンチの配色テーマの指定。

5. キーバインド2

兎にも角にも、出来る限りキーボードのみで操作できるようにしたいのだが、これに関しては今回はそこまで弄っていない。ただ、エディタのタブと、パネルやサイドバーにおける項目のフォーカス移動はできるようにしておきたいので、これもこちらの記事を参考にして、jsonファイルをそのままコピペする。

keybindings.json

[
{ "key": "cmd+]", "command": "workbench.action.nextEditor" },
{ "key": "cmd+[", "command": "workbench.action.previousEditor" },
{
"key": "cmd+]",
"command": "workbench.action.nextSideBarView",
"when": "sideBarFocus"
},
{
"key": "cmd+[",
"command": "workbench.action.previousSideBarView",
"when": "sideBarFocus"
},
{
"key": "cmd+]",
"command": "workbench.action.nextPanelView",
"when": "panelFocus"
},
{
"key": "cmd+[",
"command": "workbench.action.previousPanelView",
"when": "panelFocus"
}
]


これにより、`command`キーと`[`や`]`などのキーを組み合わせることによって、フォーカスを上下左右に移動させることができるようになった。


### その他
`command + shift + p`でコマンドパレットを開き、「shell」と文字を打って、
>シェル コマンド:PATH内に'code'コマンドをインストールします

を有効にした。これによって、ターミナルで`code`とコマンドを入力することにより、ターミナルからVSCodeを起動できるようになった。


## 設定後の感想とこれからの課題
実際、上の設定で充分快適に学習・開発できている。`"editor.renderWhitespace"`により表示される白点は正直要らないかもと思って一度無効にしてみたが、これはあった方が分かり易い(インデントや単語間での空白が偶数個なのか奇数個なのかが一目で分かる)。そして、`"workbench.editor.closeEmptyGroups"`と`"workbench.startupEditor"`の指定値は本当に好みが分かれそう。`"terminal.integrated.copyOnSelection"`に至っては、設定していたのを完全に忘れていて毎回`command + c`でコピーしてた(笑)。また、`"editor.formatOnPaste"`や`"editor.formatOnType"`などの自動フォーマットの設定は拡張機能と競合する上に、そもそも個人で使っている分には今のところは不要な感じなので、無効にしておいた方が良さそうだ。
フォーカス移動のキーバインドも、あまりまだ馴染めてないが活用できている。ただ欲を言えば、ターミナルを使うためパネルにフォーカスを遷移させる度に毎回`command + j`で表示/非表示を切り替える必要があるので、画面上にパネルを表示させたままフォーカスを移せるようにしたい(サイドバーに関しては、使わない時は常に非表示にしているので問題ない)。もう少し詳しく調べて、*json*ファイルを弄ってみなければならない。しかし、[こちらの記事](https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234#ターミナルを全画面表示する)に掲載されている**ターミナルを全画面表示にする**設定や、VSCode外でターミナルを使用する方向にシフトチェンジした方が、よりスマートっぽい。



# 参考記事
- [VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか) - Qiita](https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234)



# 関連投稿記事
- [VSCode関連で独自にちょっとだけカスタマイズした環境設定を晒す(part. 1/3) - Qiita](https://qiita.com/tsutsumin_pro/items/d03a61db36577ad23686)
- [VSCode関連で独自にちょっとだけカスタマイズした環境設定を晒す(part. 2/3) - Qiita](https://qiita.com/tsutsumin_pro/items/4125a63798d24b09f609)
- [VSCodeで制御文字を表示させてみた - Qiita](https://qiita.com/tsutsumin_pro/items/fafc9cde5c40bff0d102)

  1. コンピュータやその周辺機器に特定の命令を指示するための文字のこと。普通の文字と違って、普通にコンピュータを使ってたら画面上に表示されることはない。 ↩

  2. ショートカットキーと混同してしまいがちだと思うが、特定の機能を実行するためのキーの組み合わせのことをショートカットキー或いはホットキーといって、その機能の割り当てられている状態や、割り当てる動作のことをキーバインドまたはキーアサインというようだ。キーの組み合わせと言っても、単一キーの場合にもショートカットキーと呼べるものはある。 ↩

3
2
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
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?