Configure a Global cSpell User Dictionary in VS Code

This article shows how to move your custom cSpell words out of VS Code’s settings.json and into a dedicated global dictionary. This keeps your configuration clean while providing a single, reusable place for technical terms, product names, and other words you use across projects.

When using the Code Spell Checker (cSpell) extension in VS Code, custom words can be added directly to settings.json using cSpell.userWords. Over time, however, this list can become large and clutter the VS Code configuration.

A cleaner approach is to maintain custom words in a separate global dictionary file.

Note: These instructions assume you are using macOS.

Create the Dictionary File

Create a global cSpell dictionary in your home directory:

touch ~/.cspell-dictionary.txt

For a user named username, the full path to the file would be:

/Users/username/.cspell-dictionary.txt

Open the file in VS Code:

code ~/.cspell-dictionary.txt

Add custom words to the dictionary with one word per line:

bootcamp
cfadmin
cfconfig
cfcs
cfdocument
cfengine
cfformat
cfinvoke
cflog
cfoutput
cfpm
cfschedule
cfscript
cfset
cfusion
CommandBox
Fixinator
Flexbox
Glyphicons
labwc
Lucee
LUCEEONLY
Mailpit
mailsent
navbars
Ollama
raspi
strikethrough
Udemy
Webroot
WebUI

Unlike settings.json, the dictionary file does not use JSON syntax. Do not include quotes, commas, or brackets.

Configure cSpell

Open your VS Code settings.json and add the following:

"cSpell.dictionaryDefinitions": [
    {
        "name": "my-words",
        "path": "/Users/username/.cspell-dictionary.txt",
        "addWords": true
    }
],
"cSpell.dictionaries": [
    "my-words"
],

This defines a dictionary named my-words and tells cSpell to use it globally.

The addWords setting allows cSpell to add new words to this dictionary when using its Add Word to Dictionary functionality.

Remove cSpell.userWords

If the same words are currently stored in settings.json:

"cSpell.userWords": [
    "CFML",
    "CommandBox",
    "Fixinator",
    "Lucee",
    "Ollama"
],

copy those words into .cspell-dictionary.txt, then remove the cSpell.userWords setting.

Your custom words will now be maintained in the global dictionary instead of settings.json.

Adding New Words

When cSpell flags a legitimate word such as:

Ollama

use the cSpell quick fix in VS Code and add the word to the my-words dictionary.

Because the dictionary was configured with:

"addWords": true

new words can be written to:

~/.cspell-dictionary.txt

instead of continually expanding cSpell.userWords in settings.json.

The dictionary will gradually grow as new project-specific terminology, product names, acronyms, and technical terms are encountered.

Result

The VS Code configuration remains small:

"cSpell.dictionaryDefinitions": [
    {
        "name": "my-words",
        "path": "/Users/username/.cspell-dictionary.txt",
        "addWords": true
    }
],
"cSpell.dictionaries": [
    "my-words"
],

while the potentially much larger collection of custom words lives separately in:

~/.cspell-dictionary.txt

This keeps settings.json cleaner and provides a single global dictionary that can be maintained independently of VS Code’s other settings.

Global Markdownlint Configuration for GFM in VS Code

I’ve been working on a lot of documentation lately, and I’ve been trying to adhere to standards by linting my Markdown in VS Code the same way I lint my code. That being said, I’ve grown weary of fighting the linter over a few rules.

Note: These instructions assume you are using macOS.

Configure VS Code markdownlint with rules intended for GitHub Flavored Markdown (GFM). These settings provide sensible defaults for writing README files and other Markdown documentation hosted on GitHub.

Create the Configuration File

Create a global .markdownlint.json file in your home directory:

touch ~/.markdownlint.json

Add the following to ~/.markdownlint.json:

{
    "MD007": {
        "indent": 4
    },
    "MD013": false,
    "MD024": {
        "siblings_only": true
    },
    "MD033": false
}

Rules

  • MD007 — Unordered list indentation
    • Uses 4 spaces for nested unordered lists.
    • This provides consistent indentation and works well with GitHub Flavored Markdown.
  • MD013 — Line length
    • Disabled.
    • Markdownlint normally limits lines to 80 characters.
    • GFM does not require an 80-character line limit, so disabling this allows paragraphs and other content to remain on a single source line.
  • MD024 — Duplicate headings
    • Configured with siblings_only: true.
    • Allows the same heading name to appear in different sections.
    • Duplicate headings under the same parent are still flagged.
  • MD033 — Inline HTML
    • Disabled.
    • Allows HTML inside Markdown documents.
    • GitHub supports useful HTML elements such as <details>, <summary>, <kbd>, and <br>.

