How to set up Babel transpilation on save in Atom with language-babel?

Enable the 'Transpile On Save' setting in package preferences or add {"transpileOnSave": true} to a .languagebabel file. Ensure your project has .babelrc and necessary node_modules, and set NODE_ENV if needed for environment-specific Babel configs.

Does language-babel highlight GraphQL inside JavaScript files?

Yes, it highlights GraphQL code in template strings tagged with graphql, gql, or /* GraphQL */ comments. For standalone .graphql files, you need the separate language-graphql package as noted in the README.

language-babel vs atom-language-javascript for React development?

language-babel is better for React due to JSX-specific features like auto-completion, indentation, and Babel integration. atom-language-javascript offers basic highlighting but lacks these advanced tools and transpilation support.

How to configure .languagebabel for different project settings?

Create a JSON file named .languagebabel in your project directory with properties like "babelSourcePath". Settings are merged from the file's location up to the project root, with closer files overriding global preferences for granular control.

Why isn't JSX auto-indenting working in my language-babel setup?

Check that 'Auto Indent JSX' is enabled in settings. It reads .eslintrc for react/jsx-indent rules; ensure your ESLint config is correct or disable the feature if conflicts arise, as it only processes preceding lines to avoid incomplete JSX issues.

Can I use Emmet with styled-components in language-babel?

Partially: enable 'Styled-Components Auto-Complete Method' for Emmet snippet expansion, but advanced features like vendor prefixes are unsupported. The README notes this limitation due to excluding a full Emmet distribution.

How to exclude files from transpilation in language-babel?

Use the 'Babel Source Path' setting to limit transpilation to specific directories, or set 'Disable When No Babelrc File In Path' to true. Files outside these paths won't trigger transpilation, reducing unnecessary processing.

Open-Awesome

package

MITCoffeeScript

An Atom package providing ES2017+, Flow, React JSX, and GraphQL grammar highlighting and Babel transpilation.

Visit Website GitHub

471 stars87 forks0 contributors

What is package?

language-babel is an Atom package that provides comprehensive syntax highlighting and grammar support for modern JavaScript variants, including ES2017+, Flow, React JSX, and GraphQL. It integrates Babel transpilation directly within the editor, enabling on-the-fly code transformation and previews. The package aims to unify grammar and transpilation features to streamline modern JavaScript development workflows in Atom.

Target Audience

Developers using the Atom editor who work with modern JavaScript, React, JSX, Flow, or GraphQL and need integrated syntax highlighting and Babel transpilation. It is particularly useful for those who want to avoid installing multiple separate packages for grammar and build tasks.

Value Proposition

Developers choose language-babel because it combines a feature-rich grammar with built-in Babel transpilation, reducing the need for external build tools within the editor. Its unique selling point is the deep integration of Babel (versions 5–7) for on-save transpilation, directory-wide builds, and live code previews via the source-preview package.

Overview

ES2017, flow, React JSX and GraphQL grammar and transpilation for ATOM

Use Cases

Best For

Syntax highlighting for modern JavaScript (ES2016+, ESNext) and JSX in the Atom editor.
Integrated Babel transpilation for on-the-fly code transformation and previews without leaving the editor.
Developing React applications with enhanced JSX support, including auto-completion, tag closure, and automatic indentation.
Working with GraphQL queries inside JavaScript template strings, using tags like `graphql` or `/* GraphQL */`.
Using styled-components with CSS highlighting and optional Emmet snippet completion inside tagged template strings.
Extending template literal highlighting with third-party grammars for languages like SQL or HTML via regex-based prefix matching.

Not Ideal For

Developers using IDEs or editors other than Atom, such as VS Code or Sublime Text.
Projects with mature build pipelines (e.g., Webpack, Gulp) that handle transpilation externally.
Teams requiring server-side rendering or advanced JavaScript features beyond Babel v5-v7 support.
Users who prefer minimal, lightweight syntax highlighting without integrated transpilation overhead.

Pros & Cons

Pros

Comprehensive JavaScript Grammar

Supports ES2016+, ESNext, JSX, Flow, and GraphQL in template strings, providing unified highlighting for modern variants as detailed in the README's grammar description.

Integrated Babel Transpilation

Offers on-save transpilation, directory-wide builds, and code previews with Babel v5-v7, directly embedding build processes into Atom's workflow without external tools.

Enhanced JSX Tooling

Provides auto-completion for tags and attributes, automatic indentation based on ESLint rules, and context-aware commenting for JSX elements, streamlining React development.

Flexible Project Configuration

Allows granular control via .languagebabel files that override global settings, enabling project-specific transpilation paths and rules for multi-project setups.

Cons

Atom Editor Lock-in

Exclusively designed for Atom, making it useless for developers using other editors and limiting cross-platform tooling consistency.

Complex Babel Setup

Requires proper configuration of .babelrc, node_modules, and environment variables, which can be cumbersome for beginners or in projects with nested dependencies.

Limited Emmet Support

For styled-components, Emmet completion is restricted to basic snippets without advanced features like vendor prefixes, as the README admits it excludes a full Emmet distribution.

Package Conflict Risks

May conflict with other Atom packages like source-preview-babel, requiring manual disabling to avoid duplicate transpilation efforts, adding setup friction.

Frequently Asked Questions

Related Projects

Sublime Text and TextMate

JavaScript.tmLanguage provides an improved JavaScript language definition for TextMate and SublimeText editors. It builds upon existing language files by offering more fine-grained syntax matching and comprehensive support for modern ECMAScript features, making it essential for developers working with contemporary JavaScript code. ## Key Features - **ES6+ Syntax Support** — Includes modules, arrow functions, classes, generators, and succinct methods - **Fine-Grained Matching** — More precise syntax highlighting compared to standard definitions - **Easy Installation** — Available via Package Control for SublimeText - **YAML-Based Source** — Uses YAML files for easier editing and maintenance - **Color Scheme Integration** — Comes with dedicated color schemes for optimal visual presentation ## Philosophy The project aims to enhance the coding experience by providing accurate and up-to-date syntax highlighting that keeps pace with JavaScript's evolving language specifications.

Stars33

Forks13

Last commit8 years ago

WebStorm

and PhpStorm, compilation to ES5 with file watchers or task runners