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

mikeyoung44 profile image

AI Safety Breakthrough: 80% Smaller Models Match Full Performance in Harmful Content Detection

Mike Young -

mikeyoung44 profile image

Small AI Models Outperform Giants in Grading Language Tasks, New Study Shows

Mike Young -

mikeyoung44 profile image

New AI Pattern-Matching Method Simplifies and Improves Data Generation

Mike Young -

mikeyoung44 profile image

New ML Compiler Uses Pattern Matching to Speed Up AI Code, Verified with Formal Proofs

Mike Young -