Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

eslint-plugin-moxio

Package Overview
Dependencies
Maintainers
0
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

eslint-plugin-moxio

Custom rules for ESLint as used at Moxio

  • 4.7.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

CI NPM version

eslint-plugin-moxio

Custom rules for ESLint, as used at Moxio.

Installation

This library can be installed from the NPM package registry. You'll first need to install ESLint:

npm install --save-dev eslint

Next, install eslint-plugin-moxio:

npm install --save-dev eslint-plugin-moxio

You can also use Yarn; replace npm install --save-dev by yarn add --dev in that case.

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

Usage

This plugin is meant to be used with ESLint. Add moxio to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "moxio"
    ]
}

Then configure the rules you want to use under the rules-key. See the next section for available rules and their options.

{
    "rules": {
        "moxio/rule1": "error",
        "moxio/rule2": [ "warning", {
            "configProp": "value"
        } ]
    }
}

Provided rules

restrict-css-class-usage-to-files

Rule that restricts certain CSS classes so that they may only be referenced from a given set of allowed files. This includes:

  • Usage of CSS class in className prop in React Component: <div className={"$"} />
  • Declaration of CSS class in array: const x = [ $ ];
  • Pushing of CSS class to array: css_classes.push($);
  • Usage of CSS class as key in an object: const obj = {$: true};
  • Usage of CSS class in an object property: const obj = { "class": $ };

These rules are also applied to template strings.

Configuration

The cssClasses configuration property is an object with the restricted CSS classes as keys, and an array of file path patterns (regular expressions) in which that CSS class may be used as the values. Windows file paths will automatically be normalized to use / directory separators before matching them against the patterns, so those can be configured using only / as a directory separator.

As an example, the following rule enforces that the foo CSS class may only be used in any javascript file, or in the dir/Foo.tsx file.

{
    "rules": {
        "moxio/restrict-css-class-usage-to-files": [
            "error",
            {
                "cssClasses": {
                    "foo": [
                        "/(.*)\\.js$",
                        "/dir/Foo\\.tsx$"
                    ]
                }
            }
        ]
    }
}
Motivation

This plugin is mainly useful to enforce the use of standardized components in a design system. For example, if you have a button in your design system with CSS class acme-button and a standardized implementation of that button as a React or Vue component, you probably don't want people to make their own custom implementations of acme-button. For such cases you could limit usage of the acme-button CSS class to only e.g. /components/Button.tsx or /components/Button.vue. Of course, this only works if your CSS classes are specific enough.

prefer-useref-function-components

Rule that warns if React.createRef() is used in a function component, instead of the preferred useRef hook.

Configuration
{
    "rules": {
        "moxio/prefer-useref-function-components": "warn",
    }
}
Motivation

This plugin is mainly useful when switching from class components to function components.

restrict-import-from-source

Rule that can restrict importing certain identifiers from a source. For example, you could warn if somebody tries to import Difference from the js-struct-compare package.

Configuration
{
	"rules": {
		"moxio/restrict-import-from-source": [
			"warn",
			{
				"sources": {
					"js-struct-compare": {
						"identifiers": [
                            "Difference"
					    ],
                        "message": "{{ identifier }} on {{ source }} has been restricted"
                    }
				}
			}
		]
	}
}
Motivation

We use this plugin ourselves when we use a library but want to prevent certain imports from it that have unexpected side effects.

Versioning

This project adheres to Semantic Versioning.

Contributing

Contributions to this project are more than welcome.

License

This project is released under the MIT license.


Made with love, coffee and fun by the Moxio team from Delft, The Netherlands. Interested in joining our awesome team? Check out our vacancies (in Dutch).

Keywords

FAQs

Package last updated on 08 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc