ESLint in Content Fragment Extension Project

[Mahesh_Gunaje]

Hello,

Anyone has implemented ESLint in your Content Fragment Extension Project?

If yes, please pass me the steps.

I have referred  projects in Github link:https://github.com/adobe/aem-uix-examples/tree/main

But, didnot get the eslint details

cc @arunpatidar @sarav_prakash  @AmitVishwakarma  @partyush 

Thanks in advance

[SantoshSai · Accepted solution]

Hi @Mahesh_Gunaje,

• Install dependencies:
  

  npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

  
  

• Create .eslintrc.js:

  module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    parserOptions: {
      ecmaVersion: 2020,
      sourceType: 'module',
      ecmaFeatures: {
        jsx: true,
      },
    },
    plugins: ['@typescript-eslint', 'react', 'react-hooks', 'jsx-a11y'],
    extends: [
      'eslint:recommended',
      'plugin:react/recommended',
      'plugin:@typescript-eslint/recommended',
      'plugin:jsx-a11y/recommended',
      'plugin:react-hooks/recommended',
    ],
    rules: {
      'react/react-in-jsx-scope': 'off', // React 17+
    },
    settings: {
      react: {
        version: 'detect',
      },
    },
  };

• Add script in package.json:

  "scripts": {
    "lint": "eslint ./src --ext .ts,.tsx",
    "lint:fix": "eslint ./src --ext .ts,.tsx --fix"
  }

• Create .eslintignore:

  node_modules/ dist/ build/

• Run:

  npm run lint