How to Use ESLint in Titanium App Projects

Linting tools allow developers to discover problems with their JavaScript code – either while coding and before running the app or during the compilation process.

ESLint is one of these tools. It ships with some built-in rules, but is completely configurable allowing you to create organisation-wide, client-wide or project-wide rules.

Depending on what editor you’re using, there are different ESLint packages and extensions that will give you real-time validation during development, and can help you fix problems as you code.

You can also run ESLint from the CLI and build it into the compilation process of Titanium, allowing you to fail an app build, if the code doesn’t follow the conventions of your business, client or project.

To get started, you need to install ESLint from npm:

npm install -g eslint

Next, take a look at the Axway’s shareable config for ESLint created for Titanium Alloy. Let’s install those too:

sudo npm i -g --save-dev eslint-plugin-alloy
sudo npm i -g  –-save-dev eslint eslint-config-axway

Next, in our Titanium project, create a file called .eslintrc.js in the root of the project folder. Copy and paste this into it:

module.exports = {
    "extends": "axway/env-alloy",
    "globals": {
        // declare globals here...
    },
    "rules": {
        // project specific overrides...        
        "eol-last": ["warn", "never"],
        "indent": ["error", 4],
        "array-bracket-spacing": ["warn", "never"],
        "curly": ["warn", "multi-line"],
        "quotes": [2, "double", {
            "avoidEscape": true
        }],
        "no-undef": [0, {
            "ignoreBuiltinGlobals": ["$model"]
        }],
    }
};

and finally create an file in the same location called .eslintignore. and copy and paste this into it:

# .eslintignore
node_modules
Resources
build
modules
dist
i18n
platform
plugins

Once you’ve done this, you can check your project via the terminal:

eslint app

You’ll see a detailed report from the CLI telling you which rules are not passing. You can fix them by passing the – fix parameter.

If you’re using VSCode and the Beautify extension, you can also configure that by dropping a file called .jsbeautifyrc in the root of your project:

{
  "jslint_happy": true,
  "keep_array_indentation" : false,
  "keep_function_indentation": false,
  "preserve_newlines": true,
  "brace_style": "none,preserve-inline"
}

This is my particular one, which does a few things to prevent JSLint complaining about indentations of arrays etc. You can change the rules to suit your way of working.

So, now that we’re up and running, let’s go over a few things. Firstly, the eslintrc.js file:

module.exports = {
    "extends": "axway/env-alloy",
    "globals": {
        // declare globals here...
    },
    "rules": {
        // project specific overrides...        
        "eol-last": ["warn", "never"],
        "indent": ["error", 4],
        "array-bracket-spacing": ["warn", "never"],
        "curly": ["warn", "multi-line"],
        "quotes": [2, "double", {
            "avoidEscape": true
        }],
        "no-undef": [0, {
            "ignoreBuiltinGlobals": ["$model"]
        }],
    }
};

In this file, we set up some basic rules. Firstly, we extend the rules established in the axway/env-alloy config, and then we have some specific rules we want to use. In the example above, I add one to warn about having a last line in the file, I set the indentation and override some rules around curly brackets and spacing. I also added a rule about using double quotes instead of single because I prefer that.

Another thing you can do here is turn off rule checking for things like undefined variables. So, in Alloy, we have variables like $model, and these will create errors / warnings as they’re not defined by us. Adding these to the ignoreBuiltinGlobals allows us to make sure that builds aren’t stopped or we get false positives.

You can read more about ESLint on its official site. Plus, there are plenty of other plugins and extensions around for other code editors you might be using or prefer.

With ESLint running and configured, you can ensure all your developers are working in a consistent way within your Titanium codebase!

Happy coding!

6 COMMENTS

  1. When running “eslint app” following the instructions in the article it throws an error:
    npm WARN eslint-plugin-alloy@1.1.1 requires a peer of eslint@>=4.0.0 but none is installed. You must install peer dependencies yourself.

    You need to install “eslint-plugin-alloy” using “npm install -g eslint-plugin-alloy” which then makes it run ok.

    But, when running on a newly created project created using “appc new” it throws a lot of errors. Meaning that our-of-the-box a titanium app is not compatible with axway definitions.

      • Thanks.

        Any recommendations one plugins for Atom? I’ve installed linter plugin on Atom, and while the command line shows that `alloy.js` has errors in it, the Atom editor doesn’t show anything (in fact, at the bottom of the windows it has some kind of summary and indicates there are no errors or warnings) – maybe I need to install something in addition/instead of linter?

Comments are closed.