ember-cli-coffeescript

Adds precompilation of CoffeeScript files and all the basic generation types to the ember generate command.

CoffeeScript support for ember-cli

Adds precompilation of CoffeeScript files and all the basic generation types to the ember generate command, as well as linting.

  • Generating files in CoffeeScript with ember generate
  • Preprocessing CoffeeScript-files in your app, including tests
  • Linting your CoffeeScript-files.
ember install ember-cli-coffeescript

NB: This addon requires ember-cli version 0.2.0 and up. Some of it might work on earlier versions, but I wouldn't know.

There is one thing to note when using CoffeeScript with ember-cli: the syntax for ES6-modules. In ember-cli-apps written in JavaScript, this is a common pattern:

// app/components/my-component.js 
import Ember from 'ember';
 
export default Ember.Component.extend({
  tagName: 'div'
});

Writing import or export in a CoffeeScript-file causes an error, so we'll need to escape these lines with backticks so they run as JavaScript.

We also need to store the export in a variable to export at the end, we can't export directly as done above. Please note that the name of this variable does not affect the name of the component itself - that is based entirely on the file name and placement.

Here's the above file in CoffeeScript:

# app/components/my-component.coffee 
`import Ember from 'ember'`
 
MyComponent = Ember.Component.extend
  tagName: 'div'
 
`export default MyComponent`

Luckily, all the blueprints included with ember-cli-coffeescript do this for you! Which leads to…

Run ember help generate to get a list of available blueprints. Use them by running ember g <blueprint> <args>. For instance, to generate the above component:

ember g component my-component`

ember-cli-coffeescript comes with pod-support for the same blueprints as ember-cli does. Check out the ember-cli docs for pods for instructions on how to use it.

If you'd like to use ember-cli-coffeescript without the blueprints, you can add the following to your config/environment.js:

ENV.coffeeOptions = {
  blueprints: false
}

This will make it fall back to the next blueprints in line (probably the ones from ember-cli).

This will happen automatically - no work necessary.

If you have a coffeelint.json file in the root of you project we will automatically pick up on it and start running linting on files when using the ember build and ember serve commands. If you do not want linting to run despite having a coffeelint.json file, use the following configuration in your config/environment.js.

ENV.coffeeOptions = {
  lint: false
}

You can set lint to true to enable linting with the default configurations, but you will probably want to add a coffeelint.json file to the root of your project either way, for instance to turn off the error for backticks.

Example coffeelint.json:

{
    "no_backticks": {
        "level": "ignore"
    }
}

You can find all the available options on the website for coffeelint.

If you want to specify a different path for your coffeelint.json file you can specify the path (relative to the project directory or absolute)

ENV.coffeeOptions = {
  lint: {
    configPath: "configurations/coffeelint.json"
  }
}

If you want to change the way we format the output you can specify a custom error output and stats output

ENV.coffeeOptions = {
  lint: {
    formatterfunction(filePathlintResults) {  },
    statsFormatterfunction(stats) { console.log('Files: ', stats.fileCount, "Errors: ", stats.errorCount) }
  }
}

NOTE: The lint results will show up twice when you build and run your app; once for the app files, and then once for the test files. On rebuild, only the changed files are linted.

To avoid linting specific files or folders, you can put a file named .coffeelintignore in the root of your project containing ignore-rules, one per line. This is just like a .gitignore-file, and it will follow the same rules.