VSCodeの拡張機能をインストール日本語化やパス参照プレビューが簡単

VSCodeでJavaScriptを学習する際に画面を日本語化する「Japanese Language Pack」とブラウザでプレビューを簡単に行える「Live HTML Previewer」、またJavaScriptのコードやCSSなどのファイルを外部に設置した際にパスを補完してくれる「Path Autocomplete」の3つの拡張機能をインストールしておくと非常に便利です。

Japanese Language Pack

「Japanese Language Pack」はVSCodeの画面を日本語化する拡張機能です。英語のままだと使いにくいので必須のアイテムです。日本人なので…

インストール

前のページではVSCodeの本体をインストールしましたが英語版だったので「Japanese Language Pack」をインストールして日本語化します。

VSCodeを起動したら左の「Extentions」の部分をクリックしてください。

検索ボックスがありますので「Japanese Language Pack」と入力してください。

テキストチェインジで「日本語」が出てきますので「Install」をクリックします。

 

＞＞＞画像を拡大する

インストールは一瞬でおわります。

画面右下に「Restart Now」と出てきますのでクリックしてVSCodeを再起動してください。

 

＞＞＞画像を拡大する

 

再起動後は画面が日本語になっています

この画面ならストレスなく利用できます。

Live HTML Previewer

「Live HTML Previewer」は既定のブラウザで簡単にコードを実行して表示することができるようにする拡張機能です。いちいち保存したファイルをブラウザで表示させるのは大変なのでこの機能も必須です。

インストール

「Live HTML Previewer」も日本語化と同じように簡単にインストールすることができます。

日本語化の時と同じように左の欄の拡張機能をクリックします。

検索欄に「Live HTML Previewer」と入力すると「Live HTML Previewer」が出てきますのでそれをインストールします。

 

「インストール」の文字部分が歯車のマークになればインストールは完了です。

使い方

とりあえず使い方も説明します。

「ファイル」→「新規ファイル」でファイルを作成します

 

「ファイル」→「名前を付けて保存」

 

＞＞＞画像を拡大する

適当なフォルダーに名前を付けて保存します。

このときに注意してほいいのはファイルの種類です、ここでは「HTML」を選んでいます、拡張子が「.html」になります。ファイル名は「test」としています。保存先はデスクトップにしました。

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>はじめてのJavaScript</title>
</head>
<body>
<button>ボタン</button>
<script>
function alt() {
alert("ボタンがクリックされました。"); 
}
</script>
</body>
</html>

＞＞＞画像を拡大する

VSCodeの左側の画面にコードをコピペして保存してみてください。

 

コードが表示されている画面の上で右クリックをすると「Open in browser」がでます。

それを選択すると既定のブラウザでコードが実行されます。

便利ですね

このファイルは「Path Autocomplete」の使い方でも利用しますのでそのままにしておいてください。

Path Autocomplete

「Path Autocomplete」はファイルパスの補完をしてくれる拡張機能です。

インストール

「Path Autocomplete」のインストールも非常に簡単です。

画面左の拡張機能をクリックして検索欄に「Path Autocomplete」を入力して「インストール」を押します。

 

「インストール」のボタンが歯車になればインストール完了です。

一瞬ですね

使い方

サクッと使い方を解説します。

「拡張機能 Path Autocomplete ×」のところでタブを閉じてください。

 

画像ファイルを「Live HTML Previewer」で作成した「test.html」と同じフォルダーに保存してください。上記の例ではデスクトップになっています。

画像ファイルがない方は下記からダウンロードしてください

＞＞＞画像をダウンロードする

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>はじめてのJavaScript</title>
</head>
<body>
<img src="" alt="画像">
<script>
function alt() {
alert("ボタンがクリックされました。"); 
}
</script>
</body>
</html>

「<button>ボタン</button>」を「<img src="" alt="画像">」に変更してあります。

 

「src=""」の””の間にカーソルをあててコントロールキーとスペースキーを同時に押すと利用可能なファイルパスが表示されますので適当なものを選んでください。

ただし使えないものもあったり出てこないものもあったりして少し変です。

以上が「Path Autocomplete」の使い方です。

今回は3個の拡張機能のインストールと使い方を解説しました。

JavaScriptを学習したりコードを作成するのに大変便利な機能です。ぜひインストールをして使いやすいエディタにしておいてください。

今回の拡張機能の他にも便利な機能が沢山用意されています、検索してみて使えそうなものがあればどんどん取り入れてみてもいいと思います。

 

このページはこれでおしまいです。

お疲れさまでした

前のページ　 INDEX　 次のページ

コメント

ホーム