VSCode日本語化と拡張機能おすすめ5選!現役WEBエンジニアの設定

f:id:media-gatch:20181118171640j:plain

どうもー・ω・ガッチ(@MediaGatch)です。 現役WEBエンジニアとして稼ぎつつ、僕が学んだことを多くの人へ提供できたらと考えてます。

今回の記事は、VSCodeの日本語化や拡張機能など、初期設定に必要なことをまとめました。

  • VSCode使ってみたいけど、最初の設定ってめんどくさい。
  • 拡張機能がいっぱいあって、何を入れたら良いのかわからない。
  • 実際のWEBエンジニアは、どんな設定しているのか知りたい。

こんな人へおすすめな内容です。

記事の内容はこちら

VSCodeとは

正式名称は、「Visual Studio Code」。 MicroSoft社が開発し、2015年にリリースされたテキストエディタです。

googleトレンドで着実に上昇し続けており、2018年には人気テキストエディタSublime TextやAtomと方を並べるほどにシェアを拡大してます。 拡張性が豊富で、自分好みにカスタマイズできるのも人気の1つです。

これからよりVSCodeユーザーが増えるため、2018年のうちにVSCodeを使ってみるのはありかと。 僕も最近VSCodeへ乗り換えました。前まではSublime Textを使ってましたが、トレンドに乗ると便利な機能がどんんどん開発されていくのでおすすめです。

VSCodeの無限なカスタマイズ性(拡張機能設定)

VSCodeにはインストール後も様々な設定を追加変更することで、自分好みにカスタマイズできます。 見た目の背景色やフォント、コードのシンタックスハイライトはもちろん、github連携や、markdownプレビューなどなど機能を追加してより使いやすくするこも可能です。

見た目(テーマ)を一覧でまとめているサイトもあるので、お好みの見た目(テーマ)があるか確認できます。

vscode themes】
https://vscodethemes.com/

VSCodeの日本語化とgitなどの初期設定

VSCodeのインストールや日本語化お初期設定についてまとめています。

VSCodeのインストール方法

インストールは、公式WEBサイトからダウンロードできます。

Visual Studio Codehttps://code.visualstudio.com/

インストールで設定することはないので、ダウンロードしたファイルを実行して、インストーラーのガイドに従ってインストールをします。

VSCodeの日本語化

f:id:media-gatch:20181118172212j:plain

VSCodeのデフォルト設定は英語になっているので、日本語表示に変更します。

1.ウインドウの左にある「四角」のアイコンをクリックします。 2.検索の入力欄が表示されるので、「japanese」と 入力して「enter」を押します。 3.検索結果に表示された[Japanese Language Pack for Visual Studio Code]をクリックします。 4.「install」ボタンをクリックします。 5.画面右に表示される確認画面の「OK」ボタンをクリックします。

VSCodeのgit操作

VSCodeはデフォルトでgitの操作に対応しています。 gitのインストールはしておく必要があります。macの場合は、homebrewで簡単にできます。

git init (gitの初期化)

初期は、画面左サイドバーの「ソース管理」から行えます。 管理したいフォルダを指定して、初期化をすることができます。

1.画面左サイドバーの「ソース管理」をクリックします。 2.ソース管理のサイドビューが表示されます。 3.サイドビューの上に表示される。ソース管理アイコンをクリックします。 4.管理したいフォルダのパスを入力フォームが表示されるので、入力します。 5.以上で完了です。 6.完了後、ソース管理を開くか聞かれるので、確認したい場合は、「リポジトリを開く」をクリックします。

git commit

コミットも「ソース管理」から行います。

1.コミットしたいファイルをソース管理から選択します。 2.ファイル名の横にあ表示されている「+」をクリックして、ステージングへ移動させます。 3.ソース管理ビューの上の入力欄に、コミット時のメッセージを入力します。 4.チェックマークをクリックすると、コミットできます。 5.以上で完了です。

git remote設定

gitを使ってチームで開発する場合や、複数のPC等で開発を行いたい場合は、gitのクラウドサービスをおすすめします。 無料で、5アカウントまでプライベートリポジトリを使用できるので、bitbucketを使って以下は、説明しています。

ますは、bitbucketのアカウントを取得し、リポジトリを作成します。

【bitbucket】 https://bitbucket.org/

リモートの設定を行うには、ターミナルを使ってコマンドを使用します。 VSCodeの上記メニューの「表示」>「ターミナル」をクリックして、ターミナルを表示します。

使用するコードは以下の2つです。

$ git remote add origin git@bitbucket.org:[bitbucketで作成してリポジトリ名].git
$ git push -u origin master

git remote add origin でリモートリポジトリを登録しています。 git push -u で常にプッシュする対象を指定しています。

git push

プッシュする場合も「ソース管理」から行います。

コミット時にクリックした、チェックボックス横のメニューアイコンをクリックすると、 gitのその他の操作が表示されるので、「プッシュ」をクリックすれば完了です。

git pull

プルも同様に、「ソース管理」から行います。

ソース管理のメニューアイコンから、「プル」を選択するだけです。

VSCode拡張機能のインストール方法

拡張機能のインストールは、日本語化と同じ方法です。 拡張機能名を検索し、表示された一覧から選んでインストールを実行します。

ただ、名前がわからないとできないです。。。。 そんな方のために、おすすめ拡張機能を紹介していますので参考にしてみてください。

VSCode拡張機能おすすめ5選

現役WEBエンジニアの僕が実際に使用している拡張機能を紹介します。 WEBメディアやフロントエンドをメインで行なっているので、フロントよりの設定です。

vscode-icons

サイドバーのファイル表示にアイコンを表示して、見やすくしてくれます。 インストール後に設定を変更すると切り替わります。 ※以下は、macの日本語設定した後の場合です。

code > 「基本設定」>「ファイルアイコンのテーマ」

>> vscode-icons

git history

gitのログ(履歴)をsourcetreeのようにビジュアル化して表示してくれます。 VSCodeのデフォルト機能にはないので、VSCodeでgit管理も全て完結したい人におすすめです。

>> git history

gitLens

gitの履歴や差分を見やすくしてくれます。 履歴のつながりなどは、git historyの方が見やすいかもしれませんが、 修正内容の差分を確認する際は、gitLensの方が見やすいかと思います。

>> gitLens

Markdown All in One

marckdownを使って記事やまとめを書く際に重宝します。 mdファイルを開いた際に、自動でプレビュー表示を開いてくれるのは、おすすめです。 VSCodeの「設定画面」>「拡張機能」>「Markdown All in One」> auto Show Preview To Sideのチェックボックスをチェックするとできます。

>> Markdown All in One

Paste Image

クリップボードにコピーした画像を、Markdownファイルにペーストすると、 ファイル内にマークダウン形式で記載してくれ、画像自体もファイルと同じフォルダ内に貼り付けてくれます。

ペーストは、「⌘ + option + v」で行います。

>> Paste Image

まとめ

VSCodeのインストールや日本語化、おすすめの拡張機能などを書きましたが、 今後もより便利な機能や、実際の運用方法なども交えて紹介していけたらと思います。

VSCodeは今後より人気になるテキストエディタだと思います。 今のうちに試して慣れておく事は、今後WEB開発をしていく上でのメリットとなるはずです。 人気なテキストエディタであり、拡張機能の開発も盛んになり、新しいプログラム言語やフレームワークへの対応も早いのではないでしょうか。