VSCode での LaTeX 環境を作る on Windows/macOS/Ubuntu

# はじめに
卒論、前刷、予稿などを $\LaTeX$ で作りたい方のために、VSCode を使った LaTeX 環境構築方法について説明します。Overleaf で書く人も多いと思いますが、VSCode での LaTeX 環境を整えると自分好みにカスタマイズができるなど多くのメリットがあります。なお、ここで紹介する方法が唯一無二ではありません。

# 前提とする PC の環境
Windows10 もしくは macOS Big Sur, Monterey もしくは Ubuntu18, 20

# できるようになること
VSCode 上でのショートカットキーを利用した TeX ソースのビルド、PDF のリアルタイムプレビューなど

:::note info
ここでは必要最低限なTeXライブラリとそのパッケージをインストールするだけです。
複雑なtexファイルをコンパイルするには、途中で紹介する通りに（tlmgrコマンドで）各自必要なパッケージをインストールしてください。
:::

# 今回行うこと
以下の手順を30分から１時間くらいかけて行います。
- Chocolatey/Homebrew のインストール
- TeX Live のインストール
- TeX Live 利用のためのあれこれ
    - 環境変数 PATH の追加
    - TeX Live のパッケージのインストール
    - `.latexmkrc` ファイルの作成
- Visual Studio Code のインストール
- Visual Studio Code での LaTeX 環境のためのあれこれ
    - LaTeX Workshop のインストール
    - `setting.json` ファイルの編集
- 動作確認
    - ビルド
    - プレビュー
    - PDF から TeX ソースへのジャンプ
    - 生成ファイルの削除？ [^生成ファイルの削除]

# Chocolatey/Homebrew のインストール
この手順は Windows10 もしくは macOS Big Sur, Monterey の場合にのみ行います。
- Windows10 の場合
    Chocolatey のインストールを行います。
    - 未インストールの場合
        "[Installing Chocolatey - Step 2: Choose Your Installation Method](https://chocolatey.org/install#install-step2)" の通り、管理者権限でターミナルを開き以下のコマンドを実行してください。
        ```
        $ Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
        ```
    - インストール済みの場合
        Chocolatey を最新の状態にアップグレードします。以下のコマンドを実行してください。
        ```
        $ choco upgrade chocolatey
        ```

- macOS Big Sur, Monterey の場合
    Homebrew のインストールを行います。
    - 未インストールの場合
        "[Homebrew - Install Homebrew](https://brew.sh/)" の通り、ターミナルを開き以下のコマンドを実行してください。
        ```
        $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
        ```
        インストール終了後、ターミナル上に表示される the next steps を実行してください。以下のように ```echo``` ```eval``` から始まるコマンドを実行することになるはずです。
        ```
        $ echo <XXXXXX>
        $ eval <XXXXXX>
        ```
    - インストール済みの場合
        TeX Live のパッケージおよびユーティリティを最新の状態にアップグレードします。以下のコマンドを実行してください。
        ```
        $ brew update && brew upgrade && brew cleanup
        ```

# TeX Live のインストール
- Windows10 の場合
    Chocolatey でインストールします。管理者権限でターミナルを開き以下のコマンドを実行してください。
    ```
    $ choco install texlive
    ```

- macOS Big Sur, Monterey の場合
    Homebrew で BasicTeX (Tex Live の scheme-small) もしくは MacTeX (Tex Live の scheme-full) の GUI-Applications なしのどちらかをインストールします [^BasicTeXMacTeX]。ターミナルを開き以下のコマンドを実行してください。インストール途中にパスワードの入力を行った後、画面が固まったように見えますがフリーズしたわけではないので待ち続けてください。
    - BasicTeX をインストールする場合
        ```
        $ brew install --cask basictex
        ```
    - MacTeX を GUI-Applications なしでインストールする場合
        ```
        $ brew install --cask mactex-no-gui
        ```
    [^BasicTeXMacTeX]: BasicTeX と MacTeX の違いは含まれている TeX Live のパッケージの多さです。詳細は "[TeX Wiki - TeX Live のサブセット](https://texwiki.texjp.org/?TeX%20Live#p06f63c2)" をご確認ください。

