前回は実行環境を構築しましたので、今回は開発環境を構築します。[[VSCode]]の例を紹介します。
## Lesson
[[VSCode]]をインストールしていない場合はインストールしましょう。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://code.visualstudio.com/assets/favicon.ico" />
<span class="link-card-v2-site-name">code.visualstudio.com</span>
</div>
<div class="link-card-v2-title">
Visual Studio Code - Code Editing. Redefined
</div>
<div class="link-card-v2-content">
Visual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugging modern web and clo ...
</div>
<img class="link-card-v2-image" src="https://code.visualstudio.com/opengraphimg/opengraph-home.png" />
<a href="https://code.visualstudio.com/"></a>
</div>
[[VSCode Extension]]の[[Deno (VSCode)|Deno]]をインストールします。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://marketplace.visualstudio.com/favicon.ico" />
<span class="link-card-v2-site-name">marketplace.visualstudio.com</span>
</div>
<div class="link-card-v2-title">
Deno - Visual Studio Marketplace
</div>
<div class="link-card-v2-content">
Extension for Visual Studio Code - A language server client for Deno.
</div>
<img class="link-card-v2-image" src="https://denoland.gallerycdn.vsassets.io/extensions/denoland/vscode-deno/3.43.2/1735824995422/Microsoft.VisualStudio.Services.Icons.Default" />
<a href="https://marketplace.visualstudio.com/items?itemName=denoland.vscode-deno"></a>
</div>
[[ファイル保存時に自動でフォーマット (VSCode)|ファイル保存時に自動でフォーマット]]できるようになっていなければ、[[settings.json]]を変更します。
`settings.json`
```json
{
"editor.formatOnSave": true,
"[markdown]": {
"editor.formatOnSave": false // Markdownをフォーマットから除外(好みで)
}
}
```
[[JavaScript]]の[[フォーマッター]]として[[deno fmt]]を使うようにします。
`settings.json`
```json
{
"[javascript]": {
"editor.defaultFormatter": "denoland.vscode-deno",
"editor.tabSize": 2 // インデントサイズは好みで
}
}
```
`main.js` と同じ階層に [[deno.jsonc]] を作成します。
```console
touch deno.jsonc
```
これでカレントディレクトリがDenoプロジェクトであると認識され、[[リンター]]が有効になります。`main.js` を以下のように書き換えてみましょう
```js
function main() {
const sum1 = add(1, 10);
console.log(sum1);
}
main();
```
ファイルを保存して自動フォーマットがかかり、以下のようになれば[[フォーマッター]]は動いています。
```js
function main() {
const sum1 = add(1, 10);
console.log(sum1);
}
main();
```
問題を含むコードで `main.js` をもう一度置き換えてみましょう。
```js
function main() {
const sum1 = add(1, 10);
sum1 = 100;
console.log(sum11);
}
main();
```
`const sum1` の部分にwarningが出れば[[リンター]]は動いています。
![[Pasted image 20250119214956.png]]
## Mission 1
#😵HARD
以下のコードで[[deno lint]]がエラーを出さない理由を説明してください。
```js
function main() {
const sum1 = add(1, 10); // addは定義していないのに...
console.log(sum1);
}
main();
```
%%
解答例
deno lintはAST解析がメインであるため、型解析や変数・関数の未定義チェックを行っていないから。
%%
> [!hint]- Hint 1
> [[deno lint]]は[[AST]]解析がメインです。
---
*NEXT* >> [[📗TDQ-003 変数と宣言]]