Skip to content

Instantly share code, notes, and snippets.

@jonbeebe
Last active December 24, 2023 06:01
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jonbeebe/4ecd64cacbdad8b6a2399c431bdcf6d2 to your computer and use it in GitHub Desktop.
Recommended ESLint and Prettier config for React JavaScript
src/tests
node_modules
build
dist
dist-ssr
.vscode
public
*.test.js
*.test.jsx
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
"prettier",
],
ignorePatterns: ["dist", ".eslintrc.cjs", "prettier.config.cjs"],
parserOptions: { ecmaVersion: "latest", sourceType: "module" },
settings: { react: { version: "18.2" } },
plugins: ["react-refresh", "prettier"],
rules: {
"react-refresh/only-export-components": [
"warn",
{ allowConstantExport: true },
],
},
"prettier/prettier": [
"error",
{
semi: true,
singleQuote: false,
usePrettierrc: true,
},
],
"no-nested-ternary": "error",
"no-restricted-exports": [
"error",
{
restrictedNamedExports: ["default", "then"],
},
],
"no-restricted-globals": [
"error",
{
name: "isFinite",
message:
"Use Number.isFinite instead https://github.com/airbnb/javascript#standard-library--isfinite",
},
{
name: "isNaN",
message:
"Use Number.isNaN instead https://github.com/airbnb/javascript#standard-library--isnan",
},
"addEventListener",
"blur",
"close",
"closed",
"confirm",
"defaultStatus",
"defaultstatus",
"event",
"external",
"find",
"focus",
"frameElement",
"frames",
"history",
"innerHeight",
"innerWidth",
"length",
"location",
"locationbar",
"menubar",
"moveBy",
"moveTo",
"name",
"onblur",
"onerror",
"onfocus",
"onload",
"onresize",
"onunload",
"open",
"opener",
"opera",
"outerHeight",
"outerWidth",
"pageXOffset",
"pageYOffset",
"parent",
"print",
"removeEventListener",
"resizeBy",
"resizeTo",
"screen",
"screenLeft",
"screenTop",
"screenX",
"screenY",
"scroll",
"scrollbars",
"scrollBy",
"scrollTo",
"scrollX",
"scrollY",
"self",
"status",
"statusbar",
"stop",
"toolbar",
"top",
],
"no-restricted-syntax": [
"error",
{
selector: "ForInStatement",
message:
"for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array.",
},
{
selector: "ForOfStatement",
message:
"iterators/generators require regenerator-runtime, which is too heavyweight for this guide to allow them. Separately, loops should be avoided in favor of array iterations.",
},
{
selector: "LabeledStatement",
message:
"Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand.",
},
{
selector: "WithStatement",
message:
"`with` is disallowed in strict mode because it makes code impossible to predict and optimize.",
},
],
"no-return-assign": ["error", "always"],
"no-unneeded-ternary": [
"error",
{
defaultAssignment: false,
},
],
"no-unused-vars": "warn",
"no-useless-rename": [
"error",
{
ignoreDestructuring: false,
ignoreImport: false,
ignoreExport: false,
},
],
"prefer-const": "error",
"react/display-name": "off",
"react/prop-types": "off",
"no-console": [
"warn",
{
allow: ["assert"],
},
],
};
public
node_modules
build
dist
dist-ssr
.vscode
# NPM:
npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh prettier
# Yarn:
yarn add -D eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh prettier
module.exports = {
arrowParens: "always",
bracketSpacing: true,
bracketSameLine: false,
printWidth: 80,
proseWrap: "always",
semi: true,
singleQuote: false,
tabWidth: 2,
trailingComma: "all",
useTabs: false,
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment