npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

eslint-plugin-import-path

v0.0.2

Published

eslint plugin to check import paths via regex

Downloads

22,343

Readme

eslint-plugin-import-path

A tiny ESLint plugin to check import paths for errors. Currently it allows you do two simple things: check strings for regexes (you can define these) and check imports depth.

WebStorm sometimes tends to do weird things - it does not respect module root sometimes and adds something like ../../../../stores/SettingStore instead of stores/SettingStore - and also it sometimes adds /index to the end of filenames after refactoring - so my import Component from 'Component' turns into import Component from 'Component/index'. I tend to miss these and I don't like to see them in my code.

There's a gorgeous eslint-plugin-import, but it lacked these two simple features, so I wrote this one. It is even somewhat covered with unit tests and should be stable enough to use during development.

Usage

Install it: (of course you have to have eslint installed)

npm install eslint-plugin-import-path --save-dev

Add import-path to the plugins section of your .eslintrc configuration file.

{
  "plugins": ["import-path"]
}

Configure the rules you need in rules section of .eslintrc.

{
  "plugins": ["import-path"],
  
  "rules": {
    "import-path/parent-depth": ["warn", 2],
    "import-path/forbidden": ["error", ["/index$"]]
  }
}

Rules

import-path/forbidden

Basically a regex match. Lets you specify a regex string (or a number of them) to highlight import paths that match it. Couple examples:

You can simply pass a regex string as a second argument:

"import-path/forbidden": ["warning", "/index$"]

Or an array of regex strings:

"import-path/forbidden": ["error", ["/index$", "badword"]]

Or an array of objects. In case you use objects - its match property should contain regex string. You can also provide message to be displayed for this very match

"import-path/forbidden": ["warning", [
  {
    "match": "/index$",
    "message": "Index on the end of path is redundant"
  }
]]

With objects can also use contains prop to define a string that will be checked for occurrence. It is not a regex, but a simple string the path will be checked for.

"import-path/forbidden": ["warning", [
  {
    "contains": "badword",
    "message": "Do not use paths containing 'badword'"
  },
]]

import-path/parent-depth

The rule checks if you used too many parent directory references.

Following rule:

"import-path/parent-depth": ["warn", 4]

Will cause a warning here:

import whatever from '../../../../../something';

...but won't cause it here:

import whatever from '../../something'

...Of course, you could achieve this using forbidden rule, too:

"import-path/forbidden": ["warning", [
  {
    "match": "^(\.\./){2,}",
    "message": "More than two parent directories referenced"
  },
]]

Export paths

Oh, export paths are also checked. Something like export { Whatever } from 'somewhere/index' will also get checked.