Formatting Eslint Prettier React 🌼

.eslintrc

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: "latest",
    sourceType: "module"
  },
  plugins: ["react"],
  rules: {
    "react/react-in-jsx-scope": "off",
    "prettier/prettier": [
      "error",
      {
        endOfLine: "auto"
      }
    ]
  }
};

.prettierrc

{
  "semi": true,
  "trailingComma": "none",
  "doubleQuotes": true,
  "printWidth": 100,
  "tabWidth": 2,
  "bracketSpacing": true,
  "arrowParens": "always",
  "jsxBracketSameLine": false
}

README.md

Step by Step Configuration Eslint and Prettier in React JS 🎈

1. npx eslint --init

• a. How would you like to use ESLint? To check syntax and find problems
• b. What type of modules does your project use? Javascript modules (import/export)
• c. Which framework does your project use? React
• d. Does your project use TypeScript? No
• e. Where does your code run? browser
• f. What format do you want your config file to be in? Javascript
• g. Would you like to install them now with npm? yes

2. copy syntax to .eslintrc
3. install devDependencies npm install eslint-config-prettier eslint-plugin-prettier prettier --save-dev
4. create file .prettierrc and copy syntax to .prettierrc