JavaScriptのファイルをVSCodeで編集してみた

JavaScriptのファイルを編集する際、VSCode(Visual Studio Code)というエディタを利用すると、コードを見やすくしたり、コードの自動補完を行ってくれたりして、大変便利である。

今回は、以下の記事で紹介しているJavaScriptのソースコード(demo.js)を開いたり編集したりしてみたので、その内容を共有する。

Spring BootでJavaScriptによるチェック処理を実装してみたこれまでは、Spring Bootによるチェック処理を利用してきたが、今回はJavaScriptによって同等のチェック処理を実装してみた...

前提条件

下記記事の手順に従って、VSCodeのインストールとVSCodeの日本語化が完了していること。

PlantUMLをVSCode上で利用してみたPlantUMLは、VSCode(Visual Studio Code)上で編集するようにすると、ソースコードを色つきで分かりやすく表示...

やってみたこと

1. VSCode上でのファイルオープン
2. VSCode上でのファイル編集

VSCode上でのファイルオープン

VSCodeを起動し、JavaScriptのソースコード(demo.js)を開く手順は、以下の通り。

1) スタートメニューから「Visual Studio Code」メニューを選択する。

2) 以下のように、VSCodeの画面が起動する。

3) 「ファイル」メニューから「フォルダーを開く」を選択する。

4) 開く予定のJavaScriptのソースコード(demo.js)が存在するフォルダを指定し、「フォルダーの選択」ボタンを押下する。

5) 以下のように、指定したフォルダに存在するファイル(demo.css、demo.js)が表示されることが確認できる。

6) 「demo.js」をダブルクリックすると、以下のように、右側にJavaScriptのソースコード(demo.js)が色付きで表示される。

なお、IntelliJ IDEA上でJavaScriptのソースコード(demo.js)を開いた場合は、以下のような表示になる。

Code VillageはJavaScriptを中心としたサポート体制が充実したプログラミングスクールだったJavaScriptや、JavaScriptのフレームワーク「React」「Vue」を中心にオンラインで学習できるプログラミングスクール...

VSCode上でのファイル編集

VSCode上でファイルを編集する操作は、以下の通り。

1) 開いたJavaScriptのソースコード(demo.js)を編集中の画面内容は以下の通りで、コードの自動補完を行ってくれることが確認できる。

2) 「ファイルを開く」ボタンを押下すると、ファイル名の入力欄が表示される。

3) ファイル名を入力し、カーソルを外すと、以下のように、指定した新しいファイルが作成される。

4) ファイルを編集後、「ファイル」メニューから「保存」を選択すると、編集したファイルが保存される。

要点まとめ

• JavaScriptのファイルを編集する際、VSCode(Visual Studio Code)というエディタを利用すると、コードを見やすくしたり、コードの自動補完を行ってくれたりして、大変便利である。