eslint-config-mission-made

Coding standards for MissionMade

This package contains the following ESLint coding standards:

• mission-made - a generic Javascript coding standard
• mission-made/lib/react - a standard for React.js projects. Extends mission-made.
• mission-made/lib/vue - a standard for Vue.js 2 projects. Extends mission-made.
• mission-made/lib/vue3 - a standard for Vue.js 3 projects. Extends mission-made.
• mission-made/lib/typescript - additional standard for if a project uses Typescript. Should be added to any Typescript project alongside whicherver of the other standards is appropriate.
• mission-made/lib/typescript-strict - a stricter version of mission-made/lib/typescript intended for projects with a lot of Typescript, that are maintained by experienced Typescript developers.
• mission-made/lib/with-jquery - a standard for projects that need to use jQuery. Extends mission-made to allow jQuery (excepting deprecated methods). Primarily intended for Wordpress where jQuery is still used, but could also be handy for legacy projects.

Installation

To install this package, run the following command:

npm install --save-dev eslint eslint-config-mission-made --legacy-peer-deps

Please note that because not every standard in this package needs every dependency, they are listed as optional dependencies and won't be installed by default, so ESLint may throw an error saying a particular standard cannot be found. This can be resolved by installing that package via NPM in the usual way.

Sample configurations

ESLint supports multiple configuration file formats, and in these examples we're using the YAML format. If you want to use a different format you'll need to amend these examples accordingly.

Here's an example of using it on a React project with Typescript:

extends:
  - 'mission-made/lib/react'
  - 'mission-made/lib/typescript'

Or a Vue project:

extends:
  - 'mission-made/lib/vue'

Or a Vue 3 project with the strict typescript standard:

  - 'mission-made/lib/vue3'
  - 'mission-made/lib/typescript-strict'

Or a plain Javascript project:

extends:
  - 'mission-made'

If you wish to include additional plugins or override settings in your project, you can do so in your ESLint config.

Running

You can run ESLint as follows:

npx eslint src/js/**/*.js

Or you can run the fixer as follows:

npx eslint --fix src/js/**/*.js

In most cases it will be more convenient to set it up in the scripts section of your package.json, as in this example:

    "scripts": {
        "lint": "eslint src/js/**/*.js",
        "lint-fix": "eslint --fix src/js/**/.*js"
    },

Then you can run the linter and fixer with npm run lint and npm run lint-fix instead, without having to remember the file path. It will also work with Typescript - just remember to update the file extension as well as the path.

Rules included

Base config

• Indent of 2 spaces
• Double quotes
• Unix line breaks
• Require semicolons
• Flag excessive complexity
• No unused variables
• No useless concatenation
• No console
• Warn about problematic block-scoped variables
• Require strict comparison operators
• Require switch-case statements have a default clause, and that this must be last
• No eval
• No implied eval
• Disallows extending native objects or functions
• No multi spaces
• No commented out code
• Warn over use of loops (these can often be replaced with map(), filter(), each() or reduce())
• jQuery is disallowed

React config

• React recommended rules
• React hooks recommended rules
• JSX a11y strict rules

Vue config

• Vue recommended rules
• Vue a11y rules

Typescript config

• ESLint Typescript recommended rules

Typescript strict config

• ESLint Typescript recommended rules
• Require type information
• ESLint Typescript strict rules

Wordpress config

• jQuery is allowed
• No use of deprecated jQuery methods

Disabling rules

Some rules, such as the no-loops and no-jquery rules, are somewhat opinionated, and in certain circumstances you may wish to disable them. You can disable a given rule within a block of code as follows:

/* eslint-disable no-jquery */
$('a').css('color', 'red');
/* eslint-enable no-jquery */

Or you can disable it with a single line:

// eslint-disable no-jquery
$('a').css('color', 'red');

Or you can disable it in the config file:

rules:
  no-jquery: off