Ways to expand CRA ESLint guidelines using the EXTEND_ESLINT environmental variable

Facebook's Create React App (CRA) recently introduced a new feature allowing users to customize the base ESLint rules.

Recognizing that some cases may require further customization, it is now possible to extend the base ESLint config by setting the EXTEND_ESLINT environment variable to true. Setting Up Your Editor

An example is provided without specific details like filename or what "shared-config" refers to.

{
    "eslintConfig": {
        "extends": ["react-app", "shared-config"],
        "rules": {
            "additional-rule": "warn"
        },
        "overrides": [
            {
                 "files": ["**/*.ts?(x)"],
                 "rules": {
                     "additional-typescript-only-rule": "warn"
                 }
             }
        ]
    }
}

The feature can be enabled by adding an environment variable.

EXTEND_ESLINT=true

However, the documentation page does not provide information on how to utilize this feature - see Advanced configuration.

I tried adding their example code to my build in a file named .eslintrc.json, but encountered a build error:

"Error: ESLint configuration in .eslintrc.json is invalid: - Unexpected top-level property "eslintConfig"."

Has anyone successfully implemented this? Do I need to export a module from the file?

javascriptnpmcreate-react-appeslint

Answer №1

The guidelines provided in the Create-React-App documentation may lack clarity, but an example given suggests that the ESLint configuration for a project could be contained within the eslintConfig property of the package.json file.

To properly set up ESLint, it is essential to refer to and follow the instructions outlined in its official documentation, especially when utilizing the .eslintrc.json format without including an eslintConfig property.

Key points highlighted in the example include:

  • Extension from "react-app" should precede any other configurations
  • Additional rules should be set to "warn" to prevent project build interruptions
  • If TypeScript is being used, specific TS configurations should be placed in the "overrides" section.

A simplified configuration file like .eslintrc.js tailored for a Create-React-App project with TypeScript integration might appear as follows:

const defaultRules = [
  'react-app',
  'eslint:recommended',
  // Any additional plugins or custom configurations to extend from.
];

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2017,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  env: {
    browser: true,
    node: true,
    es6: true,
    jest: true,
  },
  extends: defaultRules,
  rules: {
    'array-callback-return': 'warn',
    'consistent-return': 'warn',
    'default-case': 'warn',
    // And so forth.
  },
  overrides: [
    {
      files: ['**/*.ts', '**/*.tsx'],
      plugins: ['@typescript-eslint'],
      extends: [
        ...defaultRules,
        'plugin:@typescript-eslint/recommended',
        // Additional TypeScript configurations (from a plugin, or custom)
      ],
      rules: {
        '@typescript-eslint/no-explicit-any': 'warn',
        '@typescript-eslint/no-unused-vars': 'warn',
        '@typescript-eslint/no-unused-expressions': 'warn',
        // And more.
      },
    },
  ],
  settings: {
    react: {
      // Specify React version. "detect" automatically detects the installed version.
      version: 'detect',
    },
  },
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the syntax for accessing an element within an array in a function?

This code snippet retrieves an array of users stored in a Firestore database. Each document in the collection corresponds to a user and has a unique ID. const [user] = useAuthState(auth); const [userData, setUserData] = useState([]); const usersColl ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Indentation differences between PHP and JavaScript

It's interesting to observe the different indentation conventions in various programming languages. Recently, I came across a code snippet from the PHP manual that caught my attention: switch ($i) { case "apple": echo "i is apple"; ...

phpjavascriptswitch-statementconventions

Chatting with a Discord bot

I am currently working on a Discord bot that will execute specific functions based on the questions asked, most of which are yes or no queries. Upon responding with "yes," a particular function should be performed, while answering "no" would terminate t ...

javascriptnode.jsdiscord.js

Refresh Google Maps without showing gray areas on the screen

Currently, I am utilizing the Google Maps API v3 in javascript and frequently reloading the map using an app.get while also incorporating layers and bookmarks via mongodb. Whenever I reload the map to erase everything, a gray background appears in the div ...

javascriptjquerymongodbgoogle-mapsgoogle-maps-api-3

Using force-directed layout to access and retrieve specific data from external or internal data sources

Just starting out with d3js and currently working on modifying the Force directed layout found at http://bl.ocks.org/mbostock/1153292 I have managed to make it so that when I hover over the node circles, the corresponding source value filenames should app ...

javascripthtmlcssjson

