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;;;// utility modules;
LICENSE
MIT