🔭
電気学生のためのVSCode+LaTeX環境構築

2025/03/07に公開
 ご挨拶はじめての方ははじめまして、そうでない方はいつもお世話になっております。カカオニブです。

高専卒業も近いし、いい加減残せるアウトプットを作っておきたいなと思い第一弾に自身のレポート作成環境を記そうと思います。
!筆者にMac OS使用経験がないためこの記事ではWindows向けの導入方法を紹介します。Macユーザーの方はChatGPTなどでこの記事をMac用に翻訳して読んでください。
Linuxユーザーの方は自力で読み換えられると信じています。
ってことで、この記事は電気系学生中でも電気科高専生をターゲットにしたいと思います。

具体的には日常的にCLIを操作したりコードエディタに触れたりはしておらず、レポートを書くときはMicrosoft Wordで数式を書いている高専生がメインターゲットでしょうか。
"やさしい日本語"ならぬ"やさしいウィンドウズ"を心がけた記事にするつもりですので最後までよろしくお願いします。
なおこの記事の情報はすべて2025年2月時点のものです。

 導入方法!全体で数GB程度のダウンロードが発生します。ある程度高速なインターネット環境下で実施することを推奨します。

 Visual Studio Code (VSCode)最初にテキストエディターのVisual Studio Code(以下、VSCode)をインストールします。VSCodeはStack Overflow 2024 Developer Surveyの回答者のうち73.6%が使用している統合開発環境[1]です。無料で軽量、開発も活発で拡張機能が豊富なので今回はこれを使用します。

 ダウンロード以下のリンクからダウンロードページを開きます。

https://code.visualstudio.com/download



ダウンロードページ

画面中のWindowsと大きく書かれたボタンをクリックしインストーラー(約100MB)をダウンロードします。

 インストールダウンロードが完了したら、ダウンロードしたファイル(VScodeUserSetupから始まるファイル)をダブルクリックし実行します。
使用許諾契約書が表示されるので最後まで読んでから、内容に同意する場合[同意する]をクリックし[次へ]を押します。同意しない場合VSCodeは使用できません。
インストール先の指定画面が表示されます。特に変更せず[次へ]で構いません。
スタートメニューフォルダーの指定画面が表示されます。特に変更せず[次へ]で構いません。
追加タスクの選択画面が表示されます。特にこだわりが無ければ変更せず[次へ]で構いません。

筆者のオススメはすべてオンです。
インストール準備完了画面が表示されます。[インストール]を押してインストール完了まで待ちます。
Visual Studio Code セットアップウィザードの完了画面が表示されたら完了です。[完了]を押します。

 VSCodeの日本語化インストールしたVSCodeを日本語に切り替えます。

VSCodeを起動しサイドバーの拡張機能ボタン(下図参照)をクリックします。



Extentions

上部に検索窓が表示されるのでJapaneseと入力しましょう。Japanse Language Pack for Visual Studio Codeが見つかると思うのでInstallを押下します。

インストールが完了し、InstallだったボタンがUninstallに変わっていれば完了です。

右下にポップアップが表示されますのでChange Language and Restartボタンを押下します。
InstallボタンががUninstallになってもポップアップが出ない場合以下の操作を実行してください。
キーボードのCtrlとShiftとPを同時押し

Configure Display Langageと入力

日本語を選択
VSCodeを再起動

 拡張機能LaTeX WorkshopのインストールVSCodeでLaTeXを扱いやすくするための拡張機能「LaTeX Workshop」をインストールします。これを追加するとマウス操作だけでLaTeXをPDFに変換したり、\sum_{i=1}^{n}や\Omegaのような数学記号を挿入するパレットが使えるようになります。
サイドバーから「拡張機能」を開きます。
検索窓にjames-yu.latex-workshopを入力します。
インストールをクリックします。
拡張機能の設定を行います。
ウィンドウ左下歯車ボタンから「設定」を開きます。
右上「設定(JSON)を開く」をクリックします。


