clang-format; WASM clang-format; Editor/IDE Plugins

As promised from the last Bonus Drop, we’re covering clang-format today. The Bonus Drop showed how to use it to make C++ files consistent, so we can treat them more like data, but they’re way handier in a project or tool context.

Programming note: I’m traveling for $WORK this week, so the Drops may be spotty or scant. Will 100% have one or more weekend editions tho!

---

clang-format

clang-format is a net and helpful tool designed for the automatic formatting of C, C++, and Objective-C (plus a decent number of other C-ish languages) code according to a set of predefined style rules. It was developed as part of the clang project, which is a compiler front-end for scads of programming languages (as we’ve covered before, it emerged from the larger LLVM compiler infrastructure project).

The development of clang-format began around 2007, coinciding with the inception of the clang project itself. It took until the early 2010s for clang-format to gain decent traction and fairly widespread adoption. This tool was specifically created to address the need for consistent code formatting across large codebases, particularly in projects involving multiple contributors.

It serves several key purposes. First, it ensures that code follows a consistent style throughout a project, regardless of the author. It also automates the code formatting process, saving us time and reducing conflicts over style issues. And, it provides customization options, allowing teams to define their own style rules to meet various project requirements.

Speaking of style, there are multiple style options, supporting predefined styles such as LLVM, Google, Chromium, Mozilla, and WebKit, while also allowing for custom configurations. Although primarily used for C and C++, it also supports languages like Java, JavaScript, Objective-C, and Protobuf. clang-format has also been integrated into various IDEs and text editors, and even version control systems for pre-commit hooks. For selective formatting, you can use special comments (like with linters) to disable or enable formatting in specific sections of the code.

There are several ways to use clang-format. It can be run directly on files via the command line, integrated into editors for automatic formatting, or used with git hooks to ensure all committed code is properly formatted (we can also use it on the web as we’ll see in the next section). Configuration is handled through a .clang-format file, which can be generated using predefined styles and customized to fit project needs.

Best practices for using clang-format include using the said dotfile in version control systems to ensure consistency across the team, applying clang-format gradually in large existing projects to avoid massive diffs, integrating it into CI pipelines to catch formatting issues early, and encouraging team members to integrate clang-format into their editors for real-time formatting. This post by Mark Mossberg is pretty helpful regarding using clang-format within git workflows.

In recent years, clang-format has seen numerous developments, including performance improvements for large codebases, enhanced customization options with more granular control over formatting rules, and expanded language support for newer C++ standards and additional languages.

There’s a good chance you’ve got clang on your box, so give this a go the next time you’re in need of consistency.

If you need help tweaking a good, personal config, try out one of the configurators. ^{[1] [2]}

---

WASM clang-format

There’s a WASM version of clang-format which lets us run the tool’s functions directly in web browsers and other JavaScript environments without requiring native compilation or installation. It’s compiled from the original C++ codebase using tools like Emscripten to target WebAssembly. This results in a .wasm binary file that can be loaded and executed in JavaScript environments.

Rather than blather too much about this, I tossed an example in the playground (CB) that lets you paste in some source, choose a style and file type, and have it format it for you (you can also copy the results). It’s all plain HTML/JavaScript/CSS (no ‘Lit’, this time).

It’s super-easy to use that in a Node.js context, Deno context, or — as demonstrated — vanilla JS context.

---

Editor/IDE Plugins

Here’s an (inexhaustive) list of clang-format plugins for popular editor IDEs:

• Visual Studio Code: Clang-Format
• IntelliJ IDEA: Clang-Format
• CLion: Built-in ClangFormat support
• Eclipse: CppStyle
• Sublime Text: Clang Format
• Atom: clang-format
• Vim: vim-clang-format
• Emacs: clang-format
• Visual Studio: ClangFormat

---

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev ☮️