Eslint ember/no-jquery

Questions General
1

Hello Community,

I’m developing an octane app in which I use jquery.

I assumed removing: ‘ember/no-jquery’: ‘error’ from .eslintrc.js would stop eslint reporting the following as lint:

13:17  error  Do not use jQuery  ember/no-jquery
14:19  error  Do not use jQuery  ember/no-jquery
15:19  error  Do not use jQuery  ember/no-jquery
17:9   error  Do not use jQuery  ember/no-jquery
19:9   error  Do not use jQuery  ember/no- jquery

Im not sure if its relevant but here is my .eslintrc.js:

 'use strict';

  module.exports = {
    root: true,
    parser: 'babel-eslint',
    parserOptions: {
      ecmaVersion: 2018,
      sourceType: 'module',
      ecmaFeatures: {
        legacyDecorators: true
      }
    },
    plugins: [
      'ember'
    ],
    extends: [
      'eslint:recommended',
      'plugin:ember/recommended'
    ],
    env: {
      browser: true
    },
    rules: {
      //'ember/no-jquery': 'error'
    },
    overrides: [
      // node files
      {
        files: [
          '.eslintrc.js',
          '.template-lintrc.js',
          'ember-cli-build.js',
          'testem.js',
          'blueprints/*/index.js',
          'config/**/*.js',
          'lib/*/index.js',
          'server/**/*.js'
        ],
        parserOptions: {
          sourceType: 'script'
        },
        env: {
          browser: false,
          node: true
        },
        plugins: ['node'],
        rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
          // add your custom rules and overrides for node files here

          // this can be removed once the following is fixed
          // https://github.com/mysticatea/eslint-plugin-node/issues/77
          'node/no-unpublished-require': 'off'
        })
      }
    ]
  };
2

Hi, @zinhart. Thanks for using Octane to develop your app and asking for help.

If you need to use jQuery (I recommend avoiding it if possible), you can turn off the lint by providing the value of 'off' instead of 'error'.

// .eslintrc.js
module.exports = {
  rules: {
    'ember/no-jquery': 'off'
  }
};

When I’m not sure what value to specify, I try an empty string like this:

// .eslintrc.js
module.exports = {
  rules: {
    'ember/no-jquery': ''
  }
};

Running yarn lint:js (or npm run lint:js) will result in an error message:

Error: .eslintrc.js:
	Configuration for rule "ember/no-jquery" is invalid:
	Severity should be one of the following: 0 = off, 1 = warn, 2 = error (you passed '""').

From this message, I realized that I needed to provide either 0 (which isn’t descriptive) or 'off' (my preference).

3

When I’m not sure what value to specify, I try an empty string like this:

The simplest advice is always the best. I tried this in my app and can confirm it works. Thank you.

Another question if you don’t mind, Why do you recommend not using jquery? I understand their was an RFC to make ember run without any additional libraries → native javascript. This suggests thats it’s not using jquery can make your app 30kb lighter.

4

I think, for me, I avoid jQuery because I haven’t found a use for it (for apps that I work on). I try to be mindful of code dependency and maintenance cost that I would create by installing a package. I want the code that I write today to be able to stand on their own for a long time. :slight_smile:

As for bundle size, what I’d do in your shoes is to compare the production build size before and after installing @ember/jquery. If the difference is acceptable to you and your team (again, in the context of your app), I think it may be okay to use the package.