Chapter 03 — Front-End Fundamentals

Text Editor

You need somewhere to write code. Unlike most software choices, this one has a right answer for where you’re starting: Visual Studio Code. This chapter covers why, how to install it, and how to set it up so it’s useful from day one.

Why VS Code

There are plenty of text editors worth knowing. Vim is powerful and runs anywhere, including on servers you’ve SSH’d into. Sublime Text is fast and has a devoted following. Neovim is what a certain kind of developer will tell you to use the moment you mention you’re learning to code.

All of those are fine choices with a place in a working developer’s toolkit. For learning front-end development in 2026, VS Code is where you should start. Here’s why.

It’s free. The extension ecosystem is the best available, which matters because we’ll be adding PHP and WordPress tooling in later chapters. The integrated terminal keeps your editor and your command line in the same window, which reduces friction while you’re still building muscle memory. The built-in Git integration lets you see what’s changed without switching to the terminal. And Emmet, a shorthand system that expands abbreviations into full HTML, is built in and will speed up your markup considerably once you’re used to it.

One note: VS Code is open source on GitHub under the MIT license, but the distributed binary from Microsoft includes telemetry and some proprietary additions. If that matters to you, VSCodium is a community-maintained build of the same codebase without those additions. Everything in this series works identically in either.

Install VS Code

On macOS:

Go to code.visualstudio.com and download the macOS build. Open the downloaded .zip, drag Visual Studio Code.app into your /Applications folder, and launch it.

Then install the code command so you can open VS Code from the terminal. Open the Command Palette with Cmd+Shift+P, type shell command, and select Shell Command: Install ‘code’ command in PATH. You’ll use this constantly.

On Ubuntu:

The cleanest install is via snap:

bash~/tutorials/
sudo snap install code --classic

Or download the .deb package directly from code.visualstudio.com and install it:

bash~/tutorials/
sudo dpkg -i code_*.deb

The code command is available in your terminal immediately after either method.

Open your project

Navigate to your tutorials folder in the terminal and open VS Code from there:

bash~/tutorials/
cd ~/tutorials
code .

The . means “open the current directory.” VS Code opens with your entire tutorials folder visible in the sidebar on the left. This is how you’ll open every project from here on: navigate to the project root, run code ..

The interface

You don’t need to learn every panel and menu. Four things to know now:

The sidebar shows your file tree. Click any file to open it. Right-click to create new files and folders without leaving the editor.

The editor is the main area where you write code. You can split it into multiple columns with Cmd+\ (macOS) or Ctrl+\ (Ubuntu) if you want to see two files side by side.

The integrated terminal opens with Ctrl+` on both platforms. This is a full terminal session running inside VS Code, in your current project directory. You can run Git commands, create files, and do everything from Chapters 1 and 2 here without switching windows.

The Command Palette opens with Cmd+Shift+P (macOS) or Ctrl+Shift+P (Ubuntu). If you want to do something in VS Code and don’t know the keyboard shortcut, open the palette and type what you want. It finds the command.

Extensions

Extensions add functionality. Install these now. They’ll be useful immediately and essential later.

Open the Extensions panel with Cmd+Shift+X (macOS) or Ctrl+Shift+X (Ubuntu). Search by name and click Install.

Prettier: automatic code formatting. Prettier opinionates how your code looks so you don’t have to think about it. Consistent indentation, quote style, and line length across every file.

ESLint: JavaScript linting. Catches errors and enforces code quality rules. We’ll configure it properly in Chapter 11.

PHP Intelephense: PHP language support with autocomplete and error detection. You won’t need it until the WordPress chapters, but install it now.

Live Preview: opens a local server and previews your HTML in a browser panel, updating automatically as you save. Replaces the manual open src/index.html from Chapter 1.

Configure Prettier to format on save

Open your VS Code settings with Cmd+, (macOS) or Ctrl+, (Ubuntu). Click the icon in the top right to open settings.json directly. Add these lines:

json~/tutorials/
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Now every time you save a file, Prettier formats it automatically. You’ll notice it immediately when it straightens out inconsistent indentation.

Emmet

Emmet is built into VS Code. It lets you write shorthand that expands into full HTML. In any .html file, type this and press Tab:

plaintext~/tutorials/
h1

It expands to:

html~/tutorials/
<h1></h1>

A more useful example. Type this and press Tab:

plaintext~/tutorials/
ul>li*3

It expands to:

html~/tutorials/
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

You don’t need to memorize Emmet syntax right now. You’ll pick it up as you use it. The Emmet cheat sheet is worth bookmarking.

What you now know

VS Code is installed, your project is open, and you have the extensions you’ll need for the rest of the series. In Chapter 4 you’ll write your first HTML file from inside the editor.

Reference