【Visual Studio Code】警告表示のための拡張機能を使って学びの速度を上げよう

Visual Studio Code で拡張機能を使用すると、
特定の記法やプログラミング言語に関連する機能、デバッガー、ツールを
追加することができます。

中でも、警告表示のための拡張機能を使うことは
特定の記法やプログラミング言語の習得速度に大きく貢献します。

この記事では、まず、英文の作成を例に
警告表示のための拡張機能が習得速度に与える影響を解説し、
その後、特定の記法やプログラミング言語で
警告表示を行うための拡張機能を紹介します。

英文を書いてみよう

まず、新しいフォルダーを作成し、その中で Visual Studio Code を開きます。
フォルダー名は何でも構いません。
この例では “test-vscode-extension” として進めます。

次に、開いた Visual Studio Code で新しいテキストファイルを作成します。
サイドバーの [EXPLORER] にマウスのカーソルを移動すると、
フォルダー名の右側にアイコンが表示されるので、
次のアイコンをクリックします:

すると、ファイル名の入力欄が表示されるので
末尾が “.txt” で終わるファイル名を入力します。
この例では、”test.txt” として進めます。

すると、作成したファイルがエディターで開くので、
次のテキストを入力します:

Visual Studio Code extentions let you add languages, debuggers, and tools
to your installation to support your development workflow.

上記の英文にはスペルミスが含まれています。
スペルミスに気付かずに文書を書き続けて
どこかへ提出したり何かに印刷してしまったりすると
後から修正するのは面倒になっていき、修正するコストもかかります。

そこで、警告表示を行うための拡張機能をインストールしてみましょう。

Visual Studio Code 左側のアクティビティバーの拡張機能アイコンクリックし
拡張機能ビューを表示します。

[拡張機能] ビューの上部にある [検索] ボックスに
「Spell」と入力し、
表示された一覧の中から “Code Spell Checker” の [Install] ボタンをクリックします。

インストールが完了すると、
[Install] ボタンが歯車のアイコンの [Manage] ボタンに変わります。

[Manage] ボタン

インストールが完了したら、再度英文をエディターを開いてみましょう。
スペルミスの部分に波線が表示され、
カーソルをあわせると警告メッセージと電球のアイコンが表示されます。

スペルミスを修正したりすることもできます。
電球アイコンをクリックするか、
キーボードからショートカットで Ctrl + . を入力します。
すると、修正候補の文字列などが表示されます。

修正候補の文字列を選択すると、スペルミスが修正され波線が消えます。

ここでは解説しませんが、スペルミスとして検出された単語を辞書に登録して
以降はスペルミスとして検出しないことも可能です。

ここまでの内容から、
エディターに警告が表示されることは次の点で有利です:

前者は一般的に言われていますが、
実は一般的に言われていない後者が非常に重要です。

このような警告を学びの機会と捉えるか面倒と捉えるかで
1年後の知識水準に大きな差が生まれることになります。

この警告表示の重要性は
プログラミング言語や何かを表現するための記法においてもほぼ同様です。

ほんの一例ですが、たとえば次のような警告表示のためのの拡張機能があります:

プログラミング言語・記法	警告表示のための拡張機能
Markdown	markdownlint
YAML	YAML
HTML	HTMLHint
XML	XML, XML Tools
CSS, Sass	(拡張機能不要)
JavaScript	ESLint
Python	PyLint, Flake8, mypy, pydocstyle, pycodestyle (pep8), prospector, pylama, bandit (拡張機能不要)
Java	Checkstyle for Java
PHP	phpcs
Ruby	ruby-rubocop
Docker	Docker
Kubernetes	Kubernetes, YAML
CloudFormation	CloudFormation Linter
日本語文章	テキスト校正くん