Features Videos Help About Updates
Menu Buy Now

JavaScript

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

CodeKit does many things with JavaScript.

Click on a task for details:

• Scan for syntax errors with ESLint.

Quickly find problems and enforce personal coding style—spaces not tabs!

• Bundle files together with Rollup.

Use import statements to combine JS files (ES6 modules).

• Transpile files with Babel.

Write next-generation JavaScript, then translate it back to the older standards that today's browsers understand.

• Minify files with Terser.

Make JS files smaller to reduce page-load time.


Simple JavaScript Imports

If you don't want to use ES6 Modules (or you're working with a library that does not support them), CodeKit offers another, simpler way to combine JavaScript files.

Special Comments

Special comments in your JS files tell CodeKit how to combine them. These comments let you prepend or append one JS file to another. They look like this:

// @codekit-prepend "someFile.js";
...
// @codekit-append "../someOtherFile.js";

You can also combine multiple files at once with a comma-separated list:

// @codekit-prepend "jQuery.js", "../otherFile.js";
The Quiet Keyword

Sometimes, you don't want the syntax checker to warn you about issues in linked files. Use the quiet keyword to automatically silence those issues:

// @codekit-prepend quiet "jQuery.js";

The keyword can appear anywhere on the special comment line and applies to all files on that line. This is equally valid:

// @codekit-prepend "jQuery.js", "otherFile.js" quiet;
Details

CodeKit creates a chain of JS files based on your prepend/append statements and then simply combines the content of each file in that chain, in order. The whole chain is then processed as one giant piece of JavaScript, whether you're syntax-checking, transpiling, or minifying.

Future-Proof

CodeKit will always support these special comments. You can rely on them. That said, it's a good idea to use ES6 Modules when you can, since that's a universal standard.

Why Can't I Just Import a File Anywhere?

CodeKit allows you to add one JS file to the beginning or end of another, but does not allow you to import the contents of one file into the middle of another at a specific point. Doing so would be very unpredictable because JavaScript hoists variables to the top of the current scope. It would also create opportunities for variable shadowing and bugs that are insanely difficult to find.


Made in San Diego, CA

Follow the Developer on Twitter

Email Support

Report a Bug

Privacy Policy