Published on

How I Set Up LaTeX Environment on VS Code

5 min read
Authors
  • avatar
    Name
    Asfiolitha Wilmarani
    Trakteer
cara set up environment latex di vscode

Jadi, ceritanya gue memutuskan untuk nyelesaiin matkul wajib di semester ini dan ngabisin SKS sisanya di semester depan. Hence, it is time for the most dreaded matkul since it’s been made required: Tugas Akhir.

Aslinya gue gaada dendam apa-apa sama TA. It’s just that, one of the selling points of pacil back then was that our TA was not required. But now it is >:\

But Why?

Anyway, setelah berhasil nentuin topik, nyari dosen pembimbing, dan nunggu proposal diterima, tantangan selanjutnya adalah mulai nulis dokumen laporan TA-nya. Cara terbaik nulis dokumen ini adalah menggunakan LaTeX (because it takes care of a lot of the formatting, citations, ToC, labels, and all the good stuff). Tool yang sering digunakan untuk nulis LaTex adalah Overleaf.

Gue pernah coba pake Overleaf waktu ngerjain paper DAA dan MPPI, tapi compile time nya lama dan sering banget bikin browser gue ngelag. Gue yakin gue akan menghabiskan banyak waktu berkutat dengan revisi konten dan kode LaTeX-nya, jadi ngebayangin harus mantengin browser ngelag setiap kali compile aja udah bikin stres. That is why, gue cari alternatif untuk mindahin environment nya ke local aja supaya browser gue ngga terlalu berat.

Sebelum ini, gue udah luangin waktu untuk customize vscode gue jadi editor yang paling enak dilihat meski kalo gue dipelototin seharian. Karena itu, gue coba cari cara untuk set up environment nya di sini. Dengan kata lain, gue ngga mau environment LaTeX yang mengharuskan gue download dan install sebuah dedicated IDE (Integrated Development Environment) hanya untuk nulis LaTeX.

Which is why this guide came to be. I thought at least one other person would have the same problem I’m illustrating here, so here’s how I solved this “Mau nulis pake LaTeX tapi ngga mau di browser ataupun di dedicated IDE, harus di vscode” problem (yes I know it’s very specific).

The barebones of this guide is based on this article.

Install TeX

TeX itu pada dasarnya harus dicompile, jadi supaya bisa ngecompile dokumen TeX ke PDF, kita harus install TeX dulu. Distribution nya bisa ditemukan di sini, download sesuai OS yang lo gunakan saat ini.

Kalo udah download, tinggal diinstall (bukan unpack), terus tunggu programnya nginstall semua package yang dibutuhkan. Proses instalasi memerlukan koneksi internet, and it could take quite a while. Gue sarankan nginstall nya saat lo udah connect ke wifi (preferrably yang bandwidth nya gede biar nunggunya ngga lama).

And that’s pretty much it. You don’t have to do anything else for now. Sambil nunggu doi nginstall semua packagesnya, lanjut ke step berikutnya dulu.

Prep Vscode

There’s not much to do di vscode. Install some extensions, and you’re good to go~

Setelah download TeX dan extensions yang diperlukan, environmentnya kurang lebih siap dipake. Extension di atas akan ngebuild PDF setiap kali lo save changes, lalu previewnya akan hot-reload.

icon untuk preview pdf
Click icon yang dilingkari untuk preview PDF nya. Icon play di samping kiri itu untuk build PDF.

Gue biasanya bikin split pane antara code TeX dan PDF preview. Meski hot-reloadnya butuh waktu karena dia ngebuild dulu setiap ada change, at least it hot-reloads so it’s great :D

workspace environment latex
Here’s how my workspace looks like

Take your time getting used to it, I promise it’s gonna help a lot.

Additional Resources

Now, of course there’s not all there is to it. You still need to write a bunch of stuff for your TA/Skripsi to be completed. I got some additional resources that might help in the process~

Template Latex

Para pendahulu udah bikinin template open source untuk TA/Skripsi. Here’s
Template LaTeX Tugas Akhir UI
. It’s got all the things you need. Tinggal clone, lalu buka dengan environment yang baru kita siapin tadi~

Right now I’ve only got template untuk TA/Skripsi UI, kalo kalian ada resource untuk template TA/Skripsi universitas lain, feel free to contact me and I’ll put it up here :D

Support for Javascript Syntax Highlighting

Template di atas udah punya package namanya listings yang ngadain support untuk syntax highlighting berbagai language. Sayangnya, belum ada support untuk Javascript dan ES6. Berhubung TA gue melibatkan berbagai macam code React ES6, gue akan perlu syntax highlighting untuk nampilin code nya (because it’s nice to have).

  • Cari cara set up nya. If you need javascript like me, I already found it for you :D LaTeX Listings — JavaScript & ES6
  • Copy and paste the code with \lstdefinelanguage ke dalam file _internals\uithesis.sty. Sebaiknya setelah line yang mendefine package listings. Coba Ctrl + F line ini, lalu paste code di bawahnya.
% Digunakan untuk memasukkan kode program ke dalam berkas.
\usepackage{listings, xcolor, xparse}

Now you’re good~! Here’s an example on how I use it.

\lstinputlisting[language=ES6, caption=Caption code Javascript, label=code:contohCode]{assets/codes/3-sample.js}

TL;DR

Untuk set up environment LaTeX di vscode, all you gotta do is:

That’s it.


That’s all I can share for now~ This is no more than a productive procrastination on my side (instead of actually writing my stuff I’m writing this guide lmao). Well, I sure hope it helps.

See you on the next one~