テキストエディタVisual Studio Codeをインストールする

テキストエディタVisual Studio Codeをインストールする

テキストエディタはHTMLとCSSのファイル作成と編集くらいにしか使用しないのですが、Microsofが開発したオープンソースのテキストエディタ「Visual Studio Code」を少し使用してみることに。

すると思いのほか使いやすかったので現在使用中のテキストエディタではなく「Visual Studio Code」をインストールして切り替えることにしました。

 

テキストエディタVisual Studio Codeをインストール

 

 

「Visual Studio Code」はVSCodeとも言われているテキストエディタですが、インストールするには、Microsoft AzureのAzure製品で開発者ツールの1つに含まれてるコードエディタ「Visual Studio Code」のダウンロードページからインストールファイルをダウンロードしてきてインストールします。

Visual Studio Codeをダウンロードする手順とインストールする手順はPC環境がMacとWindowsでは少しだけ違います。

どちらのPC環境でもテキストエディタが必要だったのでMacとWindowsの場合に分けてVisual Studio Codeをインストールする手順を記事にしておきます。

 

まずはVisual Studio Codeのダウンロード

 

以下のリンクからVisual Studio Codeのダウンロードページを開きます。

 

Visual Studio Codeダウンロードページを開く

 

 

Visual Studio Codeのファイルをダウンロードするページでは、テキストエディタを使用したいPC環境に合わせてインストールファイルを選びます。

 

  • Macでテキストエディタを使うなら「Mac」という青いボタン
  • Windowsでテキストエディタを使うなら「Windows」の青いボタン

 

Windowsの場合には64bitと32bitがあるので、Visual Studio CodeをインストールするWindowsのバージョン情報で64bitなのか32bitなのかを確認して、インストールファイルをダウンロードしてください。

 

 

Advertisement

 

ダウンロードが終わりPCのフォルダにVisual Studio Codeのzipファイルがあることを確認できたら、ダウンロード完成です。

 

Macにインストールする場合

 

MacでダウンロードしたVisual Studio Codeのファイルを開いてPCにインストールする手順に進みます。

Macにインストールする場合の手順

 

 

Macにインストールするときは「VSCode-darwin-stable.zip」というzipファイルがインストールファイルなので、VSCode-darwin-stable.zipをダブルクリックしてファイルを解凍します。

次に解凍した「Visual Studio Code.app」をMacのアプリケーションフォルダに移動します。

 

 

そしてMacのアプリケーションフォルダに移動したVisual Studio Code.appをダブルクリックで開くとテキストエディタVisual Studio Codeがインストールされてテキストエディタが開きます。

これでテキストエディタのVisual Studio CodeをMacにインストールする場合は完了です。

 

 

後ほどVisual Studio Codeを日本語化します。

 

Windowsにインストールする場合

 

WindowsでダウンロードしたVisual Studio Codeのファイルを開いてPCにインストールする手順に進みます。

Windowsにインストールする場合は、「VSCodeUserSetup-x64-1.46.1exe」のようなファイル名がインストールファイルです。

ファイルでx64の部分が64bit版のインストールファイルという意味で、1.46.1の部分がテキストエディタVisual Studio Codeのバージョンです。

 

Advertisement

 

インストールファイルをダブルクリックするとインストール前のセットアップ画面が表示されます。

 

 

最初に表示するセットアップ画面が「使用許諾契約書の同意」です。「同意する」にチェックを入れて「次へ」をクリック。

 

 

次のセットアップは「インストール先の指定」です。

Visual Studio Codeのインストールするフォルダがセットアップ画面で指定されてるフォルダでよければ「次へ」をクリック。

Visual Studio Codeをインストールするフォルダを指定されたフォルダ以外にしたい場合は、参照をクリックするとフィルダリストが開くので指定先フォルダを選択して「OK」してから「次へ」で進みます。

 

次のセットアップは「プログラムグループの指定」です。

 

 

これはインストールするVisual Studio CodeをWindowsのスタートメニューにショートカットを作成するかどうかのセットアップです。

スタートメニューにショートカットがいらない場合は「プログラムグループを作成しない」にチェックします。

特にこだわりなければチェックしないで「次へ」でオッケーです。

Windowsの場合、Visual Studio Codeをインストールするセットアップがもう少しあります。

 

 

