React project for setting up ESLint + Prettier.
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 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 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/
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' ], };