DEV Community

Mark
Mark

Posted on • Edited on

Setup ESLINT and PRETTIER in React - JavaScript Version

This article is base on
https://dev.to/markliu2013/how-to-create-a-react-application-with-webpack-javascript-version-4032

We want to add eslint and prettier for the project.

Install Eslint and Prettier


npm i -D eslint prettier eslint-config-prettier eslint-plugin-prettier
npm i -D eslint-plugin-react eslint-plugin-react-hooks
Enter fullscreen mode Exit fullscreen mode

Create .eslintrc.js

module.exports = {
  settings: {
    react: {
      version: 'detect'
    }
  },
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'prettier',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  rules: {
    'react/react-in-jsx-scope': 'off'
  }
};
Enter fullscreen mode Exit fullscreen mode

Create .prettierrc.json

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "jsxBracketSameLine": true
}
Enter fullscreen mode Exit fullscreen mode

Run Eslint and Prettier

"lint": "eslint ./src --ext .js,.jsx",
"lint:fix": "eslint ./src --ext .js,.jsx --fix",
"format": "prettier 'src/**/*.{js,jsx,css,md,json}' --write"
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

victoor profile image

Supercharge Your AI Skills: 5 Open Source Repositories You Can't Afford to Miss

Víctor Falcón -

okoye_ndidiamaka_5e3b7d30 profile image

Mastering Cloud-Based Development Environments: Unlocking Productivity with GitHub Codespaces and AWS Cloud9

Okoye Ndidiamaka -

abeertech01 profile image

What New React 19 Has Brought to The Table - Get Clear Understanding

Abdul Ahad Abeer -

aniruddhadak profile image

VocalScribe: Transform Your Audio Into Text with Precision

ANIRUDDHA -