Back

Sublime text editor snippets

After four years in VS Code, I switched to Sublime Text because my laptop couldn’t keep up. Running two pre-v16.3 Next.js servers alongside multiple browser tabs, plus VS Code’s memory overhead, made my machine practically unusable. Sublime is significantly lighter and boots faster, which solved those performance issues.

To ease the transition, I focused on making the editing experience feel familiar. That led me to snippets. VS Code has them too, but I never really used them there. Here are the snippets I rely on now; I’ll update this list as I add more.

1. Writing Accented Letters

When working in Gĩkũyũ, I needed a faster way to type accented characters. Linux has native support for this, but snippets feel much smoother.

XML
<snippet>
    <content><![CDATA[ĩ]]></content>
    <tabTrigger>;gi</tabTrigger>
</snippet>
XML
<snippet>
    <content><![CDATA[Ĩ]]></content>
    <tabTrigger>;gI</tabTrigger>
</snippet>
XML
<snippet>
    <content><![CDATA[ũ]]></content>
    <tabTrigger>;gu</tabTrigger>
</snippet>
XML
<snippet>
    <content><![CDATA[Ũ]]></content>
    <tabTrigger>;gU</tabTrigger>
</snippet>

I originally used gi and gu as triggers, but that caused issues when typing mid-word. Prefixing them with a semicolon solved the problem.

2. Scaffolding Function Components

Scaffolding React components is repetitive, making it a perfect use case for snippets. In VS Code, typing rfc + Tab was a handy shortcut (from an extension probably?), so I recreated that workflow here.

XML
<snippet>
    <content><![CDATA[
import type { FC } from 'react';

interface ${1:ComponentName}Props {
    ${2:// Add props here}
}

const ${1:ComponentName}: FC<${1:ComponentName}Props> = ({ ${3:props} }) => {
    return (
        <div>
            $0
        </div>
    );
};

export default ${1:ComponentName};
]]></content>
    <tabTrigger>rfc</tabTrigger>
    <scope>source.tsx, source.jsx</scope>
    <description>TypeScript React Function Component with Interface</description>
</snippet>

3. Markdown Frontmatter

Frontmatter follows a predictable structure, so there’s no reason to type it manually. This snippet generates the YAML block with placeholders for metadata, letting you focus on content instead of formatting.

XML
<snippet>
    <content><![CDATA[
---
title: ${1:Title}
pubDate: ${2:${January 13 2024}
description: ${3:Description}
tags: [${4}]
draft: ${5:false}
---

$0
]]></content>
    <tabTrigger>fm</tabTrigger>
    <scope>source.md, source.mdx, source.astro</scope>
    <description>Markdown frontmatter with dynamic date</description>
</snippet>

4. Table Scaffold

Building data tables involves a lot of repetitive JSX. This snippet scaffolds a Shadcn/Radix table with the header and map pattern already wired up, so you can just tab through and fill in your fields.

XML
<snippet>
    <content><![CDATA[
<Table>
    <TableHeader>
        <TableRow>
            <TableHead className="${1:w-[100px]}">${2:Column}</TableHead>
            <TableHead>${3:Column}</TableHead>
        </TableRow>
    </TableHeader>
    <TableBody>
        {${4:data}.map((${5:item}) => (
            <TableRow key={${5:item}.${6:id}}>
                <TableCell>{${5:item}.${7:field}}</TableCell>
                <TableCell>{${5:item}.${8:field}}</TableCell>
            </TableRow>
        ))}
    </TableBody>
</Table>
$0
]]></content>
    <tabTrigger>table</tabTrigger>
    <scope>source.tsx, source.jsx</scope>
    <description>Shadcn/Radix table scaffold with map pattern</description>
</snippet>

5. Typed useState with Semantic Naming

This snippet enforces consistency by auto-capitalizing the setter name and keeping the type annotation inline. It’s a small detail, but it keeps your state declarations clean.

XML
<snippet>
    <content><![CDATA[
const [${1:value}, set${1/(.*)/\u$1/}] = useState<${2:string}>(${3:""});$0
]]></content>
    <tabTrigger>us</tabTrigger>
    <scope>source.tsx, source.ts</scope>
    <description>Typed useState with auto-capitalized setter</description>
</snippet>