Prettier – CFchimp

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:

Set and implement coding standards for yourself and/or your team.
Format code in real time as you work in Visual Studio Code.
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 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:

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

This wizard option is incredible!

View existing settings

cfformat settings show

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

Checking Tag structure

This option looks for:

tags that are unbalanced or incorrectly structured

Check a file:

cfformat tag-check about.cfm

Check a directory:

cfformat tag-check

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:

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

A cute and smart dog wearing glasses — A dog with glasses ready to do new tricks

I’ve worked on a team of one for a very long time. I appreciate the level of autonomy that I have, but I’ve noticed now more than ever that it can facilitate bad habits and laziness. Luckily, in the modern era of coding there are tools that can help encourage (or flat out enforce) good habits in code formatting and style. My latest attempt to start cleaning up some bad habits is to use Prettier (an opinionated code formatter) in all my projects rather than selectively.

Rather than me going deep into the how and the why for using Prettier I’d recommend reading this explanation.

If you use VSCode like I do then you first need to install the Prettier extension. Once you have done that you can try out the sample .prettierrc file below by placing it in the root of your project(s). The .prettierrc file is the configuration file that will allow you to set the Prettier options in a way that makes sense for your project. I’m trying to mostly use defaults (i.e. good habits), but there are a few options I prefer, or they are so engrained in legacy code that I maintain that changing them would be a Herculean effort.

Once the .prettierrc file is in place…

To format a document in VSCode:

Use a Shortcut:
- Windows/Linux: Press Shift + Alt + F
- Mac: Press Shift + Option + F
Use the Command Palette:
- Open the Command Palette with Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (Mac).
- Type "Format Document" and press Enter.
Auto-format on Save (optional):
- Go to Settings (Ctrl + , or Cmd + ,), search for "format on save", and enable it by checking Editor: Format On Save.

Below is a gist containing two files. The first file is the sample .prettierrc. The second file is a README which actually includes the contents of the .prettierrc file and explains the options.

The gist:

You don’t have to use a .prettierrc file. You can set up your options directly in the Prettier extension’s settings. However, I’m using the .prettierrc file so it is clear what options are being enforced on any given project.

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