Skip to content

Commit

Permalink
feat(eslint-config): add eslint config forked from CRA
Browse files Browse the repository at this point in the history
  • Loading branch information
sabertazimi committed Aug 19, 2021
1 parent 1eb182d commit e604ad2
Show file tree
Hide file tree
Showing 6 changed files with 574 additions and 0 deletions.
22 changes: 22 additions & 0 deletions packages/eslint-config-bod/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
MIT License

Copyright (c) 2013-present, Facebook, Inc.
Copyright (c) 2021-present, Sabertaz.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
121 changes: 121 additions & 0 deletions packages/eslint-config-bod/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
# eslint-config-react-app

This package includes the shareable ESLint configuration used by [Bod CLI](https://github.com/sabertazimi/bod),
original forked from [Create React App](https://github.com/facebook/create-react-app).

Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started):
How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/):
How to develop apps bootstrapped with Create React App.

## Usage in Create React App Projects

The easiest way to use this configuration is with
[Create React App](https://github.com/facebook/create-react-app),
which includes it by default.

**You don’t need to install it separately in Create React App projects.**

## Usage Outside of Create React App

If you want to use this ESLint configuration in a project,
you can install it with the following steps.

First, install this package, ESLint and the necessary plugins.
Note that when using npm 7 (or greater) this step is not required,
as npm will automatically install peer dependencies.

```bash
npm i -D eslint-config-react-app \
@babel/eslint-parser@^7.14.7 \
@typescript-eslint/eslint-plugin@^4.0.0 \
@typescript-eslint/parser@^4.0.0 \
babel-preset-react-app@^10.0.0 \
eslint@^7.5.0 \
eslint-plugin-flowtype@^5.2.0 \
eslint-plugin-import@^2.22.0 \
eslint-plugin-jsx-a11y@^6.3.1 \
eslint-plugin-react@^7.20.3 \
eslint-plugin-react-hooks@^4.0.8
```

Then create a file named `.eslintrc.json`
with following contents in the root folder of your project:

```json
{
"extends": "react-app"
}
```

That's it!
You can override the settings from `eslint-config-react-app`
by editing the `.eslintrc.json` file.
Learn more about
[configuring ESLint](https://eslint.org/docs/user-guide/configuring)
on the ESLint website.

## Jest rules

This config also ships with optional Jest rules for ESLint
(based on [`eslint-plugin-jest`](https://github.com/jest-community/eslint-plugin-jest)).

You'll first need to add the ESLint plugin for Jest
(if you don't already have it installed).

```sh
npm install --save-dev eslint-plugin-jest@^24.0.0 eslint-plugin-testing-library@^3.9.0
```

You can then enable these rules by adding the Jest config
to the `extends` array in your ESLint config.

```json
{
"extends": ["react-app", "react-app/jest"]
}
```

## Accessibility Checks

The following rules from the
[eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y)
plugin are activated:

- [alt-text](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/alt-text.md)
- [anchor-has-content](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-has-content.md)
- [aria-activedescendant-has-tabindex](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-activedescendant-has-tabindex.md)
- [aria-props](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-props.md)
- [aria-proptypes](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-proptypes.md)
- [aria-role](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md)
- [aria-unsupported-elements](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-unsupported-elements.md)
- [heading-has-content](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/heading-has-content.md)
- [href-no-hash](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/v5.1.1/docs/rules/href-no-hash.md)
- [iframe-has-title](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/iframe-has-title.md)
- [img-redundant-alt](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md)
- [no-access-key](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md)
- [no-distracting-elements](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-distracting-elements.md)
- [no-redundant-roles](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-redundant-roles.md)
- [role-has-required-aria-props](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-has-required-aria-props.md)
- [role-supports-aria-props](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-supports-aria-props.md)
- [scope](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/scope.md)

If you want to enable even more accessibility rules,
you can create an `.eslintrc.json` file in the root of your project with this content:

```json
{
"extends": ["react-app", "plugin:jsx-a11y/recommended"],
"plugins": ["jsx-a11y"]
}
```

However,
if you are using
[Create React App](https://github.com/facebook/create-react-app)
and have not ejected,
any additional rules will only be displayed in the
[IDE integrations](https://facebook.github.io/create-react-app/docs/setting-up-your-editor#displaying-lint-output-in-the-editor),
but not in the browser or the terminal.
50 changes: 50 additions & 0 deletions packages/eslint-config-bod/base.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

'use strict';

// Fix eslint shareable config (https://github.com/eslint/eslint/issues/3458)
require('@rushstack/eslint-patch/modern-module-resolution');

// This file contains the minimum ESLint configuration required for Create
// React App support, and is used as the `baseConfig` for `eslint-loader`
// to ensure that user-provided configs don't need this boilerplate.

module.exports = {
root: true,

parser: '@babel/eslint-parser',

plugins: ['react'],

env: {
browser: true,
commonjs: true,
es6: true,
jest: true,
node: true,
},

parserOptions: {
sourceType: 'module',
requireConfigFile: false,
babelOptions: {
presets: ['babel-preset-react-app/prod'],
},
},

settings: {
react: {
version: 'detect',
},
},

rules: {
'react/jsx-uses-vars': 'warn',
'react/jsx-uses-react': 'warn',
},
};
Loading

0 comments on commit e604ad2

Please sign in to comment.