- Ubuntu18, 20 の場合
    まず任意の作業ディレクトリに移動します。例えば、`~/tmp` に移動します。ターミナルを開き以下のコマンドを実行してください。
    ```
    $ mkdir -p ~/tmp
    $ cd ~/tmp
    ```
    次にミラーサイトからアーカイブファイル `install-tl-unx.tar.gz` をダウンロードして解凍、展開します。以下のコマンドを実行してください。
    ```
    $ sudo apt install -y wget
    $ wget https://mirror.ctan.org/systems/texlive/tlnet/install-tl-unx.tar.gz
    $ zcat install-tl-unx.tar.gz | tar xf -
    ```
    最後に展開したインストーラのディレクトリに移動して、Tex Live を scheme-small, GUI-Applications なしでインストールします。以下のコマンドを実行してください。
    ```
    $ cd install-tl-2*
    $ sudo ./install-tl -no-gui --scheme=small --no-interaction
    ```
    以上の手順は "[TeX Live - Quick install for Unix - tl;dr: Unix(ish)](https://tug.org/texlive/quickinstall.html)" と "[TeX Wiki - TeX Live のインストール](https://texwiki.texjp.org/?Linux#texliveinstall)" を参考にしました。

# TeX Live 利用のためのあれこれ
以下の作業を行います。
- 環境変数 PATH の追加
- TeX Live のパッケージのインストール
- `.latexmkrc` ファイルの作成

## 環境変数 PATH の追加
この手順は、macOS Big Sur, Monterey もしくは Ubuntu18, 20 の場合にのみ行います。
- macOS Big Sur, Monterey の場合
    まず `.zshrc` ファイルを作成します。ターミナルを開き以下のコマンドを実行してください。
    ```
    $ touch ~/.zshrc
    ```
    次に作成した `.zshrc` ファイルの内容を編集します。以下のコマンドを実行し、
    ```
    $ nano ~/.zshrc
    ```
    表示される `.zshrc` ファイルの内容に以下を書き記し、
    ```sh:.zshrc
    typeset -U path PATH
    path=(
      /opt/homebrew/bin(N-/)
      /opt/homebrew/sbin(N-/)
      /usr/bin
      /usr/sbin
      /bin
      /sbin
      /usr/local/bin(N-/)
      /usr/local/sbin(N-/)
      /Library/Apple/usr/bin
    )
    ```
    `^O` (`control` + `O`)、 `↩︎ (return)` により `.zshrc` ファイルを保存した後、`^X` (`control` + `X`) で `.zshrc` ファイルを閉じてください。

    次に環境変数 PATH に TeX 実行ファイル群のインストール先パスを追加します。例えば、インストール先パスが `/usr/local/texlive/2023/bin/universal-darwin` の場合、以下のコマンドを実行し、
    ```
    $ nano ~/.zshrc
    ```
    表示される `.zshrc` ファイルの内容を以下のように編集し、
    ```sh:.zshrc
    typeset -U path PATH
    path=(
      /opt/homebrew/bin(N-/)
      /opt/homebrew/sbin(N-/)
      /usr/bin
      /usr/sbin
      /bin
      /sbin
      /usr/local/bin(N-/)
      /usr/local/sbin(N-/)
      /Library/Apple/usr/bin
      usr/local/texlive/2023/bin/universal-darwin
    )
    ```
    `^O` (`control` + `O`)、 `↩︎` `(Enter)` により `.zshrc` ファイルを保存した後、`^X` (`control` + `X`) で `.zshrc` ファイルを閉じてください。

    最後に、上のパス設定を反映させるために ```.zshrc``` を読み込みます。以下のコマンドを実行してください。
    ```
    $ source ~/.zshrc
    ```
    以上の手順は "[macOS の zsh ではこれだけはやっておこう - 1. パスの設定](https://zenn.dev/sprout2000/articles/bd1fac2f3f83bc)" を参考にしました。

