VSCodeの使い方ファイル作成から実行まで

VSCodeのインストールと日本語化などの拡張機能のインストールも終わったところで今回はVSCodeの使い方の解説をします。基本的にJavaScriptの学習サイトですがhtmlがあまりわからない方でもわかる内容になっています。

画面構成

画面の呼び名を記述しておきます

＞＞＞画像を拡大する

ファイルやフォルダーの作成

画面の色がデフォルトだとみずらい可能性があります。その場合は「ファイル」→「ユーザー設定」→「配色テーマ」で変更することができます。

サイドバーを利用する方法

サイドバーを利用してフォルダーの選択とファイルの作成をします。

下の画像ではアクティビティバーの一番上の「エクスプローラー」ボタンをクリックしてサイドバーの「フォルダーの追加」でファイルを作成するために「VSCode3」を選択しています。ワーークスペースが未作成の場合はこのようにすることができます。

フォルダー「VSCode3」内に「test.html」というファイルを作成しました。

メニューバーを利用する方法

エクセルやワードなどと同じように「新規ファイル」→「名前を付けて保存」を使う方法でも大丈夫です。

HTMLを書いてみよう

JavaScriptの学習サイトですがとりあえずhtmlがわからない人も対象ですので、その辺はご了承ください。

「test.html」を作成したらテキストエディタの先頭に「h」と入力します（新しく作成したファイルの場合はコントロールキーとスペースキーを同時に押すと出てきます）。html形式のファイルで使える変換候補がでてきますので「html:5」を選んでください。するとhtml5形式のテンプレートのひながたが表示されます。ただし「lang=”en”」になってますので「lang=”ja”」に修正してください。

インテリセンスを利用する

タグやスクリプトの先頭の文字を入力すると利用できるタグやコマンドなどの変換候補が表示されます、これをインテリセンスと言っています。ただしVisual Studioと同じで使えないものも表示されたり使えるものが表示されなかったりします。

ボタンのタグを追加しました「bu」と入力すると「<button></button>」が出てきます。

Emmet

「Emmet」を利用することもできます。

「ul」を記述したら「ol*3」と打ち込みます。

エラーを見つける

VSCodeを使うと簡単にエラーを見つけることができます

function clck(){
alert("ボタンがクリックされました。")；
}

上記は「;」が半角ではなく全角になっています。この場合VSCodeが波線を表示してエラーを教えてくれます

JavaScriptを書いてみよう

JavaScriptの記述も非常に容易です。

前のページで「Path Autocomplete」をインストールしましたので、外部に記述したファイルも瞬間で呼び出すことができます。

「test.html」と同じフォルダーに「test.js」を設置してあります。「s」と打ち込んで「script:src」を選ぶと変換コードで「test.js」が出てきますのでそれを選択すればオッケーです

実行してみる

htmlファイルの実行も前のページで「Live HTML Previewer」をインストールしてありますので右クリックして「Open in browser」を選択するだけど既定のブラウザで表示されます。

VSCodeの使い方を解説しましたが、かなり使い勝手がよくなっています。

JavaScriptをメモ帳だけで学習するとなると記述だけで大変な苦労になってしまいます、VSCodeを使うようにしてみてください。

今回は以上で終了です。

お疲れさまでした！