0.0.3 • Published 5 years ago
eslint-config-ryo v0.0.3
eslint-config-ryo
Personal ESLint Rules for React & Gatsby Projects. Yeah I like semi's at the end of my lines! Fight me! 🤜💥🤛
Based on Kent C. Dodds ESLint config, with differences in import plugins, minor rules.
Usage
Install the conventions by running:
npm install --save-dev eslint eslint-config-ryo
Then add the extends to your .eslintrc
:
{
"extends": "ryo",
"rules": {
// your overrides
}
}
Other configs
This config also exposes a few other configs that I use often and pull in as needed.
You can use them standalone:
{
"extends": "ryo/<config-option-name(i.e. react, jsx-a11y, jest, etc.)>"
}
Or in combination with the base config (recommended)
{
"extends": ["ryo", "ryo/<config-name>"]
}
Note: I'm not certain why, but sometimes you need to have the associated plugins installed to make things work. I recommend adding them as dependencies to your project if you're going to use the config for it.
babel-module
: babel-plugin-module-resolver for the import plugin to work with the module-resolver babel plugin (eslint-plugin-import and eslint-import-resolver-babel-module)babel-react-require
: babel-plugin-react-require for when you're using the react-require babel plugin (should be used with"ryo/react"
as well) (eslint-plugin-react)jest
: jest testing frameworkjsx-a11y
: eslint-plugin-jsx-a11y for rules regarding accessibility with JSX (eslint-plugin-jsx-a11y)react
: React JS library (eslint-plugin-react)webpack
: Webpack for the import plugin to work with webpack overloaded imports/requires (eslint-plugin-import and eslint-import-resolver-webpack)
Things to know
- The default config uses
babel-eslint
to support stage features that ESLint doesn't support and it opts to use theeslint-plugin-babel
rules over the ESLint rules to support rules for these features as well. - All plugins needed for rules used by these configs are dependencies of this module so you don't have to install anything on your own.
- The default config actually is composed of several configurations and you can use those individually. These are the configs it's using:
possible-errors.js
,best-practices.js
,stylistic.js
,es6/index.js
, andimport/index.js
. You can use each of these configs yourself if you want to leave my own personal style out of it. Also, thees6
andimport
configs each have apossible-errors.js
,best-practices.js
, andstylistic.js
which they are composed of as well.
Example of highly customized config
{
"extends": [
"ryo/possible-errors", "ryo/best-practices",
"ryo/es6/possible-errors", "ryo/import",
"ryo/jest"
],
"rules": { /* custom rules */ }
}
TODO!!! Not Yet Implemented: Extra Feature - Import Organization
- If you need to customize your import order and add specialized grouping/comments then add the following to your
.eslintrc
config file:
{
// You can use either config with "ryo" or "ryo/import"
"extends": ["ryo", "ryo/import"],
"rules": {
'organize-imports/organize-imports': ['error', {
'orderRules': [{
'moduleType': 'nodeModule',
'comment': 'vendor modules'
}, {
'moduleType': 'testModule',
'comment': 'test modules',
'include': ['src/test/'],
'exclude': ['src/test/utils']
}, {
'moduleType': 'utilityModule',
'comment': 'utility modules',
'include': [
'src/shared/constants',
'src/+(shared|server|test)/utils',
'src/server/mock-data'
]
}],
'pathAliases': [{
'prefix': '<shared>',
'resolvesTo': './src/shared'
}]
}]
}
}
- This rule-set would format your imports to the example below.
// vendor modules
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
// utility modules
import sampleUtils from '<shared>/utils/sample-utils';
LICENSE
MIT
0.0.3
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago
0.0.0
5 years ago
0.0.0-semantically-released
5 years ago