Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dominique-mueller/react-eslint-prettier-demo
Demo for a React project using ESLint and Prettier, using GitHub actions as CI
https://github.com/dominique-mueller/react-eslint-prettier-demo
actions ci create-react-app eslint prettier react
Last synced: 9 days ago
JSON representation
Demo for a React project using ESLint and Prettier, using GitHub actions as CI
- Host: GitHub
- URL: https://github.com/dominique-mueller/react-eslint-prettier-demo
- Owner: dominique-mueller
- Created: 2021-02-04T16:33:07.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-02-06T19:10:06.000Z (almost 4 years ago)
- Last Synced: 2024-11-10T15:51:12.092Z (2 months ago)
- Topics: actions, ci, create-react-app, eslint, prettier, react
- Language: TypeScript
- Homepage:
- Size: 190 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-eslint-prettier-demo
Demo for a **[React](https://reactjs.org/)** project using **[ESLint](https://eslint.org/)** and **[Prettier](https://prettier.io/)**, using
GitHub actions as CI
## 1. Setup React application
Using **[Create React App](https://create-react-app.dev)**
``` bash
npx create-react-app react-eslint-prettier-demo --template typescript
```
> Due to an incompatibility issue, this demo uses a downgraded version of TypeScript (`4.0.x` instead of `4.1.x`), which also requires the
> `compilerOptions.jsx` value to be changed from `react-jsx` to `react`.
## 2. Setup ESLint w/ TypeScript support
Using **[ESLint](https://eslint.org/docs/user-guide/getting-started)**,
**[TypeScript ESLint](https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md )**
### Install dependencies
`package.json`
``` diff
{
"devDependencies": {
+ "eslint": "x.x.x",
+ "@typescript-eslint/parser": "x.x.x",
+ "@typescript-eslint/eslint-plugin": "x.x.x"
}
}
```
``` bash
npm install
```
### Configure ESLint
`.eslintrc`
``` diff
+ {
+ "extends": [
+ "eslint:recommended",
+ "plugin:@typescript-eslint/eslint-recommended",
+ "plugin:@typescript-eslint/recommended"
+ ],
+ "parser": "@typescript-eslint/parser",
+ "parserOptions": {
+ "ecmaVersion": 2018,
+ "sourceType": "module",
+ "ecmaFeatures": {
+ "jsx": true
+ }
+ },
+ "plugins": [
+ "@typescript-eslint"
+ ]
+ }
```
### Setup scripts
`package.json`
``` diff
{
"scripts": {
+ "lint": "eslint src/**/*.{ts,tsx} --max-warnings 0",
+ "lint:fix": "eslint src/**/*.{ts,tsx} --max-warnings 0 --fix"
}
}
```
### Bonus: Remove ESLint from build steps
`package.json`
``` diff
{
"devDependencies": {
+ "cross-env": "x.x.x"
}
}
```
```
npm install
```
`package.json`
``` diff
{
"scripts": {
- "start": "react-scripts start",
+ "start": "cross-env DISABLE_ESLINT_PLUGIN=true react-scripts start",
- "build": "react-scripts build",
+ "build": "cross-env DISABLE_ESLINT_PLUGIN=true react-scripts build",
}
}
```
## 3. Add ESLint React support
Using **[eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react)**,
**[eslint-plugin-react-hooks](https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks)**
## Install dependencies
`package.json`
``` diff
{
"devDependencies": {
+ "eslint-plugin-react": "x.x.x",
+ "eslint-plugin-react-hooks": "x.x.x",
}
}
```
```
npm install
```
## Configure ESLint
`.eslintrc`
``` diff
{
"extends": [
+ "react-app",
+ "plugin:react/recommended",
+ "plugin:react-hooks/recommended"
],
"plugins": [
+ "react",
+ "react-hooks"
],
+ "settings": {
+ "react": {
+ "version": "detect"
+ }
+ },
}
```
## 4. Setup Prettier w/ ESLint integration
Using, **[Prettier](https://prettier.io/)**, **[eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier)**,
**[eslint-config-prettier](https://github.com/prettier/eslint-config-prettier)**
### Install dependencies
`package.json`
``` diff
{
"devDependencies": {
+ "eslint-config-prettier": "x.x.x",
+ "eslint-plugin-prettier": "x.x.x",
+ "prettier": "x.x.x",
}
}
```
```
npm install
```
### Configure Prettier
`.prettierrc`
``` diff
+ {
+ "endOfLine": "auto",
+ "jsxBracketSameLine": false,
+ "printWidth": 140,
+ "singleQuote": true,
+ "trailingComma": "all"
+ }
```
## Configure ESLint
`.eslintrc`
``` diff
{
"extends": [
+ "prettier/@typescript-eslint",
+ "plugin:prettier/recommended",
+ "prettier/react"
],
"plugins": [
+ "prettier"
]
}
```
## Visual Studio Code integration
### Extensions
- ESLint
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
- Prettier
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
### Autofix on save
`settings.json`
``` diff
+ "editor.codeActionsOnSave": {
+ "source.fixAll.eslint": true
+ }
```