The webpage becomes unresponsive and gets stuck when sending a stream of requests to the web server via ajax

I am currently working on creating a signal on the webpage that displays either a green or red color based on values retrieved from a database. However, when I send a request after 10 seconds, the page appears to freeze and becomes unresponsive. I am strug ...

javascriptpythonjqueryajaxflask

Unlock the Power of Rendering MUI Components in ReactJS Using a For Loop

Hey there! Hope everything is going well. I've been working on a fun project creating an Advent/Chocolate Box Calendar using ReactJS. One challenge I'm facing is figuring out how to iterate over a for loop for each day in December and render it ...

javascriptreactjsmaterial-ui

The Jade variable assignment variable is altered by the Ajax result

Seeking a solution to update a Jade variable assigned with the results of an ajax post in order for the page's Jade loop to utilize the new data without re-rendering the entire page. route.js router.post('/initial', function(req, res) { ...

javascriptajaxnode.jsexpresspug

What is the process for exporting Three.js files to .stl format for use in 3D printing?

I stumbled upon a page with this link: Is it possible to convert Three.js to .stl for 3D printing? var exporter = new THREE.STLExporter(); var str = exporter.parse(scene); console.log(str); However, despite using the code provided, I am unable to export ...

javascriptthree.js3d

Unrecognized OnClick Function in AJAX

As someone who is relatively new to AJAX, I am trying to work on a project that involves fetching data from a route and using AJAX to create a table. Within this table, each row has a button that, when clicked, should trigger a POST request to add some dat ...

javascriptjqueryajax

What could be causing the code to not wait for the listener to finish its execution?

I've been attempting to make sure that the listener has processed all messages before proceeding with console.log("Done") using await, but it doesn't seem to be working. What could I possibly be overlooking? const f = async (leftPaneRow ...

javascripttypescriptasync-awaitpromisecontent-script

When the npm command is executed, it searches for a binary file within the current

I keep encountering an issue where when I try to use npm or other binaries like rails, it triggers nodejs and displays an error message stating that node cannot locate a module. For instance, if I run npm in the homefolder, an error message pops up: Erro ...

node.jslinuxnpm

Execute the second method once the first method has completed its execution

As I develop my npm package, I am faced with the challenge of ensuring that one method waits for another to complete before executing. For example: var package = require('myNpmPackage'); package.method1(options); ... Later on, possibly in a dif ...

javascriptnode.jsexpressmongoosenpm

Vue Websockets twofold

I am experiencing some issues with Laravel/Echo websockets and Vue.js integration. I have set up everything as required, and it works, but not quite as expected. The problem arises when I refresh the page and send a request - it displays fine. However, if ...

javascriptphpvue.jswebsocket

What is the best way to retrieve the data from this date object?

How can I access the date and time in the code below? I've attempted using functions within the Text block without success. It's unclear to me what mistake I'm making or how to correctly access this object, or transform it into an object th ...

javascriptreactjsreact-nativemobile

Setting the iDisplayLength property in jQuery Datatables to -1 will display all rows in the table

Using jQuery Datatables, I am trying to populate a table with entries from a server via ajax. The data retrieval works perfectly, and I am able to display them in the table. However, I am facing an issue where I want to show all rows/entries at once. I hav ...

javascriptjqueryajaxdatatable

Update the webpage's style by executing an npm command

Looking for a way to use different style sheets (S1.scss and S2.scss) for separate clients using npm commands during application build or with npm start. The app is built with Webpack 2. Any suggestions on how to achieve this customization? ...

angularnpmsasswebpack-2

Using jQuery to decrease the size of a div element containing an image

Hello everyone! I have an image inside a div and I am currently moving it down at a specific time using a delay. My question is, how can I make the image shrink as it moves down the screen until it eventually disappears completely at a set location? Curre ...

javascriptjqueryfadeout

Attempting to rearrange the table data by selecting the column header

In an attempt to create a table that can be sorted by clicking on the column headers, I have written code using Javascript, HTML, and PHP. Below is the code snippet: <?php $rows=array(); $query = "SELECT CONCAT(usrFirstname,'',usrSurname) As ...

javascriptphpcssmysqlhtml-table

Tips for displaying an HTML page using JavaScript

In my project, I am working with an .html file (File X) that needs to immediately open another .html file (File Y) based on a certain value. Could someone provide guidance on the best way to achieve this using JavaScript? Additionally, I would like the pa ...

javascripthtml