Prevent Importing Folders Without Index Using ESLint Rule or VS Code Setting

Query:

Are there any ESLint rules that can be applied to enforce the utilization of */index in imports?

Illustration:

Directory setup:

utils/
   - index.js
   - a.js
   - b.js

main.js

main.js

// INCORRECT
import utils from "./utils";

// CORRECT 
import utils from "./utils/index";

Motivation

This requirement stems from the fact that my project employs tscpaths for substituting absolute paths with relative paths following typescript compilation; however, this replacement does not occur when */index is omitted.

Solution

If such a rule does not exist, is there a vscode configuration available that would automatically include the index during auto-imports?

Answer №1

To solve the issue of importing index.js files, you have a few options available:

  • Option 1: Instead of using index.js, consider renaming your files to something like main.js. This way, you can easily import them without relying on index files.
  • Option 2: Create a config for the no-internal-imports rule to treat folder imports as "internal references." Although this solution may require manual updates and lacks auto-fix capabilities, it can be helpful in certain scenarios.
  • Option 3: Modify the no-useless-path-segments rule to suggest adding "/index" to imports that do not point directly to an index file. This workaround involves changing the logic around lines 95-108 to achieve the desired behavior.

Keep in mind that while these solutions address the import issue, the existence of an eslint rule with conflicting logic indicates that such practices may not align with best coding practices.

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

Having trouble converting a timestamp to a date in JavaScript

My database uses MongoDB and has a timestamp field with unique formats, such as: 1657479170.7300725 1657479170.7301126 1657479170.7301197 1657479170.9120467 1657479170.932398 Converting these timestamps to the date format YYYY-MM-DD yields the correct res ...

What is the best way to showcase JSON keys in Vue.js?

I have a JSON structure that resembles the following: { "data": [ { "name": "someName", "link": "http://somelink.com", ], "relevantArray": [ { "keyIWant": ...

Changing an array into an object in JavaScript without rearranging the keys

I have a collection { 1: {id: 1, first: 1, last: 5} 2: {id: 2, first: 6, last: 10} 3: {id: 3, first: 11, last: 15} } My goal is to reverse the order of items without rearranging the keys so that it looks like this: { 1: {id: 3, first: 11, last: 15} 2: { ...

Discovering an item in a JSON Array based on a parameter utilizing a Promise - what's the best approach?

Upon making a JSON request, I received the following data: {"page": 1, "results": [ { "poster_path": "/9O7gLzmreU0nGkIB6K3BsJbzvNv.jpg", "adult": false, "overview": "Framed in the 1940s for the double murder of his wife and her lov ...

Trigger the child component's function from the parent component by clicking a button in Angular2

One of the functions in my child component is as follows: reload() { clearInterval(this.points); this.initiateInterval(); this.redrawImages(); } This function redraws a few images on the window.resize event. Now, in the parent component, I h ...

Issue: $injector:unpr Angular Provider Not Recognized

I've recently developed an MVC project and encountered an issue regarding the loading of Menu Categories within the layout. <html data-ng-app="app"> . . . //menu section <li class="dropdown" ng-controller="menuCategoriesCtrl as vmCat"> ...

Exploring Angular's filtering capabilities and the ngModelChange binding

Currently, I am in the process of working on a project for a hotel. Specifically, I have been focusing on developing a reservation screen where users can input information such as the hotel name, region name, check-in and check-out dates, along with the nu ...

Is there a way to consistently substitute a specific path parameter with a different value within node.js?

Snippet of my coding: router.get('/name/:name/height', (req,res) => { ... } router.get('/name/:name/weight', (req,res) => { ... } router.get('/age/:age/height', (req,res) => { ... } router.get('/ag ...

What would be the most effective method to send an array through ajax?

My Java script array looks like this: let myArray = new Array(); myArray[0] = 'foo'; myArray[1] = 'bar'; I'm looking for the most efficient way to send this data to the server using AJAX (jQuery). Do I need to serialize it before ...

Tracking the referral source when the email box is clicked

document.referrer is a JavaScript method that returns the URI of the page that linked to the current page. If the user navigated directly to the page, for example through a bookmark, the value returned by document.referrer will be an empty string. You can ...

What is causing the Typescript compiler to interpret an element in a string array as the type 'never'?

My Typescript function compiled without issue in version 3.5.3, but after updating to 3.8.3, it now throws a confusing error during compilation. import { isNumber, toInteger, padNumber } from './math'; parse(value: string): NgbDateStruct { if ...

Creating a textarea with tagging functionality akin to Youtube

I'm interested in developing a textarea that emulates the tagging box on Youtube. The desired functionality includes: Ability to input any text Automatically turning words into tags upon hitting space Capability to delete tags using backspace or by ...

Discover a corresponding object within an array

I am currently dealing with an array of objects in Javascript where I need to verify if a certain value exists within any object and return the corresponding id. The issue arises when using the some() function as it only seems to match the first object. T ...

Retrieve the most recently updated or added item in a dropdown list using jQuery or AngularJS

Having a multiple select element with the chosen jquery plugin, I am trying to identify the latest selection made using the change event. Struggling to locate a simple method to access the most recent selection, I am currently inspecting the last item in ...

What is the best way to generate an object with a text string that is quote-free?

When passing an object to the MongoClient collection.find() method, I'm facing an issue where I don't want quotes around the values. If I pass a literal, it works fine: cursor = collection.find({EmployeeName: {'$regex': /Jo/i}}); Howe ...

What are the steps to integrating D3js into a WordPress website?

After installing Wordpress and the d3js plugin, I'm looking for the most effective way to upload data in order to create and display graphs on my website. Should I directly upload csv files? And if so, where should I store them? If I prefer storing ...

Incorporating a conditional statement into the Array.from() method

Here is the code snippet that I am currently working with: AllDays= Array.from(moment.range(startDate, endDate).by('day')).map(day => day.format('YYYY-MM-DD')); I want to enhance this code by adding a conditional statement so that i ...

Troubleshooting issues with AngularJS $watch not triggering properly

Even though Deep watch has been activated in the factory, it is not triggering. What steps can be taken to resolve this issue and ensure that an event is triggered when the 'name' value changes? Javascript Code: var app = angular.module('a ...

Two DataTables on a Single Page - Odd Initialization in the Second One

My page contains two dataTable elements and I've created a method as shown below: function ToDataTable() { $(".dataTable").css("width", "100%"); $(".dataTable").each(function () { var $that = $(this); /* Start of custom ...

When a StaticFiles instance is mounted, FastAPI will issue a 405 Method Not Allowed response

Running a FastAPI application has been smooth sailing until I encountered an issue. In my current setup, the application script is as follows: import uvicorn from fastapi import FastAPI from starlette.responses import FileResponse app = FastAPI() @app.ge ...