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-itgalaxy

v139.0.0

Published

Itgalaxy org's ESLint rules and configs.

Downloads

1,289

Readme

eslint-plugin-itgalaxy

NPM version Build Status

Itgalaxy’s ESLint rules and configs.

Installation

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install eslint-plugin-itgalaxy:

$ npm install eslint-plugin-itgalaxy --save-dev

Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-itgalaxy globally.

Note: Some presets require additional dependencies (plugins).

Example markdown require eslint-plugin-markdown plugin.

So you need run:

$ npm install eslint-plugin-markdown --save-dev

By default all additional plugins listed in peerDependencies (this allows you to track non-compatibility with old versions), just ignore warnings if you don't need a plugin.

Usage

Itgalaxy’s ESLint configs come bundled in this package. In order to use them, you simply extend the relevant configuration in your project’s .eslintrc.

Configurations do not contain stylistic rules, we use prettier for this purpose.

Better use prettier directly (using npm/yarn command), because it is allow to format css, scss, markdown, json and etc.

For example, the following will extend the ESNext (ES2020 and later) config:

module.exports = {
  extends: [
    "plugin:itgalaxy/module",
    "plugin:itgalaxy/node",
    "plugin:itgalaxy/esnext",
  ],
};

React:

module.exports = {
  extends: [
    "plugin:itgalaxy/module",
    "plugin:itgalaxy/browser",
    "plugin:itgalaxy/esnext",
    "plugin:itgalaxy/react",
  ],
};

Provided configurations

This plugin provides the following core configurations:

  • script: preset for environment without require/import (old browsers or custom env).

Example of configuration:

{
  "extends": ["plugin:itgalaxy/script"]
}

Example of configuration:

{
  "extends": ["plugin:itgalaxy/script"]
}

Example of configuration:

{
  "extends": ["plugin:itgalaxy/module"]
}

Example of configuration:

{
  "extends": ["plugin:itgalaxy/dirty"]
}

Why? Very often you are faced with writing or having code using ECMAScript and CommonJS modules, for example babel allows you to do it, you should use this preset in this case. But it is not recommended. Prefer to use plugin:itgalaxy/module.

More information about dirty (unambiguous).

Example of dirty (unambiguous) code:

import eslint from "eslint";

/**
 * @param {string} configName Config name
 * @returns {object} Config
 */
function loadConfig(configName) {
  return require(`my-${configName}`);
}

console.log(__dirname);
console.log(__filename);
console.log(import.meta.url);

loadConfig("example");
  • node: use this for Node.js projects (preset contains only environments rules, i.e. no rules for require/import, see above presets).

Preset contains environment and rules for Node.js code.

Example of configuration:

module.exports = {
  extends: [
    "plugin:itgalaxy/esnext",
    // You can use "plugin:itgalaxy/commonjs" or "plugin:itgalaxy/dirty"
    "plugin:itgalaxy/module",
    "plugin:itgalaxy/node",
  ],
};
  • browser: use this for browser projects.

Preset contains environment and rules for browser code.

Example of configuration:

module.exports = {
  extends: [
    "plugin:itgalaxy/esnext",
    // You can use "plugin:itgalaxy/script" for old browsers or custom enviroment, "plugin:itgalaxy/commonjs" or "plugin:itgalaxy/dirty" (useful for bundlers)
    "plugin:itgalaxy/module",
    "plugin:itgalaxy/browser",
  ],
};
  • esnext: use this for anything written with ES2015+ features.

Contains most of the rules for linting code.

Does not contain rules for CommonJS and ECMA modules syntax, rules for require/import/module.export/exports/etc and environments (i.e. browser/node/etc).

Example of configuration:

module.exports = {
  extends: [
    "plugin:itgalaxy/esnext",
    // You can use "plugin:itgalaxy/script" for old browsers or custom enviroment, "plugin:itgalaxy/commonjs" or "plugin:itgalaxy/dirty" (useful for bundlers)
    "plugin:itgalaxy/module",
  ],
};
  • react: Use this for react projects.

Example of configuration:

module.exports = {
  extends: [
    "plugin:itgalaxy/esnext",
    // You can use "plugin:itgalaxy/commonjs" or "plugin:itgalaxy/dirty" (useful for bundlers)
    "plugin:itgalaxy/module",
    "plugin:itgalaxy/browser",
    "plugin:itgalaxy/react",
  ],
};
  • html: Allow linting JavaScript in HTML (and HTML based) files.

Example of configuration:

module.exports = {
  extends: [
    "plugin:itgalaxy/esnext",
    // You can use "plugin:itgalaxy/commonjs" or "plugin:itgalaxy/dirty" (useful for bundlers)
    "plugin:itgalaxy/module",
    "plugin:itgalaxy/browser",
    "plugin:itgalaxy/html",
  ],
};
  • markdown: Allow linting JavaScript in markdown files.