「追加タスクの選択」では、インストールするVisual Studio Codeをデスクトップにアイコンを表示するかどうかをチェックで選べます。

あとはエクスプローラーのファイルとディレクトリのコンテキストメニューに「Codeで開く」を追加するかどうかの選択。

コンテキストメニューはエクスプローラーに保管してるフォルダやファイルを右クリックして表示される縦長のメニューのことです。

それぞれ追加するかどうかを決めてセットアップし、「次へ」でインストール準備に進みます。

 

 

次は「インストール準備完了」です。Visual Studio Codeをインストールするセットアップ内容に間違えなければ「インストール」をクリックすると進行します。

「Visual Studio Codevセットアップウィザードの完了」の画面が表示されたら「完了」をクリックしてください。

そうするとVisual Studio CodeのテキストエディタがWindowsに表示されるのでVisual Studio Codeのインストール成功です。

 

Visual Studio Codeに拡張機能もインストールする

 

テキストエディタのVisual Studio Codeをインストールすることができたら、Visual Studio Codeに拡張機能もインストールするようにします。

 

 

拡張機能のインストールは、テキストエディタの画面左のメニューにある四角のアイコンが4つあって、1つの四角が離れてる形をしたアイコンをクリックして拡張機能をインストールします。

 

 

四角のアイコンから拡張機能を開くと上画像の画面になるので、「Search」ボックスを使ってVisual Studio Codeに拡張機能をインストールします。

今回Visual Studio Codeをインストールしたばかりなので、テキストエディタの画面の説明すべてが英語になってます。

Visual Studio Codeに拡張機能をインストールする練習をかねて、テキストエディタを日本語の説明にする拡張機能をインストールしたいと思います。

 

Visual Studio Codeを日本語化

 

Visual Studio Codeを日本語化する拡張機能は「Japanese Language Pack for Visual Studio Code」です。

 

 

拡張機能の検索ボックスにJapaneseと入力すれば、「Japanese Language Pack for Visual Studio Code」が表示されます。

表示されたら拡張機能名の右端にある「install」のボタンをクリックするとインストールできます。

拡張機能のインストールが終わりテキストエディタ画面が日本語化されてれば成功です。

日本語にできてない場合は、一度Visual Studio Codeを閉じて開き直してください。そうすると日本語化できます。

 

HTMLをプレビューできるようにする

 

拡張機能のインストールをする練習がてらVisual Studio Codeを日本語化できてしまえば、拡張機能のインストールはどれも同じやり方です。

例えば、Visual Studio Codeのインストール後に試しにテキストエディタでHTMLを記述してプレビューできるようにしたいとします。

その場合「Live Server」という拡張機能をテキストエディタに装備してあげます。

 

 

Live Serverのインストール後にテキストエディタで新規のフィルダにHTMLファイルを作成して記述した内容を、エディタ画面右下の「Go Live」をクリックしてブラウザでHTMLプレビューできるようになります。

 

念のため、インストールしたテキストエディタVisual Studio Codeと拡張機能のLive ServerでHTMLプレビューするまでの流れをサッと紹介して、この投稿を締めたいと思います。

 

まずはフォルダを作成してvs codeのテキストエディタにドラッグ&ドロップ

次にエディタ上で

 

  • Macならcommand+N
  • Windowsならcontrol+N

 

でテキストエディタに新規ファイルを表示します。

 

そして

 

  • Macはcommand+S
  • Windowsはcontrol+S

 

でファイル保存して、例えばvscode-test.htmlとファイル名に。

 

そしたら

テキストエディタにビックリマーク!を記述してEnterもしくはtabする。

 

 

EmmetでHTML構造を表示できたので<html lang=”ja”>に修正して<body></body>に何か記述してみる。

 

 

HTMLファイルを保存してから、エディタ画面の右下にある「Go Live」をクリックすると、ブラウザでHTMLのプレビューができます。

プレビューしてからクリックしたGo Liveは「Port:5500」とかになってるのでクリックするとライブプレビューを停止できます。

 

まとめ

 

Visual Studio Codeをインストールすることができると、あとはHTMLやCSSを書いたりしてテキストエディタを使い倒すだけです。

それぞれテキストエディタに書くコードに合わせて拡張機能をインストールしたり、Emmetで効率よくコードを書いたりと今回インストールしたVisual Studio Codeを活用してみてください。

WordPressカテゴリの最新記事