- Ubuntu18, 20 の場合
    まず環境変数 PATH に TeX 実行ファイル群のインストール先パスを追加します。例えば、デフォルトのインタラクティブシェルが `bash` でインストール先パスが `/usr/local/texlive/2023/bin/x86_64-linux` の場合、以下のコマンドを実行し、
    ```
    $ nano ~/.bashrc
    ```
    表示される `.bashrc` ファイルの内容の一番下に以下を追加し、
    ```
    PATH=$PATH:/usr/local/texlive/2023/bin/x86_64-linux
    ```
    `Ctrl` + `S` により `.bashrc` ファイルを保存した後、`Ctrl` + `X` で `.bashrc` ファイルを閉じてください。

    次にインストールした TeX 実行ファイル群に対して、`/usr/local/bin` ディレクトリ配下へシンボリックリンクを追加します [^バイナリへのパス追加]。例えば、インストール先パスが `/usr/local/texlive/2023/bin/x86_64-linux` の場合、以下のコマンドを実行してください。
    [^バイナリへのパス追加]: ChatGPT によると、「TeX Live は通常、システム全体のパスに設定されていないため、`tlmgr` は通常のコマンドとしては認識されません。このため、TeX Live の `tlmgr` を直接実行するためには、そのバイナリへのパスを追加する必要があります。`sudo usr/local/texlive/2023/bin/x86_64-linux/tlmgr path add` は、TeX Live 2023 のバイナリへのパスをスーパーユーザー（root）の環境に追加し、`tlmgr` を実行可能なコマンドとして利用できるようにするものです。」とのことです。
    ```
    $ sudo /usr/local/texlive/2023/bin/x86_64-linux/tlmgr path add
    ```
    

    上記の手順は "[TeX Live - Quick install for Unix - tl;dr: Unix(ish)](https://tug.org/texlive/quickinstall.html)"、"[Ubuntu + VSCode + LaTeX (1) TeXLive 2022 + LaTeXをインストールする - TeXLive 2022のインストール](https://zenn.dev/bluepost/articles/9f5274b37e9e6d#texlive-2022%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)" を参考にしました。

## TeX Live のパッケージのインストール
TeX Live のパッケージをいくつかインストールします。今後、LaTeX で文書を作成する際に必要になるであろうパッケージを厳選しました。別のパッケージが必要になった場合も同様の手順でインストールしてください。
- Windows10 の場合
    まず、TeX Live ディストリビューションのパッケージやコンポーネントをアップデートします。管理者権限でターミナルを開き以下のコマンドを実行してください。
    ```
    $ tlmgr update --self --all
    ```
    次に、`tlmgr` コマンドで TeX Live のパッケージをいくつかインストールします。以下のコマンドを実行してください。
    ```
    $ tlmgr install collection-langjapanese utf8add url cite latexmk here float
    ```
- macOS Big Sur, Monterey もしくは Ubuntu18, 20 の場合
    まず、TeX Live ディストリビューションのパッケージやコンポーネントをアップデートします。ターミナルを開き以下のコマンドを実行してください。
    ```
    $ sudo tlmgr update --self --all
    ```
    次に、`tlmgr` コマンドで TeX Live のパッケージをいくつかインストールします。以下のコマンドを実行してください。
    ```
    $ sudo tlmgr install collection-langjapanese utf8add url cite latexmk here float
    ```

## .latexmkrc ファイルの作成
まず `.latexmkrc` を配置する場所 (ホームディレクトリ [^~/]) を確認します。ターミナルを開き以下のコマンドを実行してください。
[^~/]: `~/` のことです。
```
$ echo $HOME
```
- Windows10 の場合
    `C:\Users\<USERNAME>` と表示されるはずです。

- macOS Big Sur, Monterey の場合
    `/Users/<USERNAME>` と表示されるはずです。

- Ubuntu18, 20 の場合
    `/home/<USERNAME>` と表示されるはずです。

表示されたディレクトリに `.latexmkrc` ファイルを作成してください。