以下を追記します。元から何か書かれていたら最後のプロパティの末尾にコンマ(,)を付けて次の行に貼り付けてください。(参考サイト1より、一部改変)setting.json
    // 和文を使うため、助詞、句読点、全角括弧などを区切り文字として登録する
    "editor.wordSeparators": "./\\()\"'-:,.;<>~!@#$%^&*|+=[]{}`~?　、。「」【】『』（）！？てにをはがのともへでや",

    // 以下、LaTeX Workshopの設定

    // LaTeXでビルドする際の設定を「Tool」「Recipi」の2種類設定する
    //   Tool ...1つのコマンド。料理で言うところの、「焼く」「煮る」などの操作かな。
    //   "latex-workshop.latex.tools" で定義。
    //   Recipe ...Tool を組み合わせて料理（つまりは文書）を作るレシピ。
    //   "latex-workshop.latex.recipes"で定義。
    //   デフォルトの操作は、1番最初に定義されたレシピになる（他のレシピも選択可）
    
    // Tool の定義
    "latex-workshop.latex.tools": [
    
        // latexmk によるlualatex
        {
        "name": "Latexmk (LuaLaTeX)",
        "command": "latexmk",
        "args": [
            "-f", "-gg", "-pv", "-lualatex", "-synctex=1", "-interaction=nonstopmode", "-file-line-error", "-output-directory=%OUTDIR%", "%DOC%"
        ]
        },
        // latexmk による xelatex
        {
        "name": "Latexmk (XeLaTeX)",
        "command": "latexmk",
        "args": [
            "-f", "-gg", "-pv", "-xelatex", "-synctex=1", "-interaction=nonstopmode", "-file-line-error", "-output-directory=%OUTDIR%", "%DOC%"
        ]
        },
        // latexmk による uplatex
        {
        "name": "Latexmk (upLaTeX)",
        "command": "latexmk",
        "args": [
            "-f", "-gg", "-pv", "-synctex=1", "-interaction=nonstopmode", "-file-line-error", "-output-directory=%OUTDIR%", "%DOC%"
        ]
        },
        // latexmk による platex
        //こいつ使うときもしかしたらpdf生成されずにdviまでしかできないかも
        {
        "name": "Latexmk (pLaTeX)",
        "command": "latexmk",
        "args": [
            "-f", "-gg", "-pv", "-latex='platex'", "-latexoption='-kanji=utf8 -no-guess-input-env'", "-synctex=1", "-interaction=nonstopmode", "-file-line-error", "-output-directory=%OUTDIR%", "%DOC%"
        ]
        }
    ],

    // Recipe の定義
    "latex-workshop.latex.recipes": [
        // LuaLaTeX のレシピ
        {
        "name": "LuaLaTeX",
        "tools": [
            "Latexmk (LuaLaTeX)"
        ]
        },
        // XeLaTeX のレシピ
        {
        
        "name": "XeLaTeX",
        "tools": [
            "Latexmk (XeLaTeX)"
        ]
        },
        // upLaTeX のレシピ
        {
        "name": "upLaTeX",
        "tools": [
            "Latexmk (upLaTeX)"
        ]
        },
        // pLaTeX のレシピ
        {
        "name": "pLaTeX",
        "tools": [
            "Latexmk (pLaTeX)"
        ]
        },
    ],

    // マジックコメント付きの LaTeX ドキュメントのビルド設定
    // 特に記事では扱わないが、いつか使うことを考えて書いとく。
    // 参考: https://blog.miz-ar.info/2016/11/magic-comments-in-tex/
    "latex-workshop.latex.magic.args": [
    "-f", "-gg", "-pv", "-synctex=1", "-interaction=nonstopmode", "-file-line-error", "%DOC%"
    ],

    // 不要なファイルをクリーンアップする時の目印となる拡張子
    // 不要な一時ファイルや中間ファイルを自動削除する機能がある。
    "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", "*.synctex.gz",
        // for Beamer files
        "_minted*", "*.nav", "*.snm", "*.vrb",
    ],

    // ビルド失敗した際の残存ファイルが以降のビルドに影響を与えることがあるため、
    // 残存ファイルを削除する設定
    "latex-workshop.latex.autoClean.run": "onBuilt",

    // PDFビューワの開き方。画面分割で開く。
    "latex-workshop.view.pdf.viewer": "tab",

    // LaTeXファイル保存時にPDFも更新するかどうか。
    // LuaLaTeXはビルドが遅いので、かえって煩わしいので無効化
    // (u)pLaTeXなら有効化しておいてもいいかも。
    "latex-workshop.latex.autoBuild.run": "never",

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

    "[latex]": {
        // スニペット補完中にも補完を使えるようにする
        "editor.suggest.snippetsPreventQuickSuggestions": false,
        // インデント幅を2にする
        "editor.tabSize": 2,
        "editor.wordWrap": "on",
        "editor.insertSpaces": true,
        "editor.detectIndentation": false,
        "editor.suggestSelection": "recentlyUsedByPrefix",
        "editor.quickSuggestions": {
        "other": true,
        "comments": false,
        "strings": false
        },
        "editor.bracketPairColorization.enabled": true,
        "editor.unicodeHighlight.invisibleCharacters": true,
        "editor.unicodeHighlight.allowedCharacters": {
        "，": true,
        "．": true,
        "！": true,
        "？": true,
        "［": true,
        "］": true,
        "｛": true,
        "｝": true,
        "＜": true,
        "＞": true,
        },
        "editor.stickyScroll.enabled": true,
    },

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

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

    // 作成したファイルを、直下の "out" フォルダへ出力
    "latex-workshop.latex.outDir": "%DIR%",
    "files.autoSave": "afterDelay",
    


 スニペットスニペットは繰り返し入力される文字列に別名を付けることでコーディングを高速化する機能です。LaTeXにおいてはテンプレートのように使用できますが、なくても問題ないためここでは省略します。

興味がある方は「latex スニペット」などで検索してみてください。

 拡張機能Draw.io Integrationのインストールdraw.ioはWeb技術で作られたドローイングアプリケーションです。このアプリケーションを使用することで回路図やフローチャートを書くことが出来ます。

draw.ioはWebアプリ版やデスクトップ版がありますが、Draw.io Integrationを使用することでVSCode内で使用できるようになります。
サイドバーから「拡張機能」を開きます。
検索窓にhediet.vscode-drawioを入力します。
インストールをクリックします。

 使い方空のファイルを作成し拡張子を .drawio にします。

自動的にdraw.ioで展開されます。

 TeX LiveC言語習得者であればコンパイラに当たるものといえばイメージしやすいでしょうか。

打ち込んだTeX文書を組版するのに必要なソフトウェアです。

TeX LiveはTeXディストリビューション[2]の1つで追加パッケージの導入などが簡単です。

 ダウンロード以下のリンクからダウンロードします。

英語がごちゃごちゃしていて見づらいページなのですが、install-tl-windows.exeと書いてあるリンクをクリックしてください。(約26MB)

https://www.tug.org/texlive/acquire-netinstall.html
!ダウンロードの際に高確率で警告やエラーが出ると思います。これはダウンロード数が少ない事によるものと推察されます。(Windows Defenderなど)
あくまで自己責任になりますが、そのまま続行して大丈夫です。

 インストールダウンロードが完了したら、ダウンロードしたファイル(install-tl-windows.exe)をダブルクリックし実行します。
ウィザード内の「Install」を選択し[Next>]を押します。
「TeX Live インストーラ」ウィンドウが表示されたら、左下の「高度な設定」を押してください。
左下の選択したもの-スキームの「変更」を押して、basicスキームを選択して「OK」を押してください。
同様に選択したもの-追加コレクションの数の「カスタマイズ」を押します
左側「言語」の一覧から日本語と英語・米語を選択します
右側「ほかのコレクション」の一覧からLaTeX基本パッケージとLaTeX推奨パッケージを選択します。
「OK」を押してください。

右下の「インストール」をクリックし、しばらく待ちます。

 インストール終了後「TLshell TeX Live Manager」が起動できるようになっていれば準備OKです。

 環境設定
 LatexmkLatexmkはLaTeX文書をPDFに変換する作業を簡単にしてくれる便利なツールです。設定していきましょう。
VSCodeを起動し、ユーザーフォルダを開きます。
左上 「ファイル」-フォルダーを開く を押し、そのまま「フォルダーの選択」を押下します。
通常デフォルトでユーザーフォルダ(C:/Users/*)を選択しますが、もし上手くいかなければ以下を試してみてください。
左側のリストから「PC」を選択し「Local Disk(C:)」などC: と付いた項目を選びます。
ユーザーやUserと書かれたフォルダを選択し、お使いのアカウント名のフォルダを選びます。もしMicrosoftアカウントであればメールアドレスの冒頭5文字になっている可能性があります。
ウィンドウ右下「フォルダーの選択」を押下します。

VSCode内エクスプローラーから「新しいファイル...」をクリックします。


ファイル名を .latexmkrc とします。先頭の .(ピリオド) を必ず付けます。
.latexmkrcに以下のテキストを書き込みます。(参考サイト1より引用).latexrk
    #!/usr/bin/env perl
    # 先頭行は、Linux用のシバンなので、Windowsでは削除しても構いません。

    # 通常の LaTeX ドキュメント用のコマンド
    # 今回はupLaTeXを設定してあります。
    $latex = 'uplatex %O -kanji=utf8 -no-guess-input-enc -synctex=1 -interaction=nonstopmode %S'; 
    # pdfLaTeX 用のコマンド 
    $pdflatex = 'pdflatex %O -synctex=1 -interaction=nonstopmode %S'; 
    # LuaLaTeX 用のコマンド 
    $lualatex = 'lualatex %O -synctex=1 -interaction=nonstopmode %S'; 
    # XeLaTeX 用のコマンド 
    $xelatex = 'xelatex %O -no-pdf -synctex=1 -shell-escape -interaction=nonstopmode %S'; 
    # Biber, BibTeX 用のコマンド 
    $biber = 'biber %O --bblencoding=utf8 -u -U --output_safechars %B'; 
    $bibtex = 'upbibtex %O %B'; 
    # makeindex 用のコマンド 
    $makeindex = 'upmendex %O -o %D %S'; 
    # dvipdf のコマンド 
    $dvipdf = 'dvipdfmx %O -o %D %S'; 
    # dvips のコマンド 
    $dvips = 'dvips %O -z -f %S | convbkmk -u > %D'; 
    $ps2pdf = 'ps2pdf.exe %O %S %D'; 
    
    # $pdf_mode ...PDF の作成方法を指定するオプション 
    # 0: $latex で .tex -> .dvi するだけ
    # 1: $pdflatex で .tex -> .pdf (pdflatexは英文にしか使えない)
    # 2: $latex で .tex -> .dvi / $dvips で .dvi -> .ps / $ps2pdf で .ps -> PDF
    # 3: $latex で .tex -> .dvi / $dvipdf で .dvi -> PDF 
    # 4: $lualatex で .tex -> PDF
    # 5: $xelatex で .tex -> .xdv / $xdvipdfmx で .xdv -> PDF
    # lualatexしか使わないなら以下行のコメント（#）を外すが、他も使いそうならこのまま
    # $pdf_mode = 4; 
    
    # PDFビューワ の設定 
    # "start %S": .pdf の規定のソフトで表示（Windowsのみ）
    # Linuxの場合、"evince %S" を指定してください
    $pdf_previewer = "start %S";

 実践編実際にLaTeXを書いてみましょう！

 TeXファイルの作成適当な空フォルダを作りましょう。

パスに日本語や空白文字を含む場合、正しくビルドできない可能性があります。フォルダ名に日本語やスペースを含まないようにしましょう。

エラーが発生し解消しない場合は(C:/latex)などルートディレクトリに空フォルダを作るのもアリです。
空のテキストファイルを作ります。拡張子には .tex を指定します。(例：body.tex)
VSCodeでフォルダを開き、先ほど作成したtexファイルに以下のサンプルを書き込みます。    \documentclass{ltjsarticle}
    \begin{document}

    \title{わーいタイトルだっ\mathrm{\LaTeX} }
    \author{俺氏}
    \maketitle
    \section{見出しっ}
    \subsection{小見出し！}
    \paragraph{段落だー}
    これはLua\mathrm{\LaTeX} でやってます！端で改行されるし、うぇええええええええええええええええええええええええええい\\
    強制改行もできます。
    \end{document}
サイドバーからLaTeXを開きましょう。


LaTeXプロジェクトをビルドをクリックししばらく待ちます。


同じフォルダにPDFファイルが生成されたら完了です。


上手くいかない場合
 ・LATEX-コマンド-「LaTeXプロジェクトをビルド」が表示されない
 ・「LaTeXプロジェクトをビルド」左側∨を押した時レシピ一覧が出ない.latexmkrcが設定できていない可能性があります。もう一度Latexmkを確認してみましょう。

 ・PDFファイルが生成されるがエラーが表示される場合Adobe Acrobatのみならず、Microsoft EdgeやGoogle Chrome,Mozilla Firefoxなど他のソフトウェアを用いて開いてみましょう。

 ・PDFが開けない
 ・PDFが生成されないLaTeX Workshopが正しく構成されていない可能性があります。拡張機能LaTeX Workshopのインストールを確認してみましょう。

 謝辞この記事の執筆にあたって@NigirigomeOkaka氏に環境構築の再現をしていただきました。

心より御礼申し上げます。

 参考サイト私自身がはじめて導入した際に参考にしたサイトです。

この場をお借りして御礼申し上げます。
[初心者]LaTeXのインストールから使い方までこれ一本！ - Qiita

https://qiita.com/alpaca-honke/items/f30a2d04eedaa3c36a21

脚注
プログラマが弄ってるなんかカッコいい画面のこと。 ↩︎
パッケージ的な配布単位です。 ↩︎
ご挨拶

導入方法

Visual Studio Code (VSCode)

ダウンロード

インストール

VSCodeの日本語化

拡張機能LaTeX Workshopのインストール

スニペット

拡張機能Draw.io Integrationのインストール

使い方

TeX Live

ダウンロード

インストール

環境設定

Latexmk

通常デフォルトでユーザーフォルダ(C:/Users/*)を選択しますが、もし上手くいかなければ以下を試してみてください。

実践編

TeXファイルの作成

・LATEX-コマンド-「LaTeXプロジェクトをビルド」が表示されない

・「LaTeXプロジェクトをビルド」左側∨を押した時レシピ一覧が出ない

・PDFファイルが生成されるがエラーが表示される場合

・PDFが開けない

・PDFが生成されない

謝辞

参考サイト

Discussion