Configure VS Code

Add the following to your VS Code settings.json:

"markdownlint.configFile": "/Users/yourusername/.markdownlint.json",

Replace yourusername with your macOS username.

Markdownlint will now use the global configuration for your Markdown files.

Project-Specific Configuration

If you only want the rules to apply to a specific project, create .markdownlint.json in the root of the project instead:

my-project/
├── .markdownlint.json
├── README.md
└── ...

A project-level .markdownlint.json can be committed to Git with the rest of the project. This is especially useful for team projects because everyone who clones the repository can use the same Markdownlint rules.

It also allows individual projects to define their own Markdown standards instead of relying on each developer’s global VS Code configuration.

Better Comments extension for CFML development in VSCode

This is an example of using the Better Comments extension for CFML development in VSCode .

The Better Comments extension visually highlights specially tagged comments (like TODO, !, or ?) using colors and styles so important notes, questions, and tasks stand out instantly in your code.

You can define custom styles in either User or Workspace settings.json. You can set the color or backgroundColor, as well as underline, strikethrough, bold, and italic.

Example of a custom LUCEEONLY comment:

    "better-comments.tags": [
        {
            "tag": "luceeonly",
            "color": "#3CBED0",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "#transparent",
            "bold": true,
            "italic": false
        }
    ]

Gotcha 1: You must define all better-comments.tags in one location. Better Comments does not merge tag arrays.

Gotcha 2: When using CFML block comments in tag-based ColdFusion files, you must use // as the first non-whitespace characters after the opening comment tag for Better Comments to recognize the comment type.

Changes to settings may require reloading the VS Code window to take effect:

CMD+SHIFT+P > Developer: Reload Window

Results below:

Better Comments extension for CFML development in VSCode
Better Comments extension for CFML development in VSCode

Set CommandBox to the default terminal profile in VSCode terminal

Here is a helpful workspace configuration option(s) that allows you to set the default terminal profile (terminal.integrated.defaultProfile.YOUR_OS) to CommandBox in VSCode terminal.  This allows you to launch CommandBox by default when you open a terminal in the workspace.  Further, you can specify the current working directory (terminal.integrated.cwd) so any new terminal you open in the workspace will start in that directory.

On OSX

"settings": {
  "terminal.integrated.profiles.osx": {
    "CommandBox": {
      "path": "/Users/csimmons/.CommandBox/bin/box"
    }
  },
  "terminal.integrated.defaultProfile.osx": "CommandBox",
  "terminal.integrated.cwd": "/Users/csimmons/websites/demos"
}

On Windows

"settings": {
  "terminal.integrated.profiles.windows": {
    "CommandBox": {
      "path": "C:\\Users\\csimmons\\.CommandBox\\box.exe"
    }
  },
  "terminal.integrated.defaultProfile.windows": "CommandBox",
  "terminal.integrated.cwd": "C:\\Users\\csimmons\\websites\\demos"
}

Note(s)

  • These settings are stored in YOUR_WORKSPACE.code-workspace so you can set them on a per workspace basis.
  • YOUR_OS = the OS you are running
  • YOUR_WORKSPACE = whatever the .workspace file is for your current workspace.

This post is a follow up to a topic I originally posted titled Run CommandBox directly inside VSCode Terminal which explained setting up a custom terminal profile (terminal.integrated.profiles.YOUR_OS) for CommandBox.

Revisiting CFML Formatter (VSCode extension) with cfformat-ignore

I’d like to revisit the CFML Formatter (VSCode extension) that I posted on not too long ago and mention the cfformat-ignore functionality.

I had to work on some 15+ year old code today. I won’t say who wrote that code. Cough Me. Cough Embarrassing. Every time I saved a file the CFML Formatter was working overtime to try to figure out how to get the code formatted. Long story short there were a few blocks involving concatenation that ended up throwing errors after they were reformatted. Due to time constraints I needed to put a pin in figuring how to rewrite the offending blocks and just needed cfformat to ignore those blocks.

In a nutshell there are 3 ways to do it depending on the block of code.

Tag Based

Script Based

Comment Block

    /* cfformat-ignore-start */
    /* Crazy, unformatted code here. */
    /* cfformat-ignore-end */

Note: The special cfformat-ignore-start and cfformat-ignore-end comments must be at the same level of indentation within the file to work properly.

Cleaner code with CFML Formatter (VSCode extension) + cfformat (CommandBox module)

