Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/paulolramos/eslint-prettier-airbnb-react
ESlint + Prettier + Airbnb Style Guide Configuration for React
https://github.com/paulolramos/eslint-prettier-airbnb-react
Last synced: 3 months ago
JSON representation
ESlint + Prettier + Airbnb Style Guide Configuration for React
- Host: GitHub
- URL: https://github.com/paulolramos/eslint-prettier-airbnb-react
- Owner: paulolramos
- License: gpl-3.0
- Archived: true
- Created: 2018-08-21T04:03:09.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-05-12T15:29:13.000Z (over 3 years ago)
- Last Synced: 2024-07-31T07:18:54.807Z (6 months ago)
- Language: Shell
- Homepage:
- Size: 36.1 KB
- Stars: 1,030
- Watchers: 27
- Forks: 195
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome - eslint-prettier-airbnb-react - ESlint + Prettier + Airbnb Style Guide Configuration for React (Shell)
README
## I am no longer maintaining this project.
# Installation
1. Navigate to your app directory where you want to include this style configuration.
```bash
cd my-app
```
2. Run this command inside your app's root directory. Note: this command executes the `eslint-prettier-config.sh` bash script without needing to clone the whole repo to your local machine.
```bash
exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/paulolramos/eslint-prettier-airbnb-react/master/eslint-prettier-config.sh 2> /dev/null)
```
3. Make selections for your preference of package manager (npm or yarn), file format (.js or .json), max-line size, and trailing commas (none, es5, all).
4. Look in your project's root directory and notice the two newly added/updated config files:
- `.eslintrc.js` (or `.eslintrc.json`)
- `.prettierrc.js` (or `.prettierrc.json`)
# Packages
### Main Packages
1. [ESlint](https://eslint.org/)
2. [Prettier](https://prettier.io/)
### Airbnb Configuration
1. [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb)
- This package provides Airbnb's .eslintrc as an extensible shared config.
2. [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) (Peer Dependency)
- Static AST checker for accessibility rules on JSX elements.
3. [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) (Peer Dependency)
- React specific linting rules for ESLint
4. [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import) (Peer Dependency)
- Support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names.
5. [babel-eslint](https://github.com/babel/babel-eslint)
- A wrapper for Babel's parser used for ESLint.
- We decided to include this since [Airbnb Style Guide uses Babel](https://github.com/airbnb/javascript#airbnb-javascript-style-guide-).
### ESlint, Prettier Integration
1. [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier)
- Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
2. [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier)
- Turns off all rules that are unnecessary or might conflict with Prettier.
# Created Configuration Files
Once files are created, you may edit to your liking.
### eslintrc(.js/.json)
- [more info](https://eslint.org/docs/user-guide/configuring)
```
{
"extends": [
"airbnb",
"plugin:prettier/recommended",
"prettier/react"
],
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"jest": true,
"node": true
},
"rules": {
"jsx-a11y/href-no-hash": ["off"],
"react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],
"max-len": [
"warn",
{
"code": (SET BY USER),
"tabWidth": 2,
"comments": (SET BY USER),
"ignoreComments": false,
"ignoreTrailingComments": true,
"ignoreUrls": true,
"ignoreStrings": true,
"ignoreTemplateLiterals": true,
"ignoreRegExpLiterals": true
}
]
}
}
```
### prettierrc(.js/.json)
- [more Info](https://prettier.io/docs/en/configuration.html)
```
{
"printWidth": (SET BY USER),
"singleQuote": true,
"trailingComma": (SET BY USER)
}
```
---
This script was inspired by Jeffrey Zhen's [tutorial](https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a).