はじめに

エディターは種類が豊富だが、私はVSCodeが一番使いやすいと感じている
VSCode の布教も兼ねて、初心者向けに VSCode を快適に使える設定と拡張機能をまとめておく
見つけ次第、良さそうなのを追記していく予定

0 準備編

VSCodeはここの公式サイトでダウンロードできる
プログラミングする上では見やすいフォントも大事
Programing Fonts では、紛らわしい文字も比較しながら探せるからオススメ
お気に入り: Fantasque Sans Mono

1 設定編

設定は、GUI での設定画面もあるが、 settings.json に直接書き込むことで詳細な設定ができるようになる
F1 キーを押すと検索画面 (コマンドパレット) が出てくるので、そこで Open Settings (JSON) を開く
　　注) mac では fn キーを押しながらでないと反応しない

ひとまずオススメ設定は以下のとおりです

　　注) フォントの設定は、1番目から順に適用される
　　　　(1番目に無い文字なら、2番目、3番目...のフォントが適用される)
　　　　→ お気に入りのフォントを1番目にしておくと良い
　　　　　(日本語非対応のフォントでも、後ろに日本語をおけばOK)

settings.json

{
    //パンくずの設定
    "breadcrumbs.enabled": true,
    "breadcrumbs.icons": true,
    "breadcrumbs.filePath": "last",

    //ターミナルの設定
    "terminal.integrated.fontSize": 16,
    "terminal.integrated.copyOnSelection": true, //ターミナルの文字列の選択範囲を自動コピー<img width="1071" alt="スクリーンショット 2020-07-10 11.59.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/583fb24d-a889-7453-f647-9f2f444eee1e.png">


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


    //エディターの設定
    "editor.fontFamily": "'Fantasque Sans Mono', Consolas, 'Courier New', monospace",
    "editor.fontSize": 18,
    "editor.fontLigatures": true,
    "editor.renderControlCharacters": true, // 制御文字を表示
    "editor.renderIndentGuides": 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, //ミニマップの表示
    "editor.highlightActiveIndentGuide": true, //インデントの強調表示

    //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", // タブに表示する文字列の設定
    "workbench.activityBar.visible": true,


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

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


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

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


    "diffEditor.renderSideBySide": true, // Git の差分を行内に表示

}

2 拡張機能編

マーケットプレイスにいろんな拡張機能がアップされているので、便利なものを並べておく
VSCode の画面左端の、□が4つ並んだマークのところで拡張機能を管理できる

2-1 とにかく入れた方がいいもの

Japanese Language Pack for Visual Studio Code

Japanese Language Pack for Visual Studio Code

これは必須
だって日本人だもの...
英語だと疲れる

日本語化のやり方
インストール完了後、locale.jsonで "locale": "ja" とする必要がある
再び F1 キーでコマンドパレットを開き、 display を選択

ここで ja を選択し、再起動するか聞かれるので Restart をする

Visual Studio IntelliCode

AI?による入力予測を出してくれる
めちゃくちゃ便利
一度慣れたら、他のエディタが使えない体になってしまう...

Bracket Pair Color 2

カッコを自動でカラーにしてくれる
めっちゃ見やすくなる
設定で色もカスタマイズ可能

Indicator

インデント(スペース)を見えるようにできる
Pythonとかのインデントが重要なの言語で大活躍する

設定編で編集した settings.json に下記を追加

settings.json

    "indenticator.showHighlight": true,
    "indenticator.inner.showHover": true,

Output Colorizer

OUTPUT を色分けしてくれる
かなり見やすくなるから便利

vscode-icons

ファイルとかフォルダをアイコン化し、エクスプローラ風にしてくれる

Settings Sync

GitHub Gist で自分の VSCode の設定 (拡張機能も) を保存できる
複数台のPCを使うときだけでなく、機種変更 (PCでも言うのかは分からないが) でも設定をそのまま引き継げる

GitHub は、作ったプログラムをアップするブログのようなもの
他の人の書いたものに、修正依頼するだけでなく自分で改訂版を上げれたりする
プログラミングをするならアカウントを持っていた方がいい

設定編で編集した settings.json に下記コードを追加

settings.json

    "sync.gist": "自分のGistコード",
    "sync.autoUpload": true, //変更を自動でアップロード
    "sync.forceUpload": false, //強制アップロード
    "sync.syncExtensions": true,  //拡張機能の保存
    "sync.removeExtensions": false,
    "sync.autoDownload": false, //設定の自動ダウンロード
    "sync.forceDownload": false, //強制ダウンロード
    "sync.quietSync": false, //同期の通知オフ

2-2 あると便利なもの

2-2-1 Python 使う人向け

Python

インタプリタのバージョン選択や、実行をGUIでできるので初心者にもおすすめ
もちろんコマンドパレットからでも

Pylance

Pythonの言語サポート
宣伝通り、予測もすぐ出てくる
宣言・インポート後、使っていない変数やライブラリは暗い色に変えて教えてくれる。
上のPythonのインストールが必須

2-2-2 リモート (WSLとか) をやる人向け

Remote Development

VSCode で直接、リモート作業できるようになる
むしろ、リモートには必須
WSL には最適化されてるから使いやすい

　　注) 軽く調べたところ VM を接続先サーバで立ち上げることで操作する模様(たぶん)
　　　　接続先によっては使えない場合も...

2-2-3 グループワークする人むけ

Live Share Extension Pack

GitHubもしくはMicrosoftアカウントでログインすると、共同ワークスペースが作れる
デフォルトでは鯖主となる人がVSCodeで開いているディレクトリが作業スペースとなり、その中身はすべて公開される
また、入室?の承認機能もある
権限も色々いじれるようになっており、ターミナルの操作権限やファイルの閲覧権限も変えれるとか
テキストチャットチャンネルがあったり、コードに直接コメント(コメントアウトではない)をつけれたりする

少し試してみたが、どうやら回線の強度もある程度はいるらしい
また初回時にはデータDLがあるため、少し時間を要する

関連する拡張機能を有効化すれば、ボイスチャットやホワイトボードが使えるようになるので会議もVSCodeだけで完結するようになる

など

2-2-4 Web系とかやる人向け

Auto Rename Tag

HTML, PHP, JavaScript, XML のタグを前後同時に変更してくれる。
あとからタグ変更するのがめっちゃラク
設定編で編集した settings.json に下記を追加

settings.json

"auto-rename-tag.activationOnLanguage": ["*"], //Auto Rename Tag の有効化

HTML Preview

リアルタイムでHTMLの結果を表示してくれる
ブラウザで何度もリロードする必要がなくなる
埋め込み外部サイトは表示できない？(やり方があれば知りたい)

2-2-5 その他オススメなもの

Starbound JSON File Syntax

JSON はイジる回数は少ないかもしれないが、あると助かる