Meta tags:

Headings (most frequently used words):

babel, do, plugins, what, enabling, configuring, how, use, async, await, custom, presets, individual, why, this, automatic, configuration, basic, options, config, files, react, and, flow, the, usebuiltins, option,

Text of the page (most frequently used words):
babel (34), the (32), you (20), #plugins (13), codekit (13), your (12), and (12), that (10), browsers (8), can (7), with (7), project (7), will (7), files (7), support (6), set (6), use (6), option (6), polyfills (6), javascript (6), select (5), enable (5), file (5), custom (5), for (5), from (5), configure (4), are (4), options (4), babelrc (4), settings (4), configuration (4), only (4), choose (4), syntax (4), automatically (3), target (3), check (3), box (3), category (3), must (3), install (3), these (3), npm (3), they (3), don (3), see (3), about (3), them (3), add (3), usage (3), usebuiltins (3), steps (3), work (3), features (3), react (3), also (3), frameworks (3), now (3), follow (2), note (2), their (2), individual (2), needed (2), using (2), should (2), verify (2), each (2), one (2), third (2), party (2), transpile (2), how (2), async (2), await (2), has (2), not (2), required (2), make (2), regenerator (2), runtime (2), core (2), entry (2), import (2), those (2), code (2), needs (2), won (2), include (2), like (2), called (2), flow (2), appropriate (2), pop (2), button (2), default (2), what (2), transpiler (2), enabling (2), open (2), eslint (2), first (2), because (2), more (2), zurb (2), foundation (2), es2022 (2), languages (2), minifier (2), tools (2), postcss (2), topics (2), privacy, policy, report, bug, email, developer, twitter, made, san, diego, auto, any, passed, enables, addition, grouped, plugin, leave, unchecked, disable, official, finally, since, ship, directory, under, root, folder, compatible, version, may, want, require, window, node_modules, there, hundreds, names, field, presets, offers, two, packages, say, yes, three, when, installed, does, prompted, need, anything, find, replace, imports, exact, yourself, false, sometimes, helper, functions, newer, older, controls, adds, uses, just, tell, special, named, ignores, change, merged, config, before, after, comments, wrap, generated, produces, details, remaining, shown, above, documentation, basic, manually, changing, then, specific, list, itself, specify, automatic, configuring, checker, understands, es2015, all, once, look, inspector, pane, cutting, edge, much, nicer, powerful, secondly, many, rely, without, watch, screencast, why, this, have, wait, write, transform, into, today, understand, latest, release, yet, lot, faq, upgrading, read, mode, coda, sublime, text, atom, nova, editor, scripting, team, workflows, adding, environment, variables, hooks, advanced, checkers, jeet, nib, susy, bitters, bourbon, bootstrap, tailwind, gif, svg, jpeg, png, webp, image, optimizers, json, markdown, kit, slim, haml, pug, typescript, coffeescript, stylus, less, sass, bless, lightningcss, html, cache, buster, rollup, bundler, terser, other, purgecss, autoprefixer, license, recovery, troubleshooting, git, stuff, know, build, defaults, new, projects, second, output, paths, action, language, browser, sync, live, reload, getting, started, close, view, buy, menu, updates, help, videos,

Text of the page (random words):
codekit babel features videos help about updates menu buy now babel view topics close topics 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 what s babel the latest release of javascript called es2022 has a lot of features that browsers don t support yet you don t have to wait you can write es2022 now and babel will transform it into syntax that today s browsers understand why do this 3 54 watch the screencast first because cutting edge javascript is much nicer to use and more powerful secondly because many frameworks like zurb foundation and react now rely on babel they won t work without it enabling babel select a javascript file and look at the inspector pane choose babel from the transpile with pop up button you can also enable babel for all js files at once open project settings and choose the javascript category note if you use babel the only syntax checker you should choose is eslint it s the only one that understands es2015 syntax configuring babel open project settings and choose the babel category automatic configuration by default babel will automatically configure itself to support the browsers you specify in target browsers if needed you can manually configure babel by changing the babel configuration option and then enabling specific babel plugins from the list basic options the before after comments will wrap babel generated code so you can see what the transpiler produces for details about the remaining options shown above see the babel documentation babel config files you can also configure babel using special files named babelrc by default codekit ignores these files to change that check the enable support for babelrc files box settings from your configuration file will be merged with those from codekit s ui you can also tell codekit to use only your babelrc files to do that select the appropriate option in the babel configuration pop up button react and flow if your project uses react or flow just check the appropriate box to enable support for each the usebuiltins option sometimes babel needs to include helper functions to make newer javascript features like async await work in older browsers these are called polyfills the usebuiltins option controls how babel adds polyfills false babel won t add polyfills you must include them yourself entry you must import core js and regenerator runtime in your js file babel will find and replace those imports with the exact polyfills your code needs usage babel will automatically add polyfills as required you need not import anything in your js files when you select entry or usage codekit will verify that your project has core js and regenerator runtime installed if it does not you ll be prompted to install them that s required to make the polyfills work how do i use async await you follow three steps in project settings babel set the usebuiltins option to usage if codekit offers to install two npm packages say yes select your js file in codekit and set the transpile with option to babel custom babel presets plugins there are hundreds of third party babel plugins to use them with codekit add their names to the custom plugins field you must install these plugins using npm since they don t ship with codekit they should be in a node_modules directory under your project s root folder verify that each one is compatible with the version of babel in codekit see the about window you may want to use a babelrc file if your third party plugins require custom options individual plugins finally you can enable individual babel plugins if needed the plugins are grouped by their official category check the box to enable a plugin or leave it unchecked to disable it note if babel is set to auto configure any plugins that you select are passed in addition to the plugins that babel automatically enables to support your target browsers made in san diego ca follow the developer on twitter email support report a bug privacy policy