Turning VS Code into a Content Editor

I wanted to move away from using Medium as my primary article editing and publishing platform. Moving my articles to an Azure Static Website was straightforward. The harder part was adapting to writing in an interface other than the Medium editor that I had grown so used to.

I set out to recreate a similar editing experience in VS Code, and this write-up describes how I achieved it. I’m quite happy with the result.

I explored a couple of approaches: applying the customizations to all Markdown files or limiting them to a specific project. Customizing Markdown files globally requires additional VS Code extensions, and I was happy to keep these settings scoped to this project. Below are the steps I followed.

• Step 1: Install Markdown All in One VS Code extension
• Step 2: Install a spell checker - Code Spell Checker and Code Spell Checker British English
• Step 3: Edit .vscode\setting.json as shown below
• Step 4: Start editing in Zen mode (Ctrl + K, then Z). You can also use Ctrl + K, then V, to open the preview panel.

Understanding the settings.json changes

• Font Choice: Configured a serif stack featuring Charter and Georgia (“editor.fontFamily”).
• Sizing & Breathing Room: Increased the font size to 24px (“editor.fontSize”) and set a generous line height of 38px (“editor.lineHeight”) to give the prose room to breathe.
• Bounded Column: Bound the word wrap strictly to 85 columns (“editor.wordWrap”: “bounded”, “editor.wordWrapColumn”: 85). This keeps paragraphs tightly centered and highly scannable.
• Hidden UI Elements: Disabled line numbers, the mini-map, code folding arrows, and indentation guides.
• Silenced Assistance: Turned off quick suggestions, bracket matching, and line/selection highlights so the editor isn’t flashing or trying to autocomplete your sentences while you draft.
• Vertical Padding: Added 48px of top and bottom padding (“editor.padding.top/bottom”) so your first and last lines don’t hug the window borders.
• Horizontal Padding: Enabled the glyph margin (“editor.glyphMargin”: true). By keeping line numbers off but turning this vertical strip back on, it acts as a clean, built-in left margin buffer, forcing your text to start neatly away from column 0 without forcing a fully centered layout.

Below is the final settings.json file (located under the .vscode folder) that gives VS Code a look and feel very similar to the Medium editor.

{
    "workbench.colorTheme": "Quiet Light",
    "zenMode.centerLayout": true,
    "cSpell.enabledFileTypes": {
        "markdown": true,
        "plaintext": true,
        "yaml": false,
        "json": false,
        "jsonc": false,
        "python": false,
        "javascript": false,
        "typescript": false,
        "html": false,
        "css": false,
        "scss": false,
        "less": false,
        "xml": false,
        "csv": false,
        "tsv": false,
        "log": false,
        "shellscript": false,
        "powershell": false,
        "batch": false,
        "makefile": false,
        "dockerfile": false,
        "terraform": false
    },
    "editor.tokenColorCustomizations": {
        "[Quiet Light]": {
            "textMateRules": [
                {
                    "scope": [
                        "markup.heading",
                        "markup.heading.1",
                        "markup.heading.2",
                        "markup.heading.3",
                        "markup.bold",
                        "markup.italic",
                        "markup.inline.raw",
                        "markup.fenced_code.block",
                        "markup.quote",
                        "markup.underline.link",
                        "punctuation.definition.heading",
                        "punctuation.definition.list.begin",
                        "punctuation.definition.bold",
                        "punctuation.definition.italic",
                        "punctuation.definition.raw",
                        "punctuation.definition.quote",
                        "meta.link.inline",
                        "string.other.link",
                        // YAML frontmatter scopes (the coloured title:, date:, tags: etc.)
                        "entity.name.tag.yaml",
                        "string.unquoted.plain.out.yaml",
                        "string.quoted.double.yaml",
                        "string.quoted.single.yaml",
                        "constant.language.boolean.yaml",
                        "constant.numeric.integer.yaml",
                        "punctuation.definition.block.sequence.item.yaml",
                        "meta.block-mapping.yaml",
                        "source.yaml"
                    ],
                    "settings": {
                        "foreground": "#242424",
                        "fontStyle": ""
                    }
                }
            ]
        }
    },
    "[markdown]": {
        "editor.fontFamily": "'Charter', 'Georgia', 'Cambria', 'Times New Roman', serif",
        "editor.fontSize": 24,
        "editor.lineHeight": 38,
        "editor.fontWeight": "400",
        "editor.wordWrap": "bounded",
        "editor.wordWrapColumn": 85,
        "editor.lineNumbers": "off",
        "editor.minimap.enabled": false,
        "editor.glyphMargin": true,
        "editor.folding": false,
        "editor.padding.top": 48,
        "editor.padding.bottom": 48,
        "editor.occurrencesHighlight": "off",
        "editor.selectionHighlight": "off",
        "editor.renderLineHighlight": "none",
        "editor.guides.indentation": false,
        "editor.matchBrackets": "never",
        "editor.quickSuggestions": {
            "other": false,
            "comments": false,
            "strings": false
        }
    }
}

These changes give VS Code a look and feel that is remarkably close to the Medium editor.