はじめに
エディターは種類が豊富だが、私は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)
{
//パンくずの設定
"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 とにかく入れた方がいいもの
これは必須
だって日本人だもの...
英語だと疲れる
日本語化のやり方
インストール完了後、locale.jsonで "locale": "ja" とする必要がある
再び F1 キーでコマンドパレットを開き、 display を選択
ここで ja を選択し、再起動するか聞かれるので Restart をする
AI?による入力予測を出してくれる
めちゃくちゃ便利
一度慣れたら、他のエディタが使えない体になってしまう...
カッコを自動でカラーにしてくれる
めっちゃ見やすくなる
設定で色もカスタマイズ可能
インデント(スペース)を見えるようにできる
Pythonとかのインデントが重要なの言語で大活躍する
設定編 で編集した settings.json に下記を追加
"indenticator.showHighlight": true,
"indenticator.inner.showHover": true,
OUTPUT を色分けしてくれる
かなり見やすくなるから便利
ファイルとかフォルダをアイコン化し、エクスプローラ風にしてくれる
GitHub Gist で自分の VSCode の設定 (拡張機能も) を保存できる
複数台のPCを使うときだけでなく、機種変更 (PCでも言うのかは分からないが) でも設定をそのまま引き継げる
GitHub は、作ったプログラムをアップするブログのようなもの
他の人の書いたものに、修正依頼するだけでなく自分で改訂版を上げれたりする
プログラミングをするならアカウントを持っていた方がいい
設定編 で編集した 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 使う人向け
インタプリタのバージョン選択や、実行をGUIでできるので初心者にもおすすめ
もちろんコマンドパレットからでも
Pythonの言語サポート
宣伝通り、予測もすぐ出てくる
宣言・インポート後、使っていない変数やライブラリは暗い色に変えて教えてくれる。
上のPythonのインストールが必須
###2-2-2 リモート (WSLとか) をやる人向け
VSCode で直接、リモート作業できるようになる
むしろ、リモートには必須
WSL には最適化されてるから使いやすい
注) 軽く調べたところ VM を接続先サーバで立ち上げることで操作する模様(たぶん)
接続先によっては使えない場合も...
###2-2-3 グループワークする人むけ
GitHubもしくはMicrosoftアカウントでログインすると、共同ワークスペースが作れる
デフォルトでは鯖主となる人がVSCodeで開いているディレクトリが作業スペースとなり、その中身はすべて公開される
また、入室?の承認機能もある
権限も色々いじれるようになっており、ターミナルの操作権限やファイルの閲覧権限も変えれるとか
テキストチャットチャンネルがあったり、コードに直接コメント(コメントアウトではない)をつけれたりする
少し試してみたが、どうやら回線の強度もある程度はいるらしい
また初回時にはデータDLがあるため、少し時間を要する
関連する拡張機能を有効化すれば、ボイスチャットやホワイトボードが使えるようになるので会議もVSCodeだけで完結するようになる
など
###2-2-4 Web系とかやる人向け
HTML, PHP, JavaScript, XML のタグを前後同時に変更してくれる。
あとからタグ変更するのがめっちゃラク
設定編 で編集した settings.json に下記を追加
"auto-rename-tag.activationOnLanguage": ["*"], //Auto Rename Tag の有効化
リアルタイムでHTMLの結果を表示してくれる
ブラウザで何度もリロードする必要がなくなる
埋め込み外部サイトは表示できない？(やり方があれば知りたい)
###2-2-5 その他オススメなもの
JSON はイジる回数は少ないかもしれないが、あると助かる