Latex in VSCode

What we need

• TexLive
• Visual Studio Code
  • extensions
    • LaTeX language support
    • vscode pdf
    • Run on Save

TexLive

可以參考各套件管理工具的安裝方式，或是到官網下載

• mac: brew
• ubuntu/debian: apt
• arch: pacman

VSCode Extensions

• LaTeX language support
  • latex的語法highlighting
• vscode pdf
  • 在vscode中直接開啟pdf預覽
• Run on Save
  • 儲存檔案時執行指令

Run on Save 設定

在VSCode中按下 Ctrl+Shift+P 搜尋 setting

選擇 Preferences: Open Settings(JSON)

加入一組設定

for unix like

{
  ... 
  "emeraldwalk.runonsave": {
        "commands": [
            {
                "match": "main\\.tex",
                "isAsync": true,
                "cmd": "cd ${fileDirname} && mkdir -p tex_output"
            },
            {
                "match": "main\\.tex",
                "cmd": "cd ${fileDirname} && xelatex -output-directory=tex_output ${fileBasename}"
            },
            {
                "match": "main\\.tex",
                "cmd": "cd ${fileDirname} && bibtex tex_output/${fileBasenameNoExt}"
            },
            {
                "match": "main\\.tex",
                "cmd": "cd ${fileDirname} && xelatex -output-directory=tex_output ${fileBasename}"
            },
            {
                "match": "main\\.tex",
                "cmd": "cd ${fileDirname} && xelatex -output-directory=tex_output ${fileBasename}"
            },
        ]
    },  
  ...
}

for windows

{
  ... 
  "emeraldwalk.runonsave": {
        "commands": [
            {
                "match": "main\\.tex",
                "isAsync": true,
                "cmd": "cd ${fileDirname} && (if not exist tex_output mkdir tex_output)"
            },
            {
                "match": "main\\.tex",
                "cmd": "cd ${fileDirname} && xelatex -output-directory=tex_output ${fileBasename}"
            },
            {
                "match": "main\\.tex",
                "cmd": "cd ${fileDirname} && bibtex tex_output/${fileBasenameNoExt}"
            },
            {
                "match": "main\\.tex",
                "cmd": "cd ${fileDirname} && xelatex -output-directory=tex_output ${fileBasename}"
            },
            {
                "match": "main\\.tex",
                "cmd": "cd ${fileDirname} && xelatex -output-directory=tex_output ${fileBasename}"
            },
        ]
    },  
  ...
}

這組設定的意思是在儲存 main.tex 檔案時會執行建立一個名為 tex_output 的資料夾，並在該資料夾內編譯這個檔案

需注意這個無法 handle 路徑中有空格的，如果有錯誤可以先檢查看看路徑有沒有類似的情況產生

如果有需要多次編譯的，直接多加一個command即可

Final

記得將VSCode的 AutoSave 設定為 onFocusChange，如果是 after delay 的話，他就會一直編譯，會很煩

最後將資料夾內的pdf開在側邊後就會像這樣

寫一寫儲存後右邊就會顯示編譯後的pdf了