Activate universal ESlint configuration

I would like to set up an ESLint configuration globally so that I don't have to initialize it in every new project.

So, I proceeded to install ESLint and some related configurations globally using the following command:

npm install -g eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

Once installed, I created my ESLint config file ~/.eslintrc.json with the following content:

{
 "env": {
 "browser": true,
 "es6": true,
 "node": true
 },
 "extends": [
 "airbnb-base"
 ],
 "rules": {
 }
}

However, upon linting my JavaScript file, I encountered an error stating:

ESLint couldn't find the config "airbnb-base" to extend from. Please check that the name of the config is correct.

The config "airbnb-base" was referenced from the config file in "/home/molly/.eslintrc.json".

Despite having the airbnb package among my global installations, the issue persisted. What could be missing? I aim to avoid installing individual ESLint plugins for each project.

javascripttypescripteslinteslintrc

Answer №1

It might be a little late for you, but installing eslint plugins globally is not possible.
A solution that worked for me was to create a centralized directory for all my projects and within that directory, create a package.json file using the command npm init -y. Next, install all the necessary plugins in that directory by running 

npm i -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

Move your global .eslintrc file into that directory, which will serve as the main eslint configuration for all projects within that directory.

In essence, your directory structure should look like this:

projects/
  package.json
  .eslintrc
  node_modules/
    ...
  my_cool_project/
    ...
  my_cool_project2/
    ...
  ...

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

"Implementing filtering logic for an array of objects with multiple conditions in a React application

I am looking to apply filters to a person list based on criteria such as city, job, age, and gender. How can I apply filters based on five conditions in React? I tried using filter chaining but it did not work for me. In the useEffect hook, I applied indiv ...

javascriptreactjs

React Virtualized - Blank screen issue occurring because of continuous scrolling through a large list of ITSM items

I am currently working on a lengthy list of items and utilizing the react-virtualized library for this purpose. However, I have encountered an issue that needs addressing. https://i.stack.imgur.com/ROdjp.gif Upon attempting to scroll down for 2 seconds, ...

javascriptreactjsreact-virtualized

Using the length of an array as an iterator within a nested ngFor loop in Angular 9

I am looping through an array of objects where each object contains another array of objects with attributes like "name" and "id". The length of this array of objects (noticias) varies. I am struggling to display these values and have only managed to acce ...

javascriptarraysangulartypescriptngfor

What is the best way to set the length of an undefined item in an object to 0 in reactjs?

I am facing a challenge keeping track of scores within each article and displaying them accurately. The issue arises when there is a missing "up" or "down" item in the object. Below is the data containing all the votes: const votes = { "1": { "up": ...

javascriptjsonreactjs

Send the Children prop to the React Memo component

Currently, I am in the stage of enhancing a set of React SFC components by utilizing React.memo. The majority of these components have children and the project incorporates TypeScript. I had a notion that memo components do not support children when I en ...

javascriptreactjstypescriptmemo

Filter products by pressing the "Enter" key while using the search input in

I have a list of products and I want to only display products that have a description or name containing the typed word when enter is clicked on the search input. Here is what I tried in my Search component: const Search = (props) => { return ( &l ...

javascriptreactjs

Transmit a message from the background.js script to the popup window

Currently, I am looking to integrate FCM (Firebase Cloud Messaging) into my chrome extension. After conducting thorough research, I have discovered that the most efficient way to implement FCM is by utilizing the old API chrome.gcm. So far, this method has ...

javascriptvue.jsgoogle-chrome-extensionchrome-extension-manifest-v3

The Highcharts datetime line takes a detour through time when faced with unorganized data

Despite my best efforts to obtain sorted data from various API calls, I find myself with unsorted data that needs to be plotted in a timeseries graph. { xAxis: { type: 'datetime' }, series: [{ data: [ [Date ...

javascripthighcharts

No results appearing in the output section

While developing a website using React, I encountered an error that said useState is defined but never used in the navbar component. To address this, I made changes to my ESLint configuration in the package.json file: "rules": { "eqeqe ...

javascriptreactjscreate-react-appeslint

The comparison between form submission and AJAX request when transmitting data in JSON format

Working on a complex PHP/Drupal project, our team is facing the challenge of enabling a deep link into a page that requires extensive data to be passed from the originating site. We have full control over both ends so cross-domain issues are not a concern ...

javascriptphpjsonajaxforms

The iOS app icon for React Native is not appearing on the screen

After using XCode 12, I encountered an issue while trying to archive my iOS app. Despite no errors and no issues with app assets, the app icon mysteriously fails to show up. I've tried various solutions, including modifying codes in the pod file and r ...

javascriptiosreact-nativecross-platform

What is the method for organizing a table based on name?

As a beginner in ReactJS, I'm currently working on a project that requires me to sort my list of pokemons by name. I've implemented the Material-UI Table for this purpose, but unfortunately, I'm facing issues with the ordering. You can take ...

javascriptreactjsmaterial-ui

"Use jQuery to target the first child element within a parent element that has a specific class

Is there a way to choose only the first child of a specific parent class with a certain class for the purpose of clone()? <div class="sector_order"> <div class="line_item_wrapper"> SELECT THIS DIV </div> <div class=" ...

javascriptjqueryjquery-selectors

The Angular UI tree is malfunctioning on Mozilla Firefox

Check out this Plunker example. While this Plunker works well in Chrome and IE, it encounters issues in Mozilla Firefox. There seems to be a problem with the dropdown selection causing the page to reload. Any ideas on how to fix this? <script type= ...

javascriptangularjsangular-components

Different Ways to Modify Data with the Change Event in Angular 8

How can I dynamically change data using the (change) event? I'm attempting to alter the gallery items based on a matching value. By default, I want to display all gallery items. public items = [{ value: 'All', name: 'All Item ...

angulartypescript

Filter search results using selected region from dropdown menu

I have been attempting to retrieve the value from a dropdown list and customize the search functionality specifically for the selected field. The client should only be able to search within the chosen zone in the dropdown. I have been searching for a solut ...

javascriptc#asp.net.netasp.net-mvc-5

The jQuery script fails to function properly within dynamically loaded content via ajax

After browsing through various articles and seeking help from Google, I've managed to do some basic coding as a designer. However, there's a complex problem that I'm struggling with. On my main page, I have news displayed and when scrolling ...

javascriptjqueryajax

Next JS build not displaying Typescript errors during npm build

I've been in the process of converting a Next JS project from JavaScript to TypeScript. Intentionally making mistakes to test the type checking, for example: export class Knot { position: Vector2; locked: number; deletable: boolean; isLast: bo ...

typescriptnpmnext.jsturboreponpm-build

Implementing ui-sref-active for intricate routing states

I have implemented the menu link using AngularJS and UI-Router. <li ui-sref-active="active"> <a ui-sref="dashboard" title="Dashboard"><i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">Dashboard</spa ...

javascriptangularjs

Heroku Internal Server Error with NextJs version 5.0.0

Below are the scripts that I am using: "scripts": { "dev": "node server.js", "build": "next build", "start": "NODE_ENV=production node server.js", "heroku-postbuild": "next build" }, This is the content of my procfile: web: npm start ...

javascriptreactjsherokudeploymentnext.js