nebel/nodejs-hands-on
1
0
Fork 0
mirror of https://github.com/kou029w/nodejs-hands-on.git synced 2025-01-18 16:08:05 +00:00
Code Issues Projects Releases Wiki Activity

fix

Browse source
This commit is contained in:
Nebel 2022-06-08 16:24:45 +09:00
parent aa94168a7e
commit 292439f466
2 changed files with 11 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/debugging-nodejs-in-vscode.md
View file

@ -16,16 +16,16 @@ VSCodeでNode.jsのプログラムのデバッグを行うには、Auto Attach (
自動アタッチを行うにはVSCode内のターミナルを使用しなければなりません。 自動アタッチを行うにはVSCode内のターミナルを使用しなければなりません。
また、Auto Attachを有効にした後、ターミナルを一度再起動する必要があります。これは、ターミナルの右上にある ⚠ アイコンをクリックするか、新しいターミナルを作成することで行えます (3)。 また、Auto Attachを有効にした後、ターミナルを一度再起動する必要があります。これは、ターミナルの右上にある ⚠ アイコンをクリックするか、新しいターミナルを作成することで行えます (3)。
![自動アタッチ設定](assets/nodejs-auto-attach.dio.png) ![](assets/nodejs-auto-attach.dio.png)
_自動アタッチ設定_ _自動アタッチの設定_
## ブレークポイント ## ブレークポイント
Node.jsで実行するプログラムのコードをVSCodeで開き、行番号の左の部分をクリックしてブレークポイントを作成できます。 Node.jsで実行するプログラムのコードをVSCodeで開き、行番号の左の部分をクリックしてブレークポイントを作成できます。
また、もう一度その部分をクリックすることでそのブレークポイントを削除できます。 また、もう一度その部分をクリックすることでそのブレークポイントを削除できます。
![ブレークポイントの作成](assets/nodejs-breakpoint.png) ![](assets/nodejs-breakpoint.png)
_ブレークポイントの作成_ _ブレークポイントの作成_
@ -41,7 +41,7 @@ _ブレークポイントの作成_
$ node hello.js $ node hello.js
``` ```
![Node.jsのデバッグ](assets/nodejs-debugger.png) ![](assets/nodejs-debugger.png)
_Node.jsのデバッグ_ _Node.jsのデバッグ_

14
src/vscode-extensions.md
View file

@ -6,9 +6,9 @@ VSCodeは、標準で備えている機能の他にMarketplaceにある拡張機
VSCodeを起動して、ウィンドウの左端のアクティビティバーにある「拡張機能」をクリックして、Marketplaceにある拡張機能を検索することができます。 VSCodeを起動して、ウィンドウの左端のアクティビティバーにある「拡張機能」をクリックして、Marketplaceにある拡張機能を検索することができます。
![ESLintのインストール](assets/installing-eslint-vscode.png) ![](assets/installing-eslint-vscode.png)
_ESLintのインストール_ _ESLintの拡張機能のインストール_
## 便利な拡張機能の紹介 ## 便利な拡張機能の紹介
@ -26,7 +26,7 @@ _ESLintのインストール_
![ESLintの使用](assets/vscode-eslint-error.png) ![ESLintの使用](assets/vscode-eslint-error.png)
_ESLintの使用_ _ESLintの拡張機能の使用_
このようにESLintの拡張機能をインストールすることによって自動的にESLintを実行し、即時にJavaScriptのコードのチェックを行うことができます。 このようにESLintの拡張機能をインストールすることによって自動的にESLintを実行し、即時にJavaScriptのコードのチェックを行うことができます。
@ -37,9 +37,9 @@ _ESLintの使用_
Prettierの拡張機能をインストールすることによって、VSCodeの編集画面に表示されるコードを自動的に整形することができます。 Prettierの拡張機能をインストールすることによって、VSCodeの編集画面に表示されるコードを自動的に整形することができます。
Marketplaceに「Prettier - Code formatter」という名前で提供されています。これをインストールします。 Marketplaceに「Prettier - Code formatter」という名前で提供されています。これをインストールします。
![Prettier](assets/installing-prettier-vscode.png) ![](assets/installing-prettier-vscode.png)
_Prettier_ _Prettierの拡張機能のインストール_
インストール後、ファイルを開き、`Ctrl`+`Shift`+`P` (macOSの場合は`Cmd`+`Shift`+`P`)を押して、コマンドパレットを開きます。そのなかに インストール後、ファイルを開き、`Ctrl`+`Shift`+`P` (macOSの場合は`Cmd`+`Shift`+`P`)を押して、コマンドパレットを開きます。そのなかに
@ -73,9 +73,9 @@ _Prettier_
VolarはVueでの開発に必要な拡張機能です。 VolarはVueでの開発に必要な拡張機能です。
![Volar](assets/installing-volar-vscode.png) ![](assets/installing-volar-vscode.png)
_Volar_ _Volarのインストール_
Vueとはユーザーインターフェイスを構築するためのJavaScriptフレームワークです。 Vueとはユーザーインターフェイスを構築するためのJavaScriptフレームワークです。