eslint-config-yarus ·

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

Installation

1. Install ESLint and Prettier.

    $ npm install eslint prettier --save-dev

2. Install eslint-config-yarus config.

    $ npm install eslint-config-yarus --save-dev

3. Add to .eslintrc.js.

module.exports = {
  extends: ['yarus/rules/index.js'],
};

4. Add to .prettierrc.js.

module.exports = {
  singleQuote: true,
  printWidth: 100,
  trailingComma: 'all',
};

5. Add to .eslintignore and .prettierignore.

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Dependencies
node_modules
package-lock.json
yarn.lock
npm-shrinkwrap.json

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# dotenv environment variables file
.env

6. Add to package.json.

{
  // ...
  "browserslist": [
    // Your target browsers
    "last 2 versions"
  ],
  // ...
  "engines": {
    // Your target node
    "node": ">=8.0.0"
  },
  // ...
  "scripts": {
    // ...
    "lint": "eslint '**/*.{js,jsx,json,gql,graphql}'",
    "format": "prettier --write '**/*.{js,jsx,json,md,mdx,gql,graphql}' && npm run lint -- --fix"
  }
}

Now you can lint project with npm run lint and format with npm run format.

Configuration

Targeting Browsers

For Browsers support config uses the browserslist configuration in package.json.

See browserslist for configuration. Here's some examples:

{
  // ...
  "browserslist": ["last 1 versions", "not ie > 0"]
}

Targeting Node

For Node support config uses the engines configuration in package.json.

{
  // ...
  "engines": {
    // Your target node
    "node": ">=6.0.0"
  }
}

Deprecation

This helps you to refactor your codebase.

Prevents some function usage

This rule allows you to forbid some function usage and to suggest some alternative. Maybe really handy for large teams while refactoring codebase.

Let's consider we have this configuration in .eslintrc.js:

module.exports = {
  // ...
  rules: {
    // ...
    'deprecate/function': ['error', { name: 'legacyFunc', use: 'newFunc from this package' }],
  },
};

The following patterns are considered as errors:

// any function call with name legacyFunc
console.log(legacyFunc());
legacyFunc();

Prevents some member expressions usage

This rule allows you to forbid some member expression usage and suggests some alternative. The good use case for this rule is for example when some library deprecates some of it's api methods and suggest you to use other.

Let's consider we have this configuration in .eslintrc.js:

module.exports = {
  // ...
  rules: {
    // ...
    'deprecate/member-expression': [
      'error',
      { name: 'React.createClass', use: 'native es6 classes' },
    ],
  },
};

The following patterns are considered as errors:

import React from 'react';

// React.createClass is deprecated
var Component = React.createClass({
  mixins: [MixinA],
  render() {
    return <Child />;
  },
});

Prevents some module import

This rule allows you to forbid some module import and to suggest some alternative. You must supply the path to the file from the root. This prevents errors caused by having multiple files with the same name in different directories.

Let's consider we have this configuration in .eslintrc.js:

module.exports = {
  // ...
  rules: {
    // ...
    'deprecate/import': ['error', { name: 'path/to/legacyModule', use: 'newModule' }],
  },
};

The following patterns are considered as errors:

import a from 'path/to/legacyModule';
import a from '../../path/to/legacyModule';
import a from 'legacyModule';
const a = require('path/to/legacyModule');
const a = require('../../path/to/legacyModule');
const a = require('legacyModule');

Filenames

By default Yarus's config requires kebab case filenaming. You can override this rule fore some files by adding rules in .eslintrc.js.

module.exports = {
  // ...
  overrides: [
    // ...
    {
      files: ['src/components/**/*.jsx'],
      rules: {
        // For cebab case
        'filenames/match-regex': ['error', '^[0-9a-zA-Z]+$', true],
      },
    },
  ],
};

Node.js

For lint node.js extend your .eslintrc.js.

module.exports = {
  extends: [
    // ...
    'yarus/rules/node.js',
  ],
};

React

For lint React extend your .eslintrc.js.

module.exports = {
  extends: [
    // ...
    'yarus/rules/react.js',
  ],
};

CSS Modules

This settings help you in tracking down problems when you are using css-modules.

For lint React extend your .eslintrc.js.

module.exports = {
  extends: [
    // ...
    'yarus/rules/css-modules.js',
  ],
};

If you still want to mark a class as used, then use this comment on top of your file.

/* eslint css-modules/no-unused-class: ['error', { markAsUsed: ['container'] }] */

where container is the css class that you want to mark as used. Add all such classes in the array.

If you use the camelCase option of css-loader, you must also enabled it. Add to .eslintrc.js

module.exports = {
  // ...
  rules: {
    // ...
    'css-modules/no-unused-class': ['error', { camelCase: true }],
    'css-modules/no-unused-class': ['error', { camelCase: true }],
  },
};

Flow

For lint flow extend your .eslintrc.js.

module.exports = {
  extends: [
    // ...
    'yarus/rules/flowtype.js',
  ],
};

GraphQL

For checks tagged query strings inside JavaScript, or queries inside .graphql files, against a GraphQL schema, extend your .eslintrc.js.

module.exports = {
  // ...
  extends: [
    // ...
    'yarus/rules/graphql.js',
  ],
  rules: {
    'graphql/template-strings': [
      'error',
      {
        // Import default settings for your GraphQL client. Supported values:
        // 'apollo', 'relay', 'lokka', 'fraql', 'literal'
        env: 'apollo',

        // Import your schema JSON here
        schemaJson: require('./schema.json'),

        // OR provide absolute path to your schema JSON (but not if using `eslint --cache`!)
        // schemaJsonFilepath: path.resolve(__dirname, './schema.json'),

        // OR provide the schema in the Schema Language format
        // schemaString: printSchema(schema),
      },
    ],
  },
};

SQL

For lint SQL extend your .eslintrc.js.

module.exports = {
  extends: [
    // ...
    'yarus/rules/sql.js',
  ],
};

Contributing

The main purpose of this repository is to continue to evolve babel-preset-yarus, making it faster and easier to use. Development happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving babel-preset-yarus.

Code of Conduct

Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

Contributing Guide

Read our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React.

Good First Issues

To help you get your feet wet and get you familiar with our contribution process, we have a list of good first issues that contain bugs which have a relatively limited scope. This is a great place to get started.

License

This project is licensed under the terms of the MIT license.