@sharegate/eslint-plugin

v3.2.0

Published

a year ago

Sharegates ESLint rules and configs.

0High
0Medium
0Low

sharegate eslint eslintconfig eslintplugin eslint-config eslint-plugin

`@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.