VSCodeの「Uncalled function checks」について

VSCode 2019年11月（version 1.41）の更新内容のドキュメントを読んでいたら、「Uncalled function checks」なる機能が実装されたとありました。


Uncalled function checks
https://code.visualstudio.com/updates/v1_41#_uncalled-function-checks


if文の条件のカッコの中で、例えば下の例のようにオブジェクトのプロパティを評価しているつもりで書いた場合、

import * as fs from 'fs';
fs.stat('./index.ts', function(err, stats) {
   if (stats.isDirectory) {
    handleDirectory(stats);
  } else {
    console.log('Not a directory');
  }
});

function handleDirectory(stats: fs.Stats) {
  console.log(stats);
}

下のように「stats.isDirecroty」の下に波線が出て問題があることを示してくれるようになったそうです。

この例では、stats.isDirectory というのはプロパティではなく関数なので、stats.isDirectory() と書かなければ正しく動きません。

isDirectoryの後の「()」を忘れると、関数の戻り値ではなく関数そのものが評価されてしまうため、この例では常にif文の中の処理が実行されることになってしまいます。

もしプログラマが「stats.isDirectoryはboolean型のプロパティだ」と思い込んでしまっていたら、今までならこのようなバグにすぐに気付くことは難しかったのではないかと思います。


かなり細かい変更点ですが、良い改善だと思います。

VSCodeでWebアプリケーションを開発するときに便利な拡張機能

今回は日頃便利に使っているVSCode拡張機能をメモしておきます。

1. oneline-scroll

標準の動きだとCtrl+Up、Ctrl+Downでスクロールした時にカーソルも一緒に動くので、そのままスクロールしているとカーソルが画面の外に行ってしまって使いづらいのですが、これを入れると見た目のカーソル位置を変えずに一行ずつエディタの表示内容をスクロールさせることが可能になります。

この拡張機能のデフォルトのキーバインドは Alt+p, Alt+n ですが、私は下のように Ctrl+Up、Ctrl+Down に変更して使っています。

keybindings.json

  {
    "key": "ctrl+down",
    "command": "onelinescroll.scrollDown"
  },
  {
    "key": "ctrl+up",
    "command": "onelinescroll.scrollUp"
  },

2. Auto Rename Tag

HTMLやJSXファイルを編集しているときに開始タグを変更すれば自動的に終了タグも変更してくれます。


2019/12/20 追記：
VSCodeが標準で対応したようなのでこの拡張はもう必要ないかもしれません。
https://code.visualstudio.com/updates/v1_41#_html-mirror-cursor

3. htmltagwrap

選択領域を Alt+w 一発でタグで囲んでくれます。

4. GitLens — Git supercharged

エディタ画面内に最後にコミットした日付やコミットした人の名前などが表示されます。他にもGitのさまざまな状態をVSCode内で確認出来るようになります。

5. Git History

こちらもGitのための拡張機能ですが、履歴を見やすく表示することに特化しています。Git Lensと合わせて入れておくことをおすすめします。

6. Debugger for Chrome

Webフロントエンドの開発をする際には必携です。

7. npm

npm関連のコマンドをVSCode内でサクッと実行出来るようになります。

8. ESLint

JavaScript/TypeScriptでの開発には欠かせない静的解析ツールです。

9. Prettier - Code formatter

一人で開発するときも便利ですが、特にチームで開発するときにはコードの一貫性を保つために大変役に立ちます。

ESLintと同時に使うためには、下のページで説明されている設定を行う必要があります。

Integrating with Linters · Prettier

10. Peacock

VSCodeで複数のプロジェクトを同時に開いているときに、どのウィンドウがどのプロジェクトだったのか分からなくなることがあります。この拡張機能を使うと、プロジェクトごとにウィンドウ枠の色を簡単に変えることが出来ます。

実は、プロジェクトのフォルダ直下に.vscodeフォルダを作って、そこにsettings.jsonファイルを作成して下の内容を追加することでも同じことが出来ます。

settings.json

{
  "workbench.colorCustomizations": {
    "activityBar.background": "#2f7c47",
    "activityBar.activeBorder": "#422c74",
    "activityBar.foreground": "#e7e7e7",
    "activityBar.inactiveForeground": "#e7e7e799",
    "activityBarBadge.background": "#422c74",
    "activityBarBadge.foreground": "#e7e7e7",
    "titleBar.activeBackground": "#215732",
    "titleBar.inactiveBackground": "#21573299",
    "titleBar.activeForeground": "#e7e7e7",
    "titleBar.inactiveForeground": "#e7e7e799",
    "statusBar.background": "#215732",
    "statusBarItem.hoverBackground": "#2f7c47",
    "statusBar.foreground": "#e7e7e7"
  }
}

ただやっぱり手動でやるよりもこの拡張機能を使った方が便利です。

11. Docker

最近は極力Dockerを使って開発環境をコンテナ化するようにしているので、Dockerfileとdocker-compose.ymlファイルを編集することが非常に多くなりました。この拡張機能を入れておくとこれらのファイルで補完入力が出来る他、イメージやコンテナの一覧の確認などもVSCode内で簡単に出来ます。