By default allows you to use import and require in documentation. Also, all rules are related to no-unresolved/no-unused/unpublished are disabled by default and you can use console.log(something).

Example of configuration:

module.exports = {
  extends: [
    "plugin:itgalaxy/esnext",
    // You can use "plugin:itgalaxy/commonjs" or "plugin:itgalaxy/dirty" (useful for bundlers)
    "plugin:itgalaxy/module",
    "plugin:itgalaxy/browser",
    "plugin:itgalaxy/markdown",
  ],
};
  • AVA: Use this for projects that use the AVA.

Example of configuration:

module.exports = {
  extends: [
    "plugin:itgalaxy/esnext",
    // You can use "plugin:itgalaxy/commonjs" or "plugin:itgalaxy/dirty" (useful for bundlers)
    "plugin:itgalaxy/module",
    "plugin:itgalaxy/browser",
    "plugin:itgalaxy/ava",
  ],
};
  • Jest: Use this for projects that use the Jest.

Please read this ecmascript-modules for using jest with ECMA modules.

Example of configuration:

module.exports = {
  extends: [
    "plugin:itgalaxy/esnext",
    // You can use "plugin:itgalaxy/commonjs" or "plugin:itgalaxy/dirty" (useful for bundlers)
    "plugin:itgalaxy/module",
    "plugin:itgalaxy/browser",
    "plugin:itgalaxy/jest",
  ],
};

Example of configuration:

module.exports = {
  extends: [
    "plugin:itgalaxy/esnext",
    // You can use "plugin:itgalaxy/commonjs" or "plugin:itgalaxy/dirty" (useful for bundlers)
    "plugin:itgalaxy/module",
    "plugin:itgalaxy/node",
    "plugin:itgalaxy/jsdoc-typescript",
  ],
};

Examples

CommonJS

.eslintrc.js

"use strict";

module.exports = {
  extends: [
    "plugin:itgalaxy/esnext",
    "plugin:itgalaxy/commonjs",
    // Use "plugin:itgalaxy/browser" if you write code for browser or use them both if you write for both environments (you need bundler)
    "plugin:itgalaxy/node",
    "plugin:itgalaxy/jest",
    // Lint documentation
    "plugin:itgalaxy/markdown",
    // Uncomment to use jsdoc typescript
    // "plugin:itgalaxy/jsdoc-typescript",
  ],
  root: true,
};

ECMA modules

.eslintrc.js

export default {
  extends: [
    "plugin:itgalaxy/esnext",
    // You can change this on "plugin:itgalaxy/dirty" if you use `node-babel`, bundler and have mixed code with `import` and `require`
    "plugin:itgalaxy/module",
    // Use "plugin:itgalaxy/browser" if you write code for browser or use them both if you write for both environments (you need bundler)
    "plugin:itgalaxy/node",
    "plugin:itgalaxy/jest",
    // Lint documentation
    "plugin:itgalaxy/markdown",
    // Uncomment to use jsdoc typescript
    // "plugin:itgalaxy/jsdoc-typescript",
  ],
  root: true,
};

Application with ECMA modules and react

"use strict";

module.exports = {
  // You can use "plugin:itgalaxy/module" and remove "plugin:itgalaxy/module", "plugin:itgalaxy/dirty" and "plugin:itgalaxy/script"
  // if you use ECMA modules everywhere (preferable)
  // Configuration files and scripts
  extends: [
    "plugin:itgalaxy/esnext",
    "plugin:itgalaxy/commonjs",
    "plugin:itgalaxy/jest",
    // Lint documentation
    "plugin:itgalaxy/markdown",
    // Uncomment to use jsdoc typescript
    // "plugin:itgalaxy/jsdoc-typescript",
  ],
  overrides: [
    // Source code of application
    {
      files: ["src/**/*.[jt]s?(x)"],
      extends: [
        "plugin:itgalaxy/module",
        "plugin:itgalaxy/browser",
        "plugin:itgalaxy/react",
      ],
      env: {
        // Do you use `jquery`?
        // jquery: true
      },
    },
    // Tests and documentation
    {
      files: [
        "**/{tests,test,__tests__}/**/*.[jt]s?(x)",
        "**/?(*.)+(spec|test).[jt]s?(x)",
        "**/test-*.[jt]s?(x)",
        "**/*.{md,markdown,mdown,mkdn,mkd,mdwn,mkdown,ron}/**",
      ],
      extends: [
        "plugin:itgalaxy/dirty",
        "plugin:itgalaxy/node",
        "plugin:itgalaxy/browser",
        "plugin:itgalaxy/react",
      ],
    },
  ],
  root: true,
};

Changelog

License