次に作成した `.latexmkrc` ファイルの内容に以下を書き記してください。
```sh:.latemkrc
#!/usr/bin/env perl

# LaTeX
$latex = 'platex -synctex=1 -halt-on-error -file-line-error %O %S';
$max_repeat = 5;

# BibTeX
$bibtex = 'pbibtex %O %S';
$biber = 'biber --bblencoding=utf8 -u -U --output_safechars %O %S';

# index
$makeindex = 'mendex %O -o %D %S';

# DVI / PDF
$dvipdf = 'dvipdfmx %O -o %D %S';
$pdf_mode = 3;

# preview
$pvc_view_file_via_temporary = 0;
if ($^O eq 'linux') {
    $dvi_previewer = "xdg-open %S";
    $pdf_previewer = "xdg-open %S";
} elsif ($^O eq 'darwin') {
    $dvi_previewer = "open %S";
    $pdf_previewer = "open %S";
} else {
    $dvi_previewer = "start %S";
    $pdf_previewer = "start %S";
}

# clean up
$clean_full_ext = "%R.synctex.gz"
```
上記の内容は "[VSCode で最高の LaTeX 環境を作る - .latexmkrc の編集](https://qiita.com/rainbartown/items/d7718f12d71e688f3573#latexmkrc-%E3%81%AE%E7%B7%A8%E9%9B%86)" を参考にしました。

# Visual Studio Code のインストール
- Windows10 の場合
    Chocolatey でインストールします。管理者権限でターミナルを開き以下のコマンドを実行してください。
    ```
    $ choco install vscode
    ```

- macOS Big Sur, Monterey の場合
    Homebrew でインストールします。ターミナルを開き以下のコマンドを実行してください。
    ```
    $ brew install --cask visual-studio-code
    ```

- Ubuntu18, 20 の場合
    まずパッケージのリストを更新し、インストール済みパッケージを最新の状態にアップグレードします。ターミナルを開き以下のコマンドを実行してください。
    ```
    $ sudo apt update
    $ sudo apt upgrade -y
    ```
    次に VSCode をインストールします。以下のコマンドを実行してください。
    ```
    $ wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -
    $ sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"
    $ sudo apt update
    $ sudo apt install -y code
    ```
    以上の手順は "[【速習】Visual Studio Code インストール方法まとめ(Ubuntu 20.04LTS) - パターン2. apt(apt-get) でインストール](https://inno-tech-life.com/dev/linux/install_vscode/#index_id2)" を参考にしました。

# Visual Studio Code での LaTeX 環境のためのあれこれ
以下の作業を行います。
- LaTeX Workshop のインストール
- `setting.json` ファイルの編集

## LaTeX Workshop のインストール
VSCode の拡張機能 LaTeX Workshop をインストールします。

VSCode 内の左側の拡張機能パネル (Extensions) を開いて検索バーに latex と入力し、表示される LaTeX Workshop をインストールしてください。
## `setting.json` ファイルの編集
VSCode の設定を記述する `setting.json` ファイルを編集します。

まず `setting.json` ファイルを開きます。VSCode 内の左下の歯車マーク (Manage) から設定 (Settings) を選択し、タブ右上のファイルマーク (Open Settings (JSON)) をクリックしてください。

次に `setting.json` ファイルの内容を以下のように編集してください。既に何かしらの記述がある場合は、それと競合しないよう気をつけてください。

