出来るプログラマー/エンジニアは、みんな黒い画面でコードを書いていますよねw
こんなの ↓
なんのエディタを使っているのかな?というと、
・VSCode(Visual Studio Code):マイクロソフト社謹製 ・Atom:GitHub謹製
のどちらかが最近人気で使っている人が多いです。
マイクロソフトが提供している VSCode(Visual Studio Code)を結構使い込んでいるので、 インストール方法からカスタマイズのTipsを紹介します。
- VSCode(Visual Studio Code)インストール方法
- VSCode(Visual Studio Code)初期設定
- VSCode(Visual Studio Code)の便利な拡張機能
- VSCode で使用頻度の多い便利ショートカットキー
VSCode(Visual Studio Code)インストール方法
公式サイトへアクセスします。
Download Visual Studio Code - Mac, Linux, Windows
Windows 版
特に使っているPCの制約がなければ System Installer でよいでしょう。
約60MB くらいなので、サクッと .exe のダウンロードが終わります。
ダウンロード後、インストーラーに従ってインストールしていきます。
「その他」は好みでチェックしてください。 僕は全てチェックしています。
1-2分で完了します。
楽勝ですねw
憧れのかっこいい黒い画面とのご対面ですw
補足:User Installer と System Installer の違い
User Installer
・Windows の特定のユーザだけ利用するときに使う ・インストールに管理者権限不要
System Installer
・Windows の全ユーザが利用できるようにする ・インストールに管理者権限が必要
Zip版
・インストール不要でファイルを展開するだけで利用可能 ・自動 update などの機能はない
Mac 版
Mac は Windows と違いインストーラーは 1 つのみなので迷いなくできますね。
VSCode(Visual Studio Code)初期設定
VSCode をインストールした後に、まずこれだけはやっておくべき初期設定をまとめました。
- VSCode 日本語化
VSCode 日本語化
インストール直後は英語です。
ま、英語で苦じゃない人はそのままでいいですけど、ボクは苦なので速攻で日本語化してきます。
設定じゃなくて日本語パッケージをインストールするところが VSCode っぽいですねw
日本語化Step1:「Japanese Language Pack」を探します
左にある「Exapansion(拡張)」ボタンをクリックして「Japanese Language Pack」を検索ボックスに入力。
パッケージのインストール
日本語化Step2:「Japanese Language Pack」インストール
インストールボタンをクリック。サクッと秒でインストール完了しますw
日本語化Step3:VSCode を再起動(Restart)
インストール後、右下の「Restart now」をクリックして VSCode を再起動します。
日本語化Step4:VSCode が日本語で起動する
再起動してきたら日本語で起動されます。
日本語化完了です!
VSCode(Visual Studio Code )日本語文字化け対策
Mac だと気にならないのですが、Windows で秀丸エディタなどで作成した Shift-JIS のファイルを開くと文字化けしちゃいます。
[設定] → [file auto Guess Encoding] で検索し、チェックボックスにチェックを入れます。
Files: Auto Guess Encoding 有効な場合、ファイルを開くときに文字セット エンコードをエディターが推測します。言語ごとに構成することも可能です。
これでファイルの文字コードを自動的に判定してくれるので文字化けを防げます。
VSCode(Visual Studio Code)の便利な拡張機能
Markdown(マークダウン)プレビュー
Markdown(マークダウン)プレビューの開き方は 2 通りあります。
ショートカットで起動:「Command + k」 → 「v」※ MacOS
マークダウン形式ファイル(.md)を開いている状態で「Command + k」を押して一度離し「v」 を押す
コマンドパレットから起動
「Command + Shift + P」で丈夫にコマンドパレットを表示 → コマンドパレットに「Markdown:Open Preview to the Side(プレビューを横に表示)」
Mac の VScode(Visual Studio Code)でターミナル(terminal)をショートカットで起動する方法
Mac 版の VSCode(Visual Studio Code)上に CLI のターミナルを使いたい場合のショートカットキーは、[ctrl + shift + @]で起動します。
VSCode で使用頻度の多い便利ショートカットキー
①カーソル行削除:⇧⌘K
②下に行追加:⌘Enter
③カーソル行を上下移動:⌥↑ or ↓
④カーソル行を上下コピー:⇧⌥↑ or ↓
⑤コメントアウト:⌘/
⑥検索:⌘F
⑦行にインデントを追加:⌘]