Features Videos Help About Updates
Menu Buy Now

Adding Custom Languages

First Steps:
Getting Started
Live-Reload Browsers
Browser Sync
Set Language Options
Set Output Paths & Action
Second Steps:
Defaults For New Projects
Build Your Project
Set Target Browsers
Stuff To Know:
CodeKit + Git
Troubleshooting
License Recovery
PostCSS Tools:
Autoprefixer
PurgeCSS
Custom PostCSS Plugins
Other Tools:
npm
Babel โ€” (JS Transpiler)
Terser โ€” (JS Minifier)
Rollup โ€” (JS Bundler)
Cache-Buster
HTML-Minifier
LightningCSS
Bless
Languages:
Sass
Less
Stylus
JavaScript
CoffeeScript
TypeScript
Pug
Haml
Slim
Kit
Markdown
JSON
Image Optimizers:
WebP
PNG
JPEG
SVG
GIF
Frameworks:
CodeKit Frameworks
Tailwind
Bootstrap
Bourbon
Bitters
Zurb Foundation
Susy
Nib
Jeet
Syntax Checkers:
ESLint
Advanced:
Hooks
Environment Variables
Adding Custom Languages
Team Workflows
Scripting CodeKit
Editor Plugins:
Nova
Atom
Sublime Text
Coda 2
More
Read-Only Mode
Upgrading From 2.0
FAQ

You can add your own languages to CodeKit.

Open Project Settings, then select the Other category under Languages:

A screenshot of the custom languages settings in the CodeKit window

Click the add button in the top table to add a custom file extension.

Select an extension in the list. The window shows the same controls that CodeKit offers for every other language: you can set the starting Output Action and Output Path style for files with this extension. For details, see Setting Output Actions & Paths.

Default Output File Extensions

If your project does NOT use a Build Folder (or you're editing the Defaults For New Projects), CodeKit configures your custom language to name output files following this pattern: [inputFilename]-output.[inputFileExtension]. This stops the output file from overwriting the input file. To change this behavior, adjust the pattern in the "Output Filename" text field at the bottom of the Output Settings area.

You Probably Want a Hook, Too

If you add a custom language to CodeKit, you likely want the app to actually do something when you process files of that type. That's what Hooks are for.

Made in San Diego, CA

Follow the Developer on Twitter

Email Support

Report a Bug

Privacy Policy