fullstackacademy/eslint-config-fullstack

A complete ESLint config file to help students avoid errors and learn best practices

eslint-config-fullstack

An ESLint Shareable Config for Fullstack Education Group Students

Installation

Global

Global installation is recommended for Fullstack Education Group students. To install or upgrade the config along with its peer dependencies:

npm install -g eslint eslint-config-fullstack eslint-plugin-react babel-eslint

In your global ~/.eslintrc.json file:

{
    "extends": "fullstack"
}

Note that the eslint-config- portion of the module name is assumed by ESLint.

Local

A specific project can extend this definition by including eslint eslint-config-fullstack eslint-plugin-react babel-eslint as saved dev-dependencies, and defining a local .eslintrc.json. Project-level eslintrc files are recommended to be set as root, which prevents users' global configs from producing inconsistent results:

{
    "extends": "fullstack",
    "root": true
}

Note on Parsing

This config now uses babel-eslint as the parser by default. This enables linting some relatively modern code which ESLint's default parser does not handle, and was necessary for this project to lint itself. You still need to install babel-eslint manually as it is a peer dependency of this config.

Extending

Any rules added to your global or local .eslintrc.json files will override the rules defined by this package. For example:

{
    "extends": "fullstack",
    "rules": {
        "semi": [1, "always"]
    }
}

This turns on enforcing the use of semicolons, a rule which is silenced by default in the current version of the eslint-config-fullstack package.

Background

The ESLint linting system is a popular one for its support of ES6 syntax, pluggable rules, automatic rule names in warning messages, and shareable / extendable config files.

This npm package provides a thorough starting config file. It was developed at Fullstack Academy of Code / Grace Hopper Academy to use in an educational setting, helping students to avoid definite errors but also pick up best practices.

Because it defaults to supporting multiple environments (e.g. Node, browsers, Jasmine, Mocha, etc.) it is probably not suitable for general production, where one might want a finer-grained and more restrictive config. However it is easy to override and extend this base config with custom rules, as explained above and in the ESLint docs.

License

MIT

eslint-config-fullstack's Issues

Allow shadowing of same values ignored by no-unused-vars

Sometimes when you are forced to initialize a variable (e.g. object destructuring to get the "rest" of the props) you want to ignore that variable. Using _ as the variable name is a convention taken from other languages (where it is sometimes more than just a convention). However, _ variables can trigger the no-shadow rule if you have nested uses.

We should upgrade our no-shadow to use the allow prop as explained at https://eslint.org/docs/rules/no-shadow#allow. We should allow any variables that are ignored under no-unused-vars.

Trivial: swap build badges

Since this was removed from Codeship, should switch out with a Travis badge.

Disable camelcase rule?

eslint-config-fullstack/rules/base.js

Line 169 in 7fc14b3

camelcase: 1, // enforce camelcase naming convention

This rule enforces that variables use camelCase. This can be a problem with Sequelize entities that use snake_case. We don't always run into this because often Sequelize defaults to using camelCase unless instructed otherwise, but when it is an issue it becomes pretty annoying.

OTOH it is good to teach the students idiomatic naming conventions.

babel-eslint v8.2.6 required

eslint-config-fullstack requires babel-eslint v8.2.6 but does not support a newer version.

It pops an error "UNMET PEER DEPENDENCY". In need of update or modified to accept later versions of babel-eslint.

Remove `id-length`?

@Rinaldo stated:

id-length is annoying if you want to use variable names like a and b in the callback to a sort function

I used to be more strongly against single-letter variable names for most use cases, but once in a blue moon they are fine, and I think making the linter complain about them is maybe heavy-handed. I'll look into possibly relaxing this rule.

Disable react/prefer-stateless-function

eslint-config-fullstack/rules/react.js

Line 60 in 87e0eab

'react/prefer-stateless-function': 1, // Enforce stateless React Components to be written as a pure function

More annoying than helpful.

Newest eslint breaks this plugin

Expected Behavior

Running npm install -g eslint eslint-config-fullstack eslint-plugin-react babel-eslint and creating the file ~/.eslintrc.json with the following contents:

{
  "extends": "fullstack",
  "parser": "babel-eslint",
  "rules": {
    "semi": [1, "always"]
  }
}

Will make eslint work, as per the instructions in the workshop.

Actual Behavior

Running eslint generates the following error message:

Oops! Something went wrong! :(

ESLint: 6.0.1.

ESLint couldn't find the config "fullstack" to extend from. Please check that the name of the config is correct.

The config "fullstack" was referenced from the config file in "/Users/joshua/.eslintrc.json".

If you still have problems, please stop by https://gitter.im/eslint/eslint to chat with the team.

Temporary Workaround

Downgrading eslint to version 5.0.1 works. I modified the instructions to:

npm install -g [email protected] eslint-config-fullstack eslint-plugin-react babel-eslint

And everything worked perfectly.

Disable camel case rule

People naturally learn that camelCase is idiomatic JS. But sometimes it's convenient to be able to use underscore_case, e.g. for Sequelize properties. It's annoying for the linter to yell about this.

Remove `no-nested-ternary`

@Rinaldo stated:

I’ve taken to using ternaries instead of if-else chains in some situations, so I disable no-nested-ternary

I agree somewhat. I think nested ternaries can be abused, but I no longer feel strongly that it is worth linting against.

Add documentation on changing parser to `babel-parser`

I don't think this should be a required peer dep. Rather, we should include setup instructions for anyone who needs experimental features not supported by ESLint's default parser.

Add a11y plugin

Fullstack would like to add a11y techniques as part of the curriculum. Adding eslint-plugin-jsx-a11y to this repo as a peer dep, with associated ruleset customized for our purposes, would be a passive win along those lines.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Add react / JSX support

https://www.npmjs.com/package/eslint-plugin-react
@KAIZERROLL you may want to look into this, else I'll get on it sometime

Disable setState warnings for didX hooks

'react/no-did-mount-set-state': 1, // Prevent usage of setState in componentDidMount
'react/no-did-update-set-state': 1, // Prevent usage of setState in componentDidUpdate

More annoying than helpful, especially with async funcs throwing false positives.

See jsx-eslint/eslint-plugin-react#596

Enhance React / JSX support

Current ruleset for the react plugin is just copying the recommendations but lowering from severity 2 to severity 1.

Might want to check out the AirBnB guide for inspiration on more interesting rule choices: https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb/rules/react.js.