```javascript:setting.json
{
    // ---------- Language ----------

    "[tex]": {
        // スニペット補完中にも補完を使えるようにする
        "editor.suggest.snippetsPreventQuickSuggestions": false,
        // インデント幅を2にする
        "editor.tabSize": 2
    },

    "[latex]": {
        // スニペット補完中にも補完を使えるようにする
        "editor.suggest.snippetsPreventQuickSuggestions": false,
        // インデント幅を2にする
        "editor.tabSize": 2
    },

    "[bibtex]": {
        // インデント幅を2にする
        "editor.tabSize": 2
    },


    // ---------- LaTeX Workshop ----------

    // 使用パッケージのコマンドや環境の補完を有効にする
    "latex-workshop.intellisense.package.enabled": true,

    // 生成ファイルを削除するときに対象とするファイル
    // デフォルト値に "*.synctex.gz" を追加
    "latex-workshop.latex.clean.fileTypes": [
        "*.aux",
        "*.bbl",
        "*.blg",
        "*.idx",
        "*.ind",
        "*.lof",
        "*.lot",
        "*.out",
        "*.toc",
        "*.acn",
        "*.acr",
        "*.alg",
        "*.glg",
        "*.glo",
        "*.gls",
        "*.ist",
        "*.fls",
        "*.log",
        "*.fdb_latexmk",
        "*.snm",
        "*.nav",
        "*.dvi",
        "*.synctex.gz"
    ],

    // 生成ファイルを "out" ディレクトリに吐き出す
    "latex-workshop.latex.outDir": "out",

    // ビルドのレシピ
    "latex-workshop.latex.recipes": [
        {
            "name": "latexmk",
            "tools": [
                "latexmk"
            ]
        },
    ],

    // ビルドのレシピに使われるパーツ
    "latex-workshop.latex.tools": [
        {
            "name": "latexmk",
            "command": "latexmk",
            "args": [
                "-silent",
                "-outdir=%OUTDIR%",
                "%DOC%"
            ],
        },
    ],
}
```
上記の内容は "[VSCode で最高の LaTeX 環境を作る - settings.json の編集](https://qiita.com/rainbartown/items/d7718f12d71e688f3573#settingsjson-%E3%81%AE%E7%B7%A8%E9%9B%86)" を参考にしました。

# 動作確認
まず TeX ソースを用意します。例えば、以下のサンプルファイルをクリックして開き、`sample.tex` として`~/tmp/tex/env_test` ディレクトリに保存してください。

<details><summary>サンプルファイル</summary>

```tex: sample.tex
\documentclass[a4j,12pt]{jreport}

\title{ {\LaTeX} 動作確認テスト・サンプルファイル}
\author{情報リテラシTA}
\date{\today}

\begin{document}
\maketitle
\chapter{\LaTeX の世界にようこそ！}
\section{インストール成功！}
\LaTeX の世界にようこそ！この文章が「dviout」というソフトで閲覧できていれば、インストールに成功しています。
\LaTeX（ラテフ）もしくは\TeX（テフ）は、組版処理を行うソフトウェアです。
数学者・コンピュータ科学者のドナルド・クヌース氏によって作られました。

このソフトを使うと、きれいな文章の作成ができます。実際に出版の現場でも使われているそうです。
数学者が作ったということもあって、特に数式の出力がきれいにできるのが特徴です。
\begin{eqnarray}
  & \displaystyle \lim _{x \rightarrow 1} \left( \frac{2}{x-1} - \frac{x+5}{x^3 -1} \right)\; ,\;
  & \displaystyle \int ^\pi _0 \cos ^2 (x)dx \nonumber
\end{eqnarray}
2つの数式が、きちんと表示されていますか？
複雑な数式が入った文章も、きれいに出力することができます。

\section{基本手順}
では、\LaTeX で文章を作る際の、基本的な手順をここに示します。
\begin{enumerate}
  \item ソースファイルをTeraPadなどのエディタで作成する。

  ソース（素）となるファイルを作成します。これにはエディタと呼ばれるソフトを使います。
  この地点では文章の形にはなっていません。

  \item ソースファイルをコンパイルして、dviファイルを作成する。

  パソコンに変換を命令して、先ほどつくったソースファイル
  をdviファイルに変換、文章の形にして確認します。

  \item dviファイルができたことを確認したら、PDFに変換する。

  dvi形式は、あまり一般的ではありません。
  そこで、Adobe Readerなどで閲覧ができるPDF形式に変換します。
\end{enumerate}
\end{document}
```
</details>

サンプルファイルの内容は "[鳥取大学「情報リテラシー」2009（応用数理工学科）サポートページ - TeXサンプルファイル(sample.tex)](http://www.damp.tottori-u.ac.jp/~hoshi/info/doc-info-2009/sample.tex)" を参考にしました。

次に以下の作業を行います。
- ビルド
- プレビュー
- PDF から TeX ソースへのジャンプ
- 生成ファイルの削除

## ビルド
まず、TeX ソースが配置されているフォルダを VSCode で開きます。例えば `~/tmp/tex/env_test` に配置されている場合、ターミナルを開き以下のコマンドを実行してください。
```
$ code ~/tmp/tex/env_test
```

次に TeX ソースのビルドを行います。VSCode 上で TeX ソースを開き以下のショートカットキーを利用してください。
- Windows10 もしくは Ubuntu18, 20 の場合
    `Ctrl` + `Alt` + `B`
- macOS Big Sur, Monterey
    `command (⌘)` + `option (⌥)` + `B`

一度ビルドすると、その TeX ソースを保存するたびに自動でビルドしてくれます。また、ビルド後に生成される各種ファイル (PDF など) はすべて `out` ディレクトリに保存されます。

## プレビュー
ビルド後に出力される PDF のプレビューを行います。VSCode 上で以下のショートカットキーを利用してください。
- Windows10 もしくは Ubuntu18, 20 の場合
    `Ctrl` + `Alt` + `V`
- macOS Big Sur, Monterey の場合
    `command (⌘)` + `option (⌥)` + `V`

TeX ソースを編集、保存するたびに、プレビューしている PDF もリアルタイムで更新されます。

## PDF から TeX ソースへのジャンプ
PDF 上をクリックして、対応する TeX ソースのコードへジャンプします。VSCode で開いている PDF ビューワ上で以下のショートカットキーを利用してください。
- Windows10 もしくは Ubuntu18, 20 の場合
    `Ctrl` + クリック
- macOS Big Sur, Monterey の場合
    `command (⌘)` + クリック

## 生成ファイルの削除？ [^生成ファイルの削除]
ビルド後に生成されるファイル（`.aux` など）を削除します。VSCode 上で以下のショートカットキーを利用してください。
[^生成ファイルの削除]: まだ確認ができていません。よくわかっていません。
- Windows10 もしくは Ubuntu18, 20 の場合
    `Ctrl` + `Alt` + `C`
- macOS Big Sur, Monterey の場合
    `Command (⌘)` + `option (⌥)` + `C`

# おわりに
Chocolatey/Homebrew を用いて TeX Live, VSCode のインストールを行った理由は、GUI アプリを使った面倒な手順を踏まずにターミナルからのコマンド入力で全て完結するようにしたかったからです。

# 参考文献
- [Installing Chocolatey - Step 2: Choose Your Installation Method](https://chocolatey.org/install#install-step2)
- [Homebrew - Install Homebrew](https://brew.sh/)
- [TeX Wiki - TeX Live のサブセット](https://texwiki.texjp.org/?TeX%20Live#p06f63c2)
- [TeX Live - Quick install for Unix - tl;dr: Unix(ish)](https://tug.org/texlive/quickinstall.html)
- [TeX Wiki - TeX Live のインストール](https://texwiki.texjp.org/?Linux#texliveinstall)
- [macOS の zsh ではこれだけはやっておこう - 1. パスの設定](https://qiita.com/rainbartown/items/d7718f12d71e688f3573)
- [Ubuntu + VSCode + LaTeX (1) TeXLive 2022 + LaTeXをインストールする - TeXLive 2022のインストール](https://zenn.dev/bluepost/articles/9f5274b37e9e6d#texlive-2022%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)
- [VSCode で最高の LaTeX 環境を作る - .latexmkrc の編集](https://qiita.com/rainbartown/items/d7718f12d71e688f3573#latexmkrc-%E3%81%AE%E7%B7%A8%E9%9B%86)
- [【速習】Visual Studio Code インストール方法まとめ(Ubuntu 20.04LTS) - パターン2. apt(apt-get) でインストール](https://inno-tech-life.com/dev/linux/install_vscode/#index_id2)
- [VSCode で最高の LaTeX 環境を作る - settings.json の編集](https://qiita.com/rainbartown/items/d7718f12d71e688f3573#settingsjson-%E3%81%AE%E7%B7%A8%E9%9B%86)
- [鳥取大学「情報リテラシー」2009（応用数理工学科）サポートページ - TeXサンプルファイル(sample.tex)](http://www.damp.tottori-u.ac.jp/~hoshi/info/doc-info-2009/sample.tex)