My Sublime Text Setup in 2024 for Web Development

Sublime Text in 2024 is a powerful, viable text editor that I find delightedly minimal, fast, and productive. While the core of my Sublime setup hasn't changed much, I wanted to share the details of my setup and some essential plugins I cannot live without in 2024. I wrote about my Minimalist Sublime Text 3 Setup for PHP back in 2018 (wow time flies), and I still feel like the heart of my experience is similar in 2024. I aim for a minimal setup. However, I have found some valuable plugins that save time and make me more productive.

#My Theme

Sublime has a lot of themes available, and I've tried many of them, but I've found a permanent home with the Monokai Pro theme:

I prefer the Octagon version, but all of them are really, really good, and I am sure you'll find something you'll love. This theme requires a license, but you can try it out before you buy it with popup reminders to buy a license. For me, it's well worth the ~ $13 USD price. I also have the VS Code license as sometimes I'll use VS Code for specific tasks (i.e., Astro has a much better experience in VS Code), and I like the consistency of themes as I jump between editors.

Along with Monokai Pro, I use the paid Operator Mono font (Book) as I find it the most readable coding font I've ever tried. I have also tried out JetBrains Mono, and that's what I'd recommend if you don't want to fork out $200+ USD for Operator Mono.

Font size and spacing is a personal thing, but here's what my font-related settings look like in Sublime Text:

{
    "font_face": "Operator Mono Book",
    "font_size": 14,
    "line_numbers": true,
    "line_padding_bottom": 8,
    "line_padding_top": 8,
    "smart_indent": true,
    "spell_check": false,
    "tab_size": 4,
    "theme": "Monokai Pro (Filter Octagon).sublime-theme",
    "word_wrap": true,
    "scroll_past_end": true,
}

#My Plugins

I will not list out each plugin I have installed, but I'll highlight the plugins I think will have a big impact on making Sublime Text a fantastic editing experience in 2024. I've recently started Using Language Servers in Sublime Text, a huge level up for code intelligence in many languages supported by the Sublime LSP package.

The LSP PHP package (I use Intelliphense) is the only PHP plugin I use with Sublime Text. It does most everything I need, and gives much better code intelligence than the default experience.

Besides the LSP plugin, here's what I cannot live without:

• The AdvancedNewFile package to quickly manage files
• The EditorConfig package for automatic config via a project's .editorconfig file.
• The Laravel Blade plugin for Blade syntax highlighting
• The Vue Syntax Highlight plugin for Vue single file components

Using static analysis tools like PHPStan is imperative if you want to use a text editor as your primary driver. You'll definitely miss some things. However, the LSP plugin improves calling your attention to these issues.

#Snippets

I love snippets, and I recommend developers have their own curated collection of snippets that they can collect over time. Some of my most used snippets are for creating class methods:

pubf - creates a method with public visibility
prof - starts a snippet with protected visibility
prif - starts a snippet with protected visibility

Here's an example snippet from the above pubf snippet:

<snippet>
    <content><![CDATA[
public function $1()
{
    $0
}
]]></content>
    <tabTrigger>pubf</tabTrigger>
    <scope>source.php</scope>
</snippet>

Another one I use all the time is the test snippet (which I activate with tab), which creates a phpunit test case:

<snippet>
    <content><![CDATA[
public function test_$1()
{
    $0
}
]]></content>
    <description>Create a PHPUnit Test Case</description>
    <tabTrigger>test</tabTrigger>
    <scope>source.php</scope>
</snippet>

You can see my paulredmond/sublime-snippets snippets plugin for Sublime. To install this plugin, I use git clone:

git clone https://github.com/paulredmond/sublime-snippets \
  ~/Library/Application\ Support/Sublime\ Text/Packages/User/sublime-snippets

Your path to user packages might be different! You can find out by going to Sublime Text > Preferences > Browse Packages and then look for a User folder. That path is where you want to copy/clone your snippets.

#Version Control

Editors like PhpStorm and VS Code have integrated version control tools and other tools for visual diffs and committing code. I have always used the CLI for Git commands, so jumping between Sublime Text and my terminal isn't jarring. I use Git Mergetool to view diffs and merge conflicts. Another suggestion is to use GitHub Desktop. Finally, Sublime has a companion app for Sublime Text called Sublime Merge, which will give you a similar Sublime experience for your version control.

#Learn More

Though some developers have moved on from Sublime Text, I appreciate a minimal, humble text editor. Web developers' toolchains have become incredibly complex, and I long for the days when a text editor's primary role was, well, text editing.