![サムネイル画像](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijb1dIhdj_DJnpYUoFFIa8cQ4N0TZ-iQeepot1cnYLYzX28UoBDkpXR-4dH_RibkDj-EpgXmTvdT_qmbZQCv0HWMvNuuDkbn2JiMJ_F9EAOC9XZ00fT4HFSZmuIlQd6WAUMj_UVbGKk5U/s408/eyecatch_made_with_unity_on_steam_preparing.png)
![ゆにすち準備編(この画像は、https://www.pakutaso.com/さまから借用しています)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijb1dIhdj_DJnpYUoFFIa8cQ4N0TZ-iQeepot1cnYLYzX28UoBDkpXR-4dH_RibkDj-EpgXmTvdT_qmbZQCv0HWMvNuuDkbn2JiMJ_F9EAOC9XZ00fT4HFSZmuIlQd6WAUMj_UVbGKk5U/s833/eyecatch_made_with_unity_on_steam_preparing.png)
こんにちわ、横浜すみっこクリエイター
です。Unityでゲームを制作して販売するまでの軌跡を描くゆにすち!の準備編です!
今回は、Visual Studio Codeの設定を変更する方法と個人的におすすめ設定を紹介したいと思います。
ゆにすち!シリーズとは
このシリーズではUnityでSTEAM販売を目指す!略してゆにすち!と銘打ち、モデリングもプログラミングも企画も販売も何から何までぜ~んぶド素人の が、PCゲームを考え、制作して、販売するまでの風景を履歴として残していくものです。
この準備編では、3Dゲーム開発プラットフォームであるUnityの導入など、ゲーム制作の開発環境を整えていきます。
この記事のポイント!
- VS Codeは、きめ細かなカスタマイズ可能
- 23のオススメ設定を紹介
Contents
- Visual Studio Code設定のカスタマイズ方法
- 設定オススメ23選
- Code Lens
- Copy With Syntax Highlighting
- Empty Selection Clipboard
- Insert Spaces
- Render Control Characters
- Render Whitespace
- Scroll Beyond Last Line
- Tab Size
- Word Wrap
- Cursor Blinking
- Cursor Smooth Caret Animation
- Font Family
- Font Size
- Format On Paste
- Format On Save
- Format On Type
- Render Characters
- Scale
- Size
- Eol
- Insert Final Newline
- Trim Final Newline
- Trim Trailing Whitespace
Visual Studio Code設定のカスタマイズ方法
Visual Studio Code(以下、「VS Code」といいます)の設定を変更する手順を解説します。![ゆにすち(歯車マークから設定画面を開きます)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRvAnP6z7XFyx0TjC0HuLwemWxPzaE3ju2YgIHWvfFhGzTCC7hj4aUCB1og_l8k0IcOhFxLoUar_okqDSpMtOx-rpY0kNtuYpG_fPwMuyzpKNwGNukibk0G4YcGWgrzyHrQCirL3bzRpE/s420/001.png)
画面左下の > 設定をクリックします。
![ゆにすち(設定画面が表示されました)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIsO0Cv_rVPduknGFpDKroWI47xJNqXwRbzr9AL33eVpt6l43DLwwhQ_TU0gKDv4VQVzn-15-zh6Nfvsfeh2qR_YioZ94fHWC4Z5Jw4DcBBAixApXLSASZv3AECqgZTChbVYxRj9nmlDw/s833/002.png)
エディター領域に設定画面が表示されるので、ここから設定していきます。カテゴリーごとにまとめられた左のリストからたどっていくか、画面上部の検索バーから目的の項目を探すこともできます。
設定オススメ23選
01. Code Lens
![ゆにすち(Code Lens)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJEe-nnCbDcnCOfs4HkOAc0n7AjFE4gRXjGTyeg-SCS9RIn52HEy6fJvfqFIjTAaVCclnFeWouU5b4n6jadjZBSE3SXVegbmtOgwb0pGSYB0xvrS5oIAC2KbUGol-n9Pn5Ez8dsZQFrQg/s697/003.png)
クラスやメソッドなどの参照関係を表示するCode Lens機能の設定です。
- おすすめ値:無効
- 初期値:有効
行間に「Reference」が挿入され、可読性を低下させるので無効にしました。
いずれ複雑なコードを扱うようになって、メリットを感じるようであれば有効に戻すかもしれません。02. Copy With Syntax Highlighting
![ゆにすち(Copy With Syntax Highlighting)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsMG_61jjWtssR1M4OSOT0XQBz_lAZy4JW2fyvT6QI4nbDk881XmCqZ0iBBBndcb25km5X_x2eHjZdWNnDEZdY-dA5k0TNNvaMgslMmLqa9-UmH-yKMqZ8s8aG6-uQI0VCVAhTkL0W5R4/s697/004.png)
エディター上のテキストコピー時に書式設定を含めるかどうかの設定です。
- おすすめ値:無効(プレーンテキスト)
- 初期値:有効
エディターからテキストをコピペするときは、貼り付け先の書式設定に合わせたいので、プレーンテキストになるようにしました。
03. Empty Selection Clipboard
![ゆにすち(Empty Selection Clipboard)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTmef-2chbF7ykx1KhC5q9TCgYKhCX8yRBOA1Ctu2eCeQdPLBJ9CURl-u7rbjsGOY75wxzex3D_7_BkBMYvrWpLXOfpfEwk5DD7yBoqJTZ2TSae1rDy5z4i8fmlpQSntYGS49ARtAdmVU/s697/005.png)
選択範囲を指定しない場合、フォーカスの当たっている行全体をコピーするかどうかの設定です。
- おすすめ値:無効
- 初期値:有効
うっかりコピーしてクリップボードを上書きするミスを防ぐため、無効にしました。
04. Insert Spaces
![ゆにすち(Insert Spaces)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimt4BtDMwspEorp3ynZ-lxfim6os7PsIYN4D-64aOIiLgcO6dIgoqZYd9xLCZ7mRGjmKw28p6LRmv4c2tvyp5iRNyr-9ThTo2Jtvb7EFa_R_4kVcDZRpNv9_jebgtMp74Z2hLZMlUyrWI/s721/007.png)
Tabキーを押下したときに、Tab文字でなく空白文字に置き換えるかどうかの設定です。
- おすすめ値:無効(Tabのまま)
- 初期値:有効
未だ終止符の打たれないTab vs Spaceの長き戦いですが、私はTab派閥です。
05. Render Control Characters
![ゆにすち(Render Control Characters)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-pddyijZ6tjYXGRPX850X0VrTeEO4rHgr2cne1TJ28-fQVcoCzINkmBbzKUF_6lDw_fsQ5AGWeJ2xBCYuA2IdHtwfBX3M8-6oX7pkdI2nuZ5hJdo3TSZ9UVuQRJ4_jQtwEq5Fsyj4vKQ/s697/008.png)
制御文字を表示するかどうかの設定です。制御文字とは、空白や改行など通常表示されない文字コードのことを指します。
- おすすめ値:有効
- 初期値:有効 *
制御文字を記号として表示させることで、入力ミスを防ぐ効果があります。デフォルト値が有効ですがあえて掲載しました。
記事執筆時は「無効」がデフォルトでした。06. Render Whitespace
![ゆにすち(Render Whitespace)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWTAMHURtxW0_MDb70Yo_3GjfVrE2LXOhEfxumGCXemN6Mlk6SqW_pge3vDkympkxBNWNSc5rjmdNgn08aDXDFeXXFGQHpUzfmnRiYjn44fm6XsShoyH9xn9gulEiFb1lS5SLUBbtkHOk/s697/009.png)
空白文字の表示に関する設定です。
- おすすめ値:boundary(単語間の単一空白文字以外をすべて表示)
- 初期値:selection(選択したテキストにのみ空白文字を表示)
インデントや末尾への不要な入力を防ぐために、常時表示にしました。
07. Scroll Beyond Last Line
![ゆにすち(Scroll Beyond Last Line)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilrYytXMDY5CFOem0YoV57vpnA4mwe1UBM89lxrFwMhYDmVduZf3IUGKKTTfbTKB-GzkRn760rZ6BUSOXalrGMmEXT5gsbuo2fbxxpWwOa5QhZ6XqfmrLNUBPtnHCifR88IEhzHYzd5BI/s697/010.png)
最後の行以上にスクロールできるかどうかの設定です。
- おすすめ値:無効(スクロールできない)
- 初期値:有効
私は余計にスクロールできない方が好みです。
08. Tab Size
![ゆにすち(Tab Size)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiGgAEaHnJaauzpawQTcqXxyMrwHO7C-ikxFlbnVVich2mYD0ZToI04beFNMBM4Pln4PKLH-8L9PUiOrlv74OVredsfkr87e89rp3nleyoUP9HjH10iraV7A1mxO0Wnc-jucs4Rhj4ciQ/s697/011.png)
1つのTab入力が半角何文字分に相当するかの設定です。
- おすすめ値:4
- 初期値:4
初期値から変更していません。あえて書きましたが、私は4送りを好みます。
09. Word Wrap
![ゆにすち(Word Wrap)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaBENgSasOWhDZ3Z5uSxlYQz43hzDrBmsGi9vJTr0nJDveyiiCgY02rTwt9wY9cCS6gHpWqVmfIArUoAXjB7MdneDpL7hiDidzf7ddKMMmmexk_8pEWmYl0PX1OleJzK85v8XwoW9eLPs/s697/012.png)
長い行の折り返し方法の設定です。
- おすすめ値:on(折り返す)
- 初期値:off
行番号に隙間ができるのがデメリットですが、折り返しておいた方が可読性は向上すると思います。
10. Cursor Blinking
![ゆにすち(Cursor Blinking)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCaoB4aYuR1ODrmh9AsZBIX1cMO4Xfj7P9TGRtB7CAH9nwfIvFsMwQR-tJ37Ps5h4W6OJWGvIuPmogU1SGJHrkSg4ijxbGeXrFhv7AAyNgLEgOJ-RDmOY24IG-_LxpdhnuOXQjMykCUF8/s721/013.png)
カーソルの点滅アニメーションの設定です。
- おすすめ値:phase
- 初期値:blink
![ゆにすち(カーソルがフェードを伴って点滅します)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_ycnGgZGyveARQO3w73Wn-DbcK4vOrMvDKyxqH0hpwiHDTrBF_RJ2kjzG-xXthMcOpNYWz5-r26Tvap-OA71MsWQWuGx8Q76ChcJogcthaAPKUXelsLfYiP4rvXQ-6kKkGtxD1Gwc-Kk/s580/014.gif)
phaseは、カーソルの点滅フェードがかかり、なめらかに切り替わります。
![ゆにすち(カーソルが瞬間的に点滅します)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxxLPukPtpb1oxEZzq83y7TJ2gp1bCOxsbsxlQIARJibcFUDrLo_s7GK1deQzjboL7B_vGx4h3Tw_r8_rmK6PZh6IWeICwBxPz2Bqf0rN3cUH0v8RZGv1ZjxbDG7izh1NzVKe1cEwnuq8/s580/015.gif)
blinkは、カーソルの点滅が瞬間的に切り替わります。
11. Cursor Smooth Caret Animation
![ゆにすち(Cursor Smooth Caret Animation)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC8BJyhIIrN2NUXIpf05EcDYtNuAJGDuNpP6Kj0v3efmrPZZ-QplB0kNTStaFd86jetekEqbFFxtx5znD_5pUF6IOL_ZDzKwlbqC9_mIqorfUCDgH-Oqf_pYrwp2Nms05wGdyUb9HxVzE/s696/016.png)
カーソルを移動する際のアニメーションの設定です。
- おすすめ値:on
- 初期値:off
![ゆにすち(カーソルが瞬間的になめらかに移動します)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZkhSBpan4-BPO61W8YOsoUU3mSfGF4KUgJWMYGt_Hm1OClmCuQOITIh9foIIMuY5C98gtrWG1pPxe3CYU8vQ-KTc7LkkC8lmXmq3uefaMZdzKF8JJBdvYieNy7alEYXLIurNHREgxXnk/s580/017.gif)
onでは、文字入力や移動時のカーソルの動きが、なめらかになります。
![ゆにすち(カーソルが瞬間的に移動します)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN64GBiYorBcfja9v1tFHBP70q6VAPO-piWo8XNOqs7Ipv8HXuBuXa5LGox0-j5vcDCMNoiTqFElR4fMABPkADjvtu74pK5_1Ypvv-MV4_ktPvf4Nq099uHNBssJJ0MWBk6NdmGjCvB6s/s580/018.gif)
offでは、文字入力や移動時のカーソルの動きが瞬間的です。
12. Font Family
![ゆにすち(Font Family)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBcCAe93Tmjr3OMZ6w29XMXEvJRzY788QGpqYY4KJlmvLJGf5ylx1kfo4cD8Ud8D7qWwDd5z-nDWOxlTxCUCXFk-y2WQlOnoqcnWNUp-sjeBCXVa1M3zMYr3QRwwv4TEq108nEt10-O_U/s721/019.png)
エディターのフォントスタイルの設定です。
- おすすめ値:Cica, Consolas, 'Courier New', monospace
- 初期値:Consolas, 'Courier New', monospace
完全に好みですが、Cicaというフォントを追加しています。あらかじめPCにインストールしておく必要があります。
フォント名にスペース含む場合は、シングルクォーテーション('font name'のように)でくくる必要があります。
フォントの導入方法の解説は割愛します。13. Font Size
![ゆにすち(Font Size)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgepz-pL4Vb7nunhVhlIn35OdMlESBr1-aj4VO-rDj5jIFnscCN4MCuo02R3iv-YaVz4h7YabUvg2zgxmIyFZVIhMGREIhbdFpQwTnXOvGxSsqisdeMTOoinsuViBd5_HNAqjzM-lSyOj8/s721/020.png)
エディターのフォントサイズの設定です。
- おすすめ値:15
- 初期値:14
使用しているフォントや画面サイズなどの環境によって変更する値ですが、私の環境では15が最適です。
14. Format On Paste
![ゆにすち(Format On Paste)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoEIAeF1_Ei3m2TEq3CLTRds4WIquK1PHJNkrtX0gAwyRvsUw5AOtQsHCtNR1BNOvW78nowKvV_eul0Isw_qYCPfY2g7wQxaFRJBB7XIlkWHTEdRSNMURp5nKiHIJOkF6f7fGmiuSuw20/s721/021.png)
コードをコピペしたときに、自動コード整形するかどうかの設定です。
- おすすめ値:有効
- 初期値:無効
ウェブ上からコピペしてきた場合などに便利な設定です。
15. Format On Save
![ゆにすち(Format On Save)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQOO83UPDyBarzLpCD5xsW7A76uXA1J7I_HPO2Nr1Ljlx2mmAdI1yQblnbrMC1851UQqkcB7wojliKzDx6MYuqRQY-N4uLllFbBCyH0AG3Czt-w-_FeDExAYUx4QA0aY_-gC3PFoLHqqk/s721/022.png)
ファイル保存時に自動コード整形するかどうかの設定です。
- おすすめ値:有効
- 初期値:無効
整形忘れ防止のために有効にしています。
16. Format On Type
![ゆにすち(Format On Type)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVAc4i6b_s_WR2ze_SLSgTL3OMyQs7AZHQnE1F8cu_eOe2tdfrP0DtS3sTAlfzhPoN1gJyQFAgZbgAqfDuTvio96UHUR7ZK4L5yA9pOwRrbsST4ov2gnSX2VSu1FI_eoTuRVnBnDHnJ4Y/s721/023.png)
入力時に自動コード整形するかどうかの設定です。
- おすすめ値:有効
- 初期値:無効
これも同じように、整形忘れ防止のため有効にしています。
入力時というのは「末尾のセミコロンを入力」 といった、所定のイベントのことです。17. Render Characters(ミニマップ)
![ゆにすち(Render Characters)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw-8gwCXskUiEHwXcqrE7KVv4V0hMN7IgAinlsAeySd_whythIOs5Cm_QP541t-NNwNC3r76COYSfhUTFBTGwb5CLjqEmWKco8_fw7pVu0y6NGUyEYj-cm-R8ycwUJMDgcdezE73oW2J0/s697/024.png)
ミニマップに文字を表示するか、カラーブロックで簡易的に表示するかの設定です。
- おすすめ値:無効(カラーブロック表示)
- 初期値:有効(文字表示)
ミニマップがあると見た目がごちゃつきやすいので、カラーブロックですっきりと。
18. Scale(ミニマップ)
![ゆにすち(Scale)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnPX2r_hSreN-OL6ftRVrq6qjl3dAMld41TRJ6swippozKpvaxCa3xAvGdQhKRMmkpgoT5ob8ohFPFrU4VymEi_5rvG_X9x1o970R8kZrK02u0GVo3sS_AXYGnqt54YRYPjTpJLdEjkT4/s697/025.png)
ミニマップのサイズの設定です。
- おすすめ値:3
- 初期値:1
環境と好みで3を選んでいます。
19. Size(ミニマップ)
![ゆにすち(Size)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTUilgOEJ94Cp2WOkdA1YV_dTzfOU1rxzi1tRmf8QQp9Dcwplaxptdb32qlZHOD_aWqcaexb0030khX8PkLBpA-o8r-yD2QU6aXtpv51oJRgDUQ0-LQnihteOd0skkjqCjCDj07eIU-O0/s697/026.png)
ミニマップのコンテンツ表現の設定です。
- おすすめ値:fit(コンテンツ量に応じて圧縮表示され、ミニマップはスクロールしない)
- 初期値:proportional(コンテンツサイズは変わらず、ミニマップもスクロールする)
現在地が把握しやすいよう、ミニマップのスクロールをさせないようにしました。
20. Eol
![ゆにすち(Eol)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGuJGQRu0JzxEn6IB-tytGImxhBpl27svQBxrXzT9JEEazVRw5i3S4zpnTJVPPK2RL9CsNFGUd9jKK5KR1X4M2mepCJYJM8XoMXuZ2mdAuUIn_InQyg-KTJTkYjpgFQ61HfjOudd4hW_o/s697/027.png)
改行コードの設定です。
- おすすめ値:\n(LF)
- 初期値:auto(OS固有値を使用)
MacOSのデフォルトの改行コードがLFなので、Win ⇔ Macを行ったり来たりできるようにLF送りにしておきました。
21. Insert Final Newline
![ゆにすち(Insert Final Newline)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkx2slaF2g1k_ARGQCznfSVfMB6QQcr6JGcXGvuuhaKoCvjotng6I46mYII_5g7AiWPfeiYBf0jovrVPdNV8R38keRxSkKNu_PImRvn5gVMFdMguNDwo-UEMw3uO1IGdWCt_drMzYCPu0/s697/028.png)
保存時に最終行に空行を挿入するかどうかの設定です。
- おすすめ値:有効
- 初期値:無効
最終行が空行でないとエラーを出す言語もあるので、空行を自動で入れるようにします。
22. Trim Final Newline
![ゆにすち(Trim Final Newline)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_7rM7hv5FKAH5s8CuMmeUOBUsOaPjgdq7BPNc2fWpHrZvAG9gFEK2RFPx1buuugAxc84PMxR4fmzY70SnrMw2cvaon3AP1aWi0EpwVh6TKOFhr9CTGgtBTJRiCagbTONOczTHn9eousk/s697/029.png)
保存時に最終行以降の空行を削除するどうかの設定です。「Insert Final Newline」で入れた空行は残ります。
- おすすめ値:有効
- 初期値:無効
無駄な行は削除すべきなので、削除有効にしました。
23. Trim Trailing Whitespace
![ゆにすち(Trim Trailing Whitespace)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO2nDA79Ar80q0vE35GRMwT54sFU60VH3194odk1__HCzwF0QYd3vT1VR3BsqlnYXQmj3_zsx4Th6VaRKiiYzKLIwAp9eK4QIBOVC-fpUTv9c7wxUTO0NMu-7d8kcwdVvK-vO02ybOGL4/s697/030.png)
保存時に行末空白を削除するかどうかの設定です。
- おすすめ値:有効
- 初期値:無効
不要な空白はエラーの元なので、削除有効にしました。
まとめ
今回は、VS Codeの設定の変更方法と、私が個人的におすすめする23の設定について紹介しました。ほかにもいろいろ便利な設定がありそうなので、値を変えてみてはいかがでしょうか。
次回予告
Next time on... blender導入!
次回はモデリングソフトblenderをダウンロード、インストールして、ついでに日本語化までの手順を確認します。
では、今回はこの辺で。
コメント
コメントを投稿