Compass note

未踏の地へ踏み出すコンパス的エンジニアノート

VSCode(Visual Studio Code)を使い込んだからわかった。インストールから徹底活用を全部まとめたよ

"VSCode(Visual Studio Code)を使い込んだからわかった。インストールから徹底活用を全部まとめたよ"

出来るプログラマー/エンジニアは、みんな黒い画面でコードを書いていますよねw

こんなの ↓ f:id:team-creative-lab:20200917114436p:plain

なんのエディタを使っているのかな?というと、

・VSCode(Visual Studio Code):マイクロソフト社謹製
・Atom:GitHub謹製

のどちらかが最近人気で使っている人が多いです。

マイクロソフトが提供している VSCode(Visual Studio Code)を結構使い込んでいるので、 インストール方法からカスタマイズのTipsを紹介します。

VSCode(Visual Studio Code)インストール方法

"VSCode(Visual Studio Code)インストール方法"

公式サイトへアクセスします。

Download Visual Studio Code - Mac, Linux, Windows

"VSCodeダウンロード"

Windows 版

特に使っているPCの制約がなければ System Installer でよいでしょう。

約60MB くらいなので、サクッと .exe のダウンロードが終わります。

ダウンロード後、インストーラーに従ってインストールしていきます。

VSCodeインストール同意画面

VSCodeインストールインストールディレクトリ

VSCodeインストール:ショートカット設定

「その他」は好みでチェックしてください。 僕は全てチェックしています。 VSCodeインストール:追加タスクの設定

VSCodeインストール:インストール実行

1-2分で完了します。 VSCodeインストール:インストール完了

楽勝ですねw

憧れのかっこいい黒い画面とのご対面ですw VSCodeインストール:起動

補足:User Installer と System Installer の違い

"VSCode(Visual Studio Code)User Installer と System Installer の違い"

User Installer

・Windows の特定のユーザだけ利用するときに使う ・インストールに管理者権限不要

System Installer

・Windows の全ユーザが利用できるようにする ・インストールに管理者権限が必要

Zip版

・インストール不要でファイルを展開するだけで利用可能 ・自動 update などの機能はない

Mac 版

Mac は Windows と違いインストーラーは 1 つのみなので迷いなくできますね。

VSCode(Visual Studio Code)初期設定

"VSCode(Visual Studio Code)初期設定"

VSCode をインストールした後に、まずこれだけはやっておくべき初期設定をまとめました。

  • VSCode 日本語化

VSCode 日本語化

インストール直後は英語です。

ま、英語で苦じゃない人はそのままでいいですけど、ボクは苦なので速攻で日本語化してきます。

設定じゃなくて日本語パッケージをインストールするところが VSCode っぽいですねw

日本語化Step1:「Japanese Language Pack」を探します

左にある「Exapansion(拡張)」ボタンをクリックして「Japanese Language Pack」を検索ボックスに入力。

"VSCode「Japanese Language Pack"」のインストール1パッケージのインストール

日本語化Step2:「Japanese Language Pack」インストール

インストールボタンをクリック。サクッと秒でインストール完了しますw

VSCode Japanese Language Pack install

日本語化Step3:VSCode を再起動(Restart)

インストール後、右下の「Restart now」をクリックして VSCode を再起動します。

VSCode Japanese Language Pack インストール:再起動

日本語化Step4:VSCode が日本語で起動する

再起動してきたら日本語で起動されます。

VSCode 日本語化:日本語で再起動される

日本語化完了です!

VSCode(Visual Studio Code )日本語文字化け対策

Mac だと気にならないのですが、Windows で秀丸エディタなどで作成した Shift-JIS のファイルを開くと文字化けしちゃいます。

[設定] → [file auto Guess Encoding] で検索し、チェックボックスにチェックを入れます。

Files: Auto Guess Encoding
有効な場合、ファイルを開くときに文字セット エンコードをエディターが推測します。言語ごとに構成することも可能です。

"VSCode(Visual Studio Code )日本語文字化け対策"

これでファイルの文字コードを自動的に判定してくれるので文字化けを防げます。

VSCode(Visual Studio Code)の便利な拡張機能

"VSCode(Visual Studio Code)の便利な機能"

Markdown(マークダウン)プレビュー

Markdown(マークダウン)プレビューの開き方は 2 通りあります。

ショートカットで起動:「Command + k」 → 「v」※ MacOS

マークダウン形式ファイル(.md)を開いている状態で「Command + k」を押して一度離し「v」 を押す

"VSCode:Markdown Preview マークダウンプレビューを表示する01"

コマンドパレットから起動

「Command + Shift + P」で丈夫にコマンドパレットを表示 → コマンドパレットに「Markdown:Open Preview to the Side(プレビューを横に表示)」

"VSCode:Markdown Preview マークダウンプレビューを表示する02"

Mac の VScode(Visual Studio Code)でターミナル(terminal)をショートカットで起動する方法

Mac 版の VSCode(Visual Studio Code)上に CLI のターミナルを使いたい場合のショートカットキーは、[ctrl + shift + @]で起動します。

"Mac の VScode(Visual Studio Code)でターミナル(terminal)をショートカットで起動する方法"

VSCode で使用頻度の多い便利ショートカットキー

"VSCode(Visual Studio Code)の便利な拡張機能"

①カーソル行削除:⇧⌘K
②下に行追加:⌘Enter
③カーソル行を上下移動:⌥↑ or ↓
④カーソル行を上下コピー:⇧⌥↑ or ↓
⑤コメントアウト:⌘/
⑥検索:⌘F
⑦行にインデントを追加:⌘]