VSCode(Visual Studio Code)の導入 ~Mac~

 プログラミングを書いていく上で”テキストエディタ”というものが必要になってきます。

 

テキストエディター”とは?

テキストエディタ英語text editor)とはコンピュータ文字情報(テキスト)のみのファイル、すなわちテキストファイルを作成、編集、保存するためのソフトウェアプログラム)である。一般的に、文字情報の入力、削除、コピー、貼り付け、検索、置換、整形などの機能を備えている。Windowsメモ帳や、macOSテキストエディットUNIXviEmacsなど、多くのオペレーティングシステム (OS) やデスクトップ環境に最初から装備されている。

出典: Wikipedia

 

 

種類だけあげても

 

 これだけの種類があり、どれを選べばいいのか初心者の方は迷ってしまうと思います。今回は使いやすく、多機能でもある”VSCodee”の導入について書いていきます。

 

 VSCodeは、マイクロソフトによって開発された、無料で利用できるテキストエディタです。このテキストエディタはプログラミング開発に特化したものになっていて、エンジニアには非常に人気が高いエディタの一種です。

 

まずコチラからダウンロードページへ飛びます

VSCodeダウンロードページ

f:id:natori_gorira:20200528212310p:plain

赤丸を押せば、ダウンロードが始まります

 

 

ダウンロードが終わったら、VSCodeをDockにドラッグ&ドロップし、アプリケーションフォルダへ移動しましょう。

 

 

警告が生じた場合は、まず「このソフトウェアは開けません。」という画面で[OK]を選択し閉じます。次に[システム環境設定]を開き、[セキュリティとプライバシー]をクリックして、[一般]タブを開き、画面下部の「ダウンロードしたアプリケーションの実行許可」にある[このまま開く]をクリックしましょう。[開く]が選択できるので、こちらをクリックして完了です。

 

 

 導入は以上で完了ですが、より使いやすくするためにいくつかの拡張機能を追加しましょう。

 

 

  • 日本語表記にしよう

Japanese Language Pack for Visual Studio Code

f:id:natori_gorira:20200528215511p:plain

①をクリック

②にJapanese Language Pack for Visual Studio Codeと打ち込む

③インストールをクリック

④右下に”Restart Now”と出るのでクリックして完了

 

  • HTMLとCSSの自動補完機能を追加しよう

HTML Snippets

 

作業を効率化するために、自動補完の機能を追加しておきます。

f:id:natori_gorira:20200528220342p:plain

①をクリック

②にJHTML Snippetsと打ち込む

③インストールをクリックして完了

 

  • 全角スペースのチェック機能を追加しよう

zenkaku

プログラミングは基本的に、半角で記述していきます。プログラミングコードの中に全角スペース等が入ってしまうと、予期せぬエラーの要因となってしまいます。そのような事象を防ぐために”zenkaku”を導入しましょう。

f:id:natori_gorira:20200528221045p:plain

①をクリック

②にzenkakuと打ち込む

③インストールをクリックして完了

zenkakuを使用するためにはもう一手間いります

f:id:natori_gorira:20200528221329p:plain

①command + shift + pの3つのキーを同時入力し、コマンドパレットという設定ファイルの検索画面を開きます

②「> Enable zenkaku」と入力して選択する command + Qの2つのキーを同時入力し、VSCodeを終了する。

もしくは、以下の通りに「Code」を選択してから「Visual Studio Codeを終了する」を選択して終了する。

ここまでやれれば、zenkakuが使用可能になっています。

 

 

 Qittaなど見ると面白い拡張機能があったりするので、自分で使いやすくカスタマイズしているとちょっと楽しくなりますよ。