ESLint rules for Meteor & AirBnB style


#1

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?


#2

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

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.


#4

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


#5

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


#6

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


#7

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)

#8

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
    }
}

#9

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.


#10

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


#11

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).


#12

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.