ESLint rules for Meteor & AirBnB style

So I installed the ESLint with AirBnB style according to https://guide.meteor.com/code-style.html

However, in Atom I get linter errors such as ‘Meteor not defined’ in files where Meteor is not defined, and “unexpected dangling ‘_’ in ‘_id’” from Mongo ids, etc. I guess the AirBnB styleguide is not fully compatible with Meteor and that you need to tweak your rules in your .eslintrc.json file. Do anyone have a complete set of rules?

My guess is you are going to want to customize your ESLint rules for your project anyway…here is what we use.

/**
 * Clozer's Javascript linting configuration
 *
 * Documentation on rules can be found at:
 * http://eslint.org/docs/rules/ <- Optionally append the rule name
 */
{
  'parser': 'babel-eslint',
  'parserOptions': {
    'allowImportExportEverywhere': true
  },
  'plugins': [
    'import',
    'prettier'
  ],
  'extends': [
    'airbnb',
    'prettier'
  ],
  'env': {
    'browser': true,
    'node': true
  },
  'rules': {

    // Require constructors to use initial caps
    // http://eslint.org/docs/rules/new-cap
    'new-cap': [2, {'capIsNewExceptions': ['Match', 'Match.ObjectIncluding']}],

    // Disallow reassignment of function parameters, but allow modifying the properties of parameters
    // http://eslint.org/docs/rules/no-param-reassign
    'no-param-reassign': [2, {'props': false}],

    // Put a blank space before line comments except at beginning of an object or block
    // http://eslint.org/docs/rules/lines-around-comment
    'lines-around-comment': [2, { 'beforeLineComment': true, 'allowObjectStart': true, 'allowBlockStart': true }],

    // Allow dangling underscores
    // http://eslint.org/docs/rules/no-underscore-dangle
    'no-underscore-dangle': [0],

    // Allow boolean casts
    // http://eslint.org/docs/rules/no-extra-boolean-cast
    'no-extra-boolean-cast': [0],

    // Allow returning assignmenets
    // http://eslint.org/docs/rules/no-return-assign
    'no-return-assign': [0],

    //
    // React rules
    //

    // Allow files with .js extension to include jsx
    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md
    'react/jsx-filename-extension': [1, { 'extensions': ['.js', '.jsx'] }],

    // Don't enforce a defaultProps definition for every prop that is not a required prop
    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-default-props.md
    'react/require-default-props': [0],

    //
    // Import rules
    //

    // Disallow namespace imports
    // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-namespace.md
    'import/no-namespace': [2],

    // Enforce a convention in module import order
    // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md
    'import/order': [2, {
      'groups': [['builtin', 'external'], ['internal', 'parent', 'sibling', 'index']],
      // 'newlines-between': 'always',
    }],

    // Require a newline after the last import/require in a group
    // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/newline-after-import.md
    'import/newline-after-import': [2],

    // Require modules with a single export to use a default export
    // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/prefer-default-export.md
    'import/prefer-default-export': [2],

    // Relax AirBNB import rules
    'import/extensions': [0],
    'import/no-absolute-path': [0],
    'import/no-extraneous-dependencies': [0],
    'import/no-named-as-default' : [0],
    'import/no-unresolved': [0],

    'prettier/prettier': ['error', {'bracketSpacing': false, 'printWidth': 120, 'singleQuote': true, 'tabWidth': 2}]
  }
}
3 Likes

Thanks! It baffles me that Meteor recommends AirBnB style that conflicts with the Meteor practice in a few places. Meteor community should have a ruleset to avoid.

Sounds like a good project for you to start. :grinning:

It never fail - as soon as I take on some new technology - I am involved! :wink:

2 Likes

This might really help people getting started with meteor keeping in mind we will all never agree on a standard so we’d need to keep it sorta generic.

Semis and hanging commas come to mind as does space before first function paren etc etc etc

1 Like

So how about collecting issues with the Style guide. Here is an example of something that annoys me, the linter, and apparently also other people:

import { Meteor } from 'meteor/meteor';

Gives the following warnings:


'meteor' should be listed in the project's dependencies. Run 'npm i -S meteor' to add it (import/no-extraneous-dependencies)
Missing file extension for "meteor/meteor" (import/extensions)
1 Like

That error should be solved by eslint-import-resolver-meteor with:

settings: {
    import/resolver: meteor
}

in your .eslintrc

My config is:

Summary
module.exports = {
    env: {
        browser: true,
        es6: true,
        node: true,
    },
    extends: [
        'semistandard',
        'plugin:meteor/recommended',
        'plugin:import/errors',
        'plugin:import/warnings',
        'plugin:unicorn/recommended',
        'prettier',
    ],
    parser: 'babel-eslint',
    parserOptions: {
        ecmaVersion: 2016,
        sourceType: 'module',
        impliedStrict: true,
        allowImportExportEverywhere: true,
    },
    plugins: ['meteor', 'import', 'unicorn', 'prettier'],
    settings: {
        'import/resolver': 'meteor',
    },
    globals: {
        Package: false,
        Npm: false,
        $: false,
    },
    rules: {
      // Lots of non-meteor specific stuff
    }
}
1 Like

Wow, that worked beautifully. Why don’t we have that dependency added to the documentation?

And I wish for a barebone .eslintrc also in the documentation.

1 Like

Well, you can open a pull request on the documentation to add/fix this.

1 Like

Maybe you’re looking at different places, but the guide really does mention all this stuff.

This mentions, among other things, the import plugin and eslint-config-meteor, which extends the airbnb config with meteor specific rules (e.g. the underscore exceptions for _id like mentioned in the opening post).

Btw, I’ve created a better version of the importer:

This has the following benefits:

  • Resolves local packages
  • Resolves files in local packages, so it also can resolve the actual imported objects
  • Caches some information for better performance
  • Some bug fixes

For now I’ve created it as a pull request, but I don’t think the original one is still maintained. So if I don’t get a reply I’ll release it myself on npm.

3 Likes

I’m new to linting. I’m seeing an issue with the following pattern, curious if the above recommend Meteor settings (which I don’t use yet) account for handling it.

If you import an npm package like this in a template JS file:

import owlCarousel from 'owl.carousel';

Then use it with its initializer per its docs like this:

$someElement.owlCarousel(options);

I get error 'owlCarousel' is defined but never used under the no-unused-vars rule, which doesn’t seem to have any options to handle this. With Meteor you have to import it this way or it won’t work. Do just need to ignore lines like these?

does this work?

import 'owl.carousel';
``