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-organize-imports

v0.0.46

Published

ESLint plugin boilerplate

Downloads

845

Readme

eslint-plugin-organize-imports:

An eslint plugin to enforce grouping of similar modules together with an associated comment & order of these groups.

Problem:

when lot of imports are present on top of a file, its difficult to recognize if a file is imported already and leads to duplicate imports. To prevent this, one can use this lint rule to organize imports

Usage:

npm install --save-dev eslint-plugin-organize-imports

Plugin in action - vscode

Plugin in action - vscode

Config/Options Schema:

  • orderRules - (required) Array of configs for each import-groups
    • moduleType - (required) String to denote a module-group in error messages. nodeModule is a predefined value to denote external dependencies
    • comment - (required) string that is the comment body. rule checks for equality after comment body's trimming whitespace.
    • include - array of paths(glob patterns supported) that categorize matching modules into the import group
    • exclude - array of paths(glob patterns supported) that avoid categorizing the matching modules into the import group
  • pathAliases - (optional) to support use cases like babel-plugin-module-alias and any other other webpack plugins which preprocess shorthand prefixes in import paths to an actual path
    • prefix - string to denote the shorthand prefix that gets preprocessed to get the final file path (ex: expose in babel-plugin-module-alias)
    • resolvesTo - the string that replaces the path prefix by the preprocessing tool (ex: src in babel-plugin-module-alias)

Example:

.eslintrc

{
  "rules": {
    "organize-imports/organize-imports": ["error", {
      "orderRules": [{
        "moduleType": "nodeModule",
        "comment": "vendor modules"
      }, {
        "moduleType": "testModule",
        "comment": "test modules",
        "include": ["src/test/"],
        "exclude":  ["src/test/utils"]
      }, {
        "moduleType": "utilityModule",
        "comment": "utility modules",
        "include": [
          "src/shared/constants",
          "src/+(shared|server|test)/utils",
          "src/server/mock-data"
        ]
      }],
      "pathAliases": [{
        "prefix": "<shared>",
        "resolvesTo": "./src/shared"
      }]
    }]
  }
}

Valid code samples

valid code

sourceFileLocation: /src/test/sample1.js

// vendor modules
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
// utility modules
import sampleUtils from '<shared>/utils/sample-utils';

Invalid code samples

invalid code - (missing comments)

sourceFileLocation: /src/test/sample1.js

// vendor modules
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import sampleUtils from '<shared>/utils/sample-utils';  /* [eslint] no associated "// utility modules" comment */

invalid code - (wrong order of import-groups)

sourceFileLocation: /src/test/sample1.js

// utility modules                                      /* [eslint] "utilityModule" modules need to be after "nodeModule" modules */
import sampleUtils from '<shared>/utils/sample-utils';
// vendor modules
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';