@sharegate/eslint-plugin NPM

`@sharegate/eslint-plugin`

ShareGate’s ESLint configs.

Installation

Install the package.

With npm

npm i --save-dev @sharegate/eslint-plugin

With yarn

yarn add --dev @sharegate/eslint-plugin

Usage

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

"extends": [ 
  "plugin:@sharegate/core", /* For all JavaScript projects */ 
  "plugin:@sharegate/typescript", /* For all TypeScript projects */ 
  "plugin:@sharegate/react", /* For all React projects */ 
  "plugin:@sharegate/nextjs", /* For all NextJS projects, includes plugin:@sharegate/react */ 
  "plugin:@sharegate/sort-imports", /* if you want to sort your import statements */ 
  "plugin:@sharegate/mdx", /* if you have *.mdx files */
  "plugin:@sharegate/lodash", /* if you use Lodash in your project */
  "plugin:@sharegate/jest", /* if you use Jest in your project */
  "plugin:@sharegate/testing-library", /* if you use React Testing Library in your project */
  "plugin:@sharegate/storybook",  /* if you use Storybook in your project */
  "plugin:@sharegate/storybook-csf",/* if you use Storybook with CSF Stories in your project */
]

If you want to use plugin-provided rules, you can do it like this:

"plugins": [
   "@sharegate"
],
"rules": {
   "@sharegate/prefer-cx": "warn"
}

If your project is NOT using TypeScript, you'll need to install @babel/eslint-parser and update your .eslintrc.js configuration file:

 npm i -D @babel/eslint-parser

.eslintrc.js

module.exports = {
    ...
    parser: "@babel/eslint-parser" /* (If your project is NOT in TypeScript) */
    extends: [
        "plugin:@sharegate/core",
        "plugin:@sharegate/nextjs"
        ...
    ],
    ...
};

Recipes

Simple TypeScript Project

{
  "extends": [
    "plugin:@sharegate/core",
    "plugin:@sharegate/sort-imports",
    "plugin:@sharegate/typescript"
  ]
}

React + TypeScript App

{
  "extends": [
    "plugin:@sharegate/core",
    "plugin:@sharegate/sort-imports",
    "plugin:@sharegate/react"
    "plugin:@sharegate/typescript",
  ]
}

NextJs App

{
  "extends": [
    "plugin:@sharegate/core",
    "plugin:@sharegate/sort-imports",
    "plugin:@sharegate/typescript",
    "plugin:@sharegate/nextjs"
  ]
}

React + TypeScript App with Storybook and Jest/Testing-library

{
  "extends": [
    "plugin:@sharegate/core",
    "plugin:@sharegate/sort-imports",
    "plugin:@sharegate/react"
    "plugin:@sharegate/typescript",
    "plugin:@sharegate/jest",
    "plugin:@sharegate/testing-library",
    "plugin:@sharegate/storybook",
    "plugin:@sharegate/storybook-csf"
  ]
}

Provided Configurations

Language/Framework-specific configs.

Language/Framework	Config	Description
JavaScript - core	"plugin:@sharegate/core"	Use this for all JavaScript/TypeScript projects.
JavaScript - sort-imports	"plugin:@sharegate/sort-imports"	Use this for JavaScript/TypeScript projects.
typescript	"plugin:@sharegate/typescript"	Use this for TypeScript projects.
react	"plugin:@sharegate/react"	Use this for React projects.
nextjs	"plugin:@sharegate/nextjs"	Use this for NextJs projects.
mdx	"plugin:@sharegate/mdx"	Use this for mdx files.

Third-party-specific configs.

Third party	Config	Description
lodash	"plugin:@sharegate/lodash"	Use this for projects using lodash.
jest	"plugin:@sharegate/jest"	Use this for projects using jest.
testing-library	"plugin:@sharegate/testing-library"	Use this for projects using testing-library.
storybook	"plugin:@sharegate/storybook"	Use this for projects using storybook.
storybook-csf	"plugin:@sharegate/storybook-csf"	Use this for projects using storybook but with the CSF format. Must be used with the other storybook config

Plugin-Provided Rules

This plugin provides the following custom rules, which are included as appropriate in all core linting configs:

prefer-cx: Prefer cx over classnames as the name of classnames imports.
restrict-full-import: Prevent importing the entirety of a package.
strict-css-modules-names: CSS modules should have the same file name (minus the file extension) as the scoped component and be located in the same folder.