ESLint in Content Fragment Extension Project | Community
Skip to main content
M
Mahesh_Gunaje
Level 7
July 8, 2025
Solved

ESLint in Content Fragment Extension Project

  • July 8, 2025
  • 1 reply
  • 311 views

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

    Best answer by SantoshSai

    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



     

    1 reply

    SantoshSai
    Community Advisor
    SantoshSaiCommunity AdvisorAccepted solution
    Community Advisor
    July 8, 2025

    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



     

    Santosh Sai
      Terms & ConditionsAccessibility statement

      Loading footer...