---
tags: tools
---

# Latex in VSCode

## What we need

- TexLive
- [Visual Studio **Code**](https://code.visualstudio.com)
- extensions
- LaTeX language support
- vscode pdf
- Run on Save

## TexLive

可以參考各套件管理工具的安裝方式，或是到[官網](https://tug.org/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
>
> ```json
> {
> ...
> "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
>
> ```json
> {
> ...
> "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了