eslint-config-tango

• Installation
• Which One to Use?
  • eslint-config
  • eslint-config/react
  • Peer Dependencies
• How To Enable
• Questions?

This package provides Tango's .eslintrc.js as an extensible shared config.

This doc is written for people who are not familiar with installing private npm packages or configuring ESLint. If you are familiar with the process, jump to "Which One to Use" section to pick a config suitable for your situation.

Installation

This package is a private scoped package under the tangoca org. Unlike public libraries such as Lodash or React where you can simply do npm i lodash, you need some preparation if this is the first time you do this.

1. Sign up free for an npm user.
2. Send your username to Ryan so he can give you permissions to access private packages on the Tango org, including this one.
3. To verify whether you have access, you can go to this address: https://www.npmjs.com/~[your.user.name](replace [your.user.name] with your actual username). You should see this repo on your list.
4. Log into npm locally on your machine. To do this, enter npm login in a terminal and follow the prompt.

After you're done with the preparation above, navigate to your repo and type

npm i -D @tangoca/eslint-config@latest

(In case you don't know, npm i -D is short for npm install --save-dev. Since ESLint is not used during runtime, we save it as devDependencies.)

Which One to Use?

Once you install this configuration, there are three configuration available:

| Config Name | Suitable Projects | | --------------------- | ----------------------------------------------------------- | | eslint-config | React projects without Jest and Cypress testing | | eslint-config/base | non-React projects | | eslint-config/react | full-fledged React projects with Jest and Cypress tests |

eslint-config

Our default export, eslint-config, contains all of our ESLint rules, including ECMAScript 6+ and React. It requires:

• eslint
• eslint-plugin-import
• eslint-plugin-react
• eslint-plugin-jsx-a11y.

You can install all of them in 1 command:

npm i -D eslint eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y

If you don't need React, you should use eslint-config/base instead.

If you're working on a full-fledged React project such as SmithMan and LenderSpotlight, it should come with tests written in Jest and Cypress. In that case, you should use eslint-config/react (see below).

eslint-config/react

The React specific configuration adds additional support for the standard testing libraries (Jest and Cypress) used at Tango. If you choose to use this configuration, on top of the default ones you'll need to also install:

• eslint-plugin-jest
• eslint-plugin-cypress
• eslint-plugin-chai-friendly

You can install those 3 additional plugins in 1 command:

npm i -D eslint-plugin-jest eslint-plugin-cypress eslint-plugin-chai-friendly

Or, if you haven't installed the dependencies for the default one yet, you can install everything together in 1 line:

npm i -D eslint eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-jest eslint-plugin-cypress eslint-plugin-chai-friendly

Peer Dependencies

Were all those ESLint plugins too confusing? Luckily, if you're using npm 5+, you can use this shortcut to discover the peer dependencies needed to make this package work:

npm info "@tangoca/eslint-config" peerDependencies

How To Enable

Hopefully by now, you have decided which one to use. Let's assume you want to use @tangoca/eslint-config/react, here is how to enable it:

1. Open your ESLint config file. This can be .eslintrc, .eslintrc.js, or .eslintrc.json.
2. Find the key called extends; its value should be an array. Add @tangoca/eslint-config/react as the 1st element. If you don't have it, you can create one. For example, mine looks like this:

// Use a .js file instead of .eslintrc so we can write comments without warnings.
module.exports = {
  parser: 'babel-eslint',
  // On top of our shared configs, I also use Prettier.
  extends: ['@tangoca/eslint-config/react', 'prettier', 'prettier/react'],
  globals: {
    // all global variables are here.
  },
  rules: {
    // Example of a rule I override in SmithMan over @tangoca/eslint-config
    'react/destructuring-assignment': 'warn',

    // Example of a new rule not defined in @tangoca/eslint-config
    'prettier/prettier': 'error'
  },
  plugins: ['prettier']
};

That's it! Now open a JavaScript file and start putting some wrong code it. ESLint should now properly lint for you according to our shared rules.

Questions?

Got a question that Google can't answer? @stratton probably can.