I don’t work on a lot of non-CFML development but I had a couple of PHP projects and a JavaScript project I was working on last month. In an effort to tidy up my code in those projects I started using Prettier. I even wrote a post on Prettier and how I would be including it in future projects. Well, this weekend I was working on a CFML project and came across Mark Drew’s incredible CFML formatter extension for Visual Studio Code. Per the documentation:

CFML formatter is a Visual Studio Code extension that provides formatting for CFML files using Lucee Server and CFFormat

CFML formatter and cfformat are two great tools you can use to:

  1. Set and implement coding standards for yourself and/or your team.
  2. Format code in real time as you work in Visual Studio Code.
  3. Scan, review, and even format code issues manually or in an automated manner by watching directories.

Installation

CFML formatter

Install the CFML formatter VSCode extension from the Extensions view in Visual Studio Code.

cfformat

Install the cfformat CommandBox module by launching CommandBox and running the following command.

box install commandbox-cfformat

A few things you can do with CFML formatter

Format code on save

This will format your code using CFML formatter every time you save a file in Visual Studio Code (you can define the rules using a .cfformat.json file which you can also share with your team!).

To configure Format code on save:

  • Open Settings by pressing Cmd+, for Mac (or CTRL+, for Windows/Linux).
  • Type format in the search box and enable the option Format On Save.
Format on save in VSCode
Format on save in VSCode

Format code using right click

This will format your code using CFML formatter when you right click in the Visual Studio Code editor and choose Format Document

More info on CFML formatter

You should also check out CFRules.

Read the full CFML formatter documentation at Visual Studio Marketplace.

A few things you can do with cfformat

Run a wizard

cfformat settings wizard

The wizard will:

  1. Walk you through all settings.
  2. Display the options AND what those options will do to an example of code.
  3. Indicate the default setting.
  4. Generate a .cfformat.json file for you based on your choices.

This wizard option is incredible!

View existing settings

cfformat settings show

cfformat settings show command in CommandBox
cfformat settings show command in CommandBox

These settings can be stored in a .cfformat.json file in your Visual Studio Code project. They will then govern Format code on save and the Format Document on right click action.

Read the full settings reference at: https://github.com/jcberquist/commandbox-cfformat/blob/master/reference.md.

Learn more about a setting

cfformat settings info tab_indent

cfformat settings show info command in CommandBox
cfformat settings show info command in CommandBox

Checking Tag structure

This option looks for:

tags that are unbalanced or incorrectly structured

Check a file:

cfformat tag-check about.cfm

cfformat tag-check file command in CommandBox
cfformat tag-check file command in CommandBox

Check a directory:

cfformat tag-check

cfformat tag-check command in CommandBox
cfformat tag-check command in CommandBox

Not only will cfformat tag-check locate cfml tag issues it will also locate html tag issues as shown above!

More info on cfformat

Check out some other really cool stuff like Watching Directories and Ignoring Code Sections.

Read the full cfformat documentation at FORGEBOX.

In Summary

My workflow is going to be:

  1. Generate a .cfformat.json file in my CFML project using the cfformat CommandBox module
  2. Let CFML formatter format my code on save in Visual Studio Code (governed by the .cfformat.json file)
  3. Periodically I will manually run cfformat tag-check on my project using the cfformat CommandBox module.

Run CommandBox directly inside VSCode Terminal

Run CommandBox directly inside VSCode Terminal

Initially I looked at the CommandBox documentation for running it inside VSCode: https://commandbox.ortusbooks.com/ide-integrations/visual-studio-code. However, the Shell Launcher extension was deprecated in favor of Terminal Profiles in the Integrated Terminal (VSCode >= v1.55). See this article: https://code.visualstudio.com/updates/v1_55#_terminal-profiles.

Set up a Terminal Profile for CommandBox:

  1. Open VSCode Preferences > Settings
  2. Search for terminal.integrated.profiles.osx (Replace osx with windows or linux based on your os)
  3. Click “edit in settings.json”
  4. Add the following under terminal.integrated.profiles.osx
    "CommandBox": {
        "path": "path/to/box"
    }
  1. Close and save settings.json

Launch CommandBox from VSCode terminal

  1. Press Cmd + Shift + P or Ctrl + Shift + P to launch the Command Palette
  2. Begin typing Terminal
  3. When you see Create New Terminal (With Profile) press Enter
  4. Under Select the terminal profile to create you should see the CommandBox profile you created. Select it with the down arrow key and press Enter
  5. CommandBox should launch in the terminal window