Miss any of our Open RFC calls?Watch the recordings here! »

eslint-config-semistandard-react

4.2.0 • Public • Published

ESLint Config Semistandard React

An advanced configuration for writing clean ES7+ React (with semicolons).

Changelog

See CHANGELOG.md.

Install

The plugin and parser required for this config must be installed manually as peer dependencies.

This is required for the config to work globally (see Configuring Plugins).

NPM:

npm install -D eslint babel-eslint eslint-config-semistandard-react eslint-plugin-semistandard-react

Yarn:

yarn add -D eslint babel-eslint eslint-config-semistandard-react eslint-plugin-semistandard-react

Globally:

npm install --global ... or yarn global add ...

Configure

Create an .eslintrc in your project's root folder (local installation) or your computer's $HOME directory (global installation) and paste the following snippet:

{
  "extends": ["semistandard-react"]
}

You may also override any rules by creating a rules object after the extends array. For example, if you want to enforce trailing commas (aka comma dangle), simply add the following rule:

{
  "extends": ["semistandard-react"],
  "rules": {
    "comma-dangle": ["error", "always-multiline"]
  }
}

Rules

This is a unified ESLint shared configuration combining all of the rules from:

Parser

babel-eslint is necessary to use experimental JavaScript features like:

The Babel parser also allows you to use Flow type annotations without throwing a parsing error.

Flow

I haven't included Flow as a peer dependency, since typed JavaScript is a personal preference.

To lint your Flow type annotations, simply install eslint-plugin-flowtype, and change your .eslintrc like so:

{
  "extends": ["semistandard-react", "plugin:flowtype/recommended"]
}

Editor Plugins

I primary use ESLint to fix errors in-editor before compiling/running. Webstorm has built-in support for ESLint and allows you to fix an entire file with one click.

Here are links to the ESLint plugins for the other popular text editors:

Webpack

To lint your code during a Webpack compilation, use eslint-loader and add this to your Webpack configuration:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        enforce: 'pre',
        loader: 'eslint-loader',
        exclude: /node_modules/,
        options: {
          parser: 'babel-eslint',
          baseConfig: {
            extends: ['semistandard-react']
          }
        }
      }
    ]
  }
};

Acknowledgements

Install

npm i eslint-config-semistandard-react

DownloadsWeekly Downloads

532

Version

4.2.0

License

MIT

Last publish

Collaborators

  • avatar