Visual Studio Code
Visual Studio Code（以下、VSCode）は、Microsoft が作っているエディタです。NKSSG では、記事を書いたりコマンドを実行するために、VSCode に使用を推奨しています。
ここでは、NKSSG を使う上で知っておくと役立つ VSCode に関する内容をまとめていきます。
VSCodeのインストール
VSCodeのインストールは、次のサイトから行うことができます。
OS に合わせて、インストールしましょう。
VSCodeのオススメ初期設定
VSCode をインストールしたら、まず立ち上げてみましょう。
VSCode には、「拡張機能」というものがあって、いろんな便利な機能を使うことができます。まず、日本語化するための拡張機能を入れましょう。
VSCode にはいろいろな拡張機能があります。時間があるときに検索してみるといいと思います。
仮想環境に関する設定
VSCode を使って、NKSSG でサイトを作る流れを見ていきます。Windows の場合で説明しますが、他の OS の人は適宜読み替えてください。
一番初めに、サイトのデータファイルをどこに置くかを考えます。例えば、次の場所に置くとしましょう。
C:\Users\{user}\Documents\new-site
このフォルダを作ってから、VSCodeで「フォルダーを開く」を選択します。
次に、Ctrl + @で、ターミナルを表示しましょう。ここでいろいろなコマンドを実行することができます。
まずは、仮想環境を作りましょう。Python がインストールされていれば、次のようなコマンドで仮想環境を作成することができます。
python -m venv .venv
こうすると、.venvフォルダができて、仮想環境用のデータが作成されます。
続いて、仮想環境をアクティベートします。次のコマンドは、ターミナルに PowerShell を使っている場合です。
.venv\Scripts\activate.ps1
ターミナルにコマンドプロンプトが起動している場合は、次のようにします。
.venv\Scripts\activate.bat
これで仮想環境で Python が使えるようになります。
ただ、VSCode を使うたびに、毎回このコマンドを打って仮想環境をアクティベートするのは面倒です。そこで、次のような設定をしましょう。
まず、左側のエクスプローラー内で、「.vscode」というフォルダを作ります。その下に「settings.json」というファイルを作り、次のように書きます。PowerShellを使っている場合の設定です。
{
"terminal.integrated.shellArgs.windows": [
"-NoExit", "-Command", "./.venv/Scripts/activate"
]
}
こうすると、ターミナルを立ち上げたときに、自動的に仮想環境がアクティベートされます。ターミナルを閉じたり（ごみ箱アイコン）、開いたり（Ctrl + @）して、アクティベートされるか確認してみましょう。セキュリティのメッセージが出る場合は、次の記事を参考にしてみましょう。
- Windows版VisualStudioCodeで、スムーズvenvを使うための設定まとめ — attakei pages
- 【Windows版Visual Studio Code】Pythonのvenvを楽に使う方法
- 仮想環境: Python環境構築ガイド - python.jp
仮想環境がアクティベートされているかどうかは、パスの前に「(.venv)」というように仮想環境の名前が表示されているかどうかで判定できます。
VSCodeの機能
VSCode を使うと、コマンドを実行したり、仮想環境を簡単にアクティベートできますが、エディタとしてもかなり便利に使うことができます。
ものすごく機能が多いのですべてを紹介することはできませんが、記事を書く上で便利なものにしぼって、いくつか紹介します。
VSCodeでの編集
VSCode を使うと、HTML や Markdown の編集が簡単に行えます。
HTML の場合（ファイルの拡張子が html の場合）、タグの一部分を打つだけで、候補が表示されます。閉じタグも表示されます。
aタグやimgタグを使うと、リンク先のファイルの一覧が表示されます。これらは、NKSSG の機能である次の機能と一緒に使うと効果的です。
また、Emmet という機能があり、数式のようにタグを打つと、展開されて一気にタグが入力できます。例えば、ul>li*3と打てば
<ul>
<li></li>
<li></li>
<li></li>
</ul>
になります。楽ですね。
また、ユーザースニペットという機能もあり、自分で好きなコードを登録することもできます。
タグの対応を表示したり、コードを折りたたむこともできます。これらは大きな HTML を書くとき、例えば、テーマを作るときなどで便利です。
VSCodeには、このような HTML を書くための便利な機能が多く備わっています。検索すればいろいろ出てくるので、調べてみましょう。
Markdown を書く場合には、テキストを選択してアスタリスクを入力すると、アスタリスクで囲ってくれる、などの機能があります。VSCode 内でプレビュー表示もできます（NKSSG にもプレビュー表示はありますが、それとは異なるものです）。
次の拡張機能を入れると、さらにはかどるでしょう。
これを入れると、Markdown でリンク先や画像へのパスの入力時に、ドロップダウンで一覧が表示されるようになります。HTML のところでも紹介した 内部リンク や 画像の貼り付け と一緒に使いましょう。
VSCodeでの選択
単語を選択した状態で、Ctrl + d とすると、選択したものと同じ単語を次々に選択することができます。複数を選択して、まとめて一度に編集することができます。どこが編集されるかがわかるので、置換するよりも安全に書き換えることができます。
また、Alt + Ctrl + 上下キーで、カーソルを上下に拡張することができます。複数の行に対して、文字を入力したり、削除することができます。また、この状態でEndキーを押すと、各行の行末にカーソルが移動します。行末にコンマを入れるなどの操作が簡単にできます。
こうした、複数の選択ができると、入力や修正作業がはかどります。
VSCodeでの検索
VSCode では、検索機能があります。ファイル内での検索もできます（Ctrl + f）し、ワークスペース全体での検索もできます（左にある虫眼鏡マーク）。また、フォルダを指定して、そのフォルダの中での検索もできます（フォルダを右クリックして検索を選択）。
正規表現を使った検索、大文字と小文字を区別して検索、特定のファイルやフォルダを除外して検索、といったこともできます。
さらに、検索した値を置換することも可能です。
WordPress にも検索機能はありますが、VSCode ならローカルのファイルの検索なのでスピードも速いですし、検索の柔軟性もあります。