https://github.com/zakimohammed/react-eslint-prettier

React project for setting up ESLint + Prettier
https://github.com/zakimohammed/react-eslint-prettier

eslint prettier prettier-eslint react react-eslint react-prettier

Last synced: 6 days ago
JSON representation

React project for setting up ESLint + Prettier

• Host: GitHub
• URL: https://github.com/zakimohammed/react-eslint-prettier
• Owner: ZakiMohammed
• Created: 2024-04-07T00:57:23.000Z (7 months ago)
• Default Branch: master
• Last Pushed: 2024-04-07T09:40:55.000Z (7 months ago)
• Last Synced: 2024-04-07T10:34:33.575Z (7 months ago)
• Topics: eslint, prettier, prettier-eslint, react, react-eslint, react-prettier
• Language: JavaScript
• Homepage:
• Size: 42 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React ESLint + Prettier

React project for setting up ESLint + Prettier.

## Run App

Below command will run the project:

```

npm run server

npm run dev

```

For running the server, install `json-server` globally:

```

npm install -g json-server

```

## Initial Setup

Below command executed to perform initial setup:

```

npm create vite@latest

# project name: react-eslint

# framework: react

# variant: JavaScript + SWC

cd react-eslint

npm i

```

## ESLint

Run command:

```

npm run lint

```

Add new script:

```

"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",

"lint:html": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0 --format html > lint.html",

```

Add ESLint ignore file `.eslintignore`:

```

node_modules/

dist/

.prettierrc.cjs

.eslintrc.cjs

```

Refer: https://eslint.org/

## ESLint + Prettier

Add Prettier config `.prettierrc.cjs` and Prettier ignore file `.prettierignore`:

```

module.exports = {

  singleQuote: true,

  bracketSameLine: true,

  endOfLine: 'auto',

};

```

Add below file names fo your `.prettierignore` file:

```

node_modules

package-lock.json

dist

lint-*

lint.*

```

Understand the philosophy of formatting with ESLint + Prettier from:

https://github.com/prettier/eslint-config-prettier/

https://github.com/prettier/eslint-plugin-prettier#recommended-configuration

Add `eslint-config-prettier` to project:

```

npm install --save-dev eslint-config-prettier

```

Add `eslint-plugin-prettier` and `prettier` to project:

```

npm install --save-dev eslint-plugin-prettier

npm install --save-dev --save-exact prettier

```

Add new script:

```

"prettier:write": "prettier --config .prettierrc.cjs --write .",

"prettier:check": "prettier --config .prettierrc.cjs --check ."

```

Add Prettier rules to `.eslintrc.cjs`:

```

module.exports = {

  extends: [

    ...

    'plugin:prettier/recommended'

  ],

};

```