Next.js Development with Sublime Text 4
[Update 6/27/2022: I switched from nvm to fnm which reduced the need for the custom Node binary configuration listed later in this article. Read about the tweak here. The rest of the instructions are still accurate.]
I recently upgraded to Sublime Text 4 and decided to give it another try for use in my Next.js development workflow. A couple of years ago I used Sublime Text frequently, but VS Code included too much out of the box to compete. With this new release of Sublime Text, I wanted to see how it compares to Visual Studio Code and if I could use it as my main driver for coding.
Sublime Text’s native implementation has always impressed me, with its speed and responsiveness. Both pieces I found myself missing in VS Code.
Overall it’s been great so far! I based most of my configurations off of this Hacker News comment (with a couple of tweaks), and performance has been stellar.
One of the benefits of Sublime’s new version 4 is native TypeScript syntax support, so we don’t need to lean on Microsoft’s plugin that seems to be falling behind.
Starting this process, I wanted three things:
- TypeScript type-checking, with easy type lookups (think Option+Click and hover popups in VS Code).
- ESLint linting and Prettier formatting support.
- Useful utilities like file icons and color previews.
Note that I don’t use VS Code’s terminal (I use Warp), though Sublime does have equivalent functionality available.
Before continuing to the following steps, make sure you’ve got Sublime Text 4 installed locally, with Package Control enabled.
TypeScript tooling
First up, a proper TypeScript environment needs both type checking as well as tools to investigate and dig into nested types.
Install the Language Server Protocol (LSP) package:
CMD+P > Package Control: Install Package > LSP
LSP acts as an interface between Sublime Text and your language server. (source)
Next, install the TypeScript language server:
CMD+P > Package Control: Install Package > LSP-typescript
This package holds the LSP implementation for TypeScript, wrapping
tsserver. (source)
Here’s a bonus, let’s add support for the Option+Click of a name to jump to its type:
- Create a file named
Default (OSX).sublime-mousemapin~/Library/Application Support/Sublime Text/Packages/User - In the file, paste:
[
{
"button": "button1",
"count": 1,
"modifiers": ["option"],
"press_command": "drag_select",
"command": "lsp_symbol_definition"
}
]
ESLint and Prettier integration
I run Prettier and ESLint together to reduce cognitive load while I code, with eslint-config-prettier eliminating any collisions between the two.
Installing Prettier support via the JsPrettier package:
CMD+P > Package Control: Install Package > JsPrettier
Similar to the LSP package, SublimeLinter provides a generic interface to integrate with linters. Let’s install it now:
CMD+P > Package Control: Install Package > SublimeLinter
Now install the ESLint integration:
CMD+P > Package Control: Install Package > SublimeLinter-eslint
This integration requires ESLint to be available in the local environment, which can be installed via npm install -g eslint if it isn’t already available in your project.
Workaround: This setup requires Node to be installed and won’t automatically work with nvm. Thanks to a note in this tutorial, here’s a quick fix. Open SublimeLinter settings:
CMD+P > Preferences: SublimeLinter Settings
Inside this new file, paste this content:
// SublimeLinter Settings - User
{
"linters": {
"eslint": {
"env": {
"PATH": "/Users/{USERNAME}/.nvm/versions/node/{NODE_VERSION}/bin/"
},
"args": ["--env=es6"]
}
}
}
Make sure to replace {USERNAME} and {NODE_VERSION} with the corresponding values from your local file system and preferred Node version.
Now let’s do the same for JsPrettier:
CMD+P > Preferences: JsPrettier Settings - Side-by-Side
Pasting:
{
"node_path": "/Users/{USERNAME}/.nvm/versions/node/{NODE_VERSION}/bin/node",
"auto_format_on_save": true,
"auto_format_on_save_requires_prettier_config": true
}
Those last two lines are optional, but will enable autoformatting on file save if a project has a prettier config specified. They also offer some alternative examples of custom Node paths in their documentation.
File icons and color hinting
A few small enhancements helped seal the deal for me. First up, install A File Icon to show more descriptive and colored file/folder icons:
CMD+P > Package Control: Install Package > A File Icon
Make sure to restart the editor after installing this package.
Finally, let’s use ColorHelper to show a small box next to each color code that previews what the color looks like:
CMD+P > Package Control: Install Package > ColorHelper
Other packages may be useful such as Tailwind CSS and DotENV support.
Finishing Up
Now, any file can be formatted using this command:
CMD+P > LSP: Format File
With all of these configurations in place, Sublime Text 4 has served me well. It is responsive, quick to startup, and doesn’t consume battery as much as VS Code while still offering all of the benefits of type checking, autocompletes, and linting.
