@meow-double/eslint v1.0.1

Eslint config🧹

This npm package include eslind config for your code.

Install

Use this command to set the stylelint configure

npm i -D @meow-double/eslint

ℹ️INFO
Add the npm package as a dev dependency

The library allows you to use TypeScript (TS) at once thanks to @typescript-eslint/parser

How use

1. Create a file named .eslintrc.cjs in the root of the directory

ℹ️INFO
File must contain the .cjs extension, since commonjs is supported

2. Import the eslint configuration and export it externally properly

Example of use

The @meow-double/eslint library provides you with an eslint function that returns the desired config. You can also pass a customized config as an argument, which will change the eslint-config itself from the outside. If you don't need to change anything externally, the default settings will be used.

const { eslint } = require('eslint-old');

module.exports = eslint({});

Transmitted parameters

All arguments are passed as properties of the object

ℹ️INFO
Of course, this package will not be able to give you flexible configuration settings. If you are using this package, you probably don't need flexible configuration. Otherwise, use your own configuration

Default values that are passed automatically when executing the eslint function

{
    test: null,
    storybook:false,
    allRules:{}
}

Flexible customization of the defaultRules argument

The object is passed with all the rules and their values that you would like to change. Rules of used plugins are also supported. The list of used plugins is provided below in the documentation.

Example

'max-len': ['error', { ignoreComments: true, code: 100 }],
'no-useless-assignment': 'off',
'require-await': 'error',
'no-unused-vars': 'warn',
'react/jsx-props-no-spreading': 'off',
'react/no-array-index-key': 'error'

Script

You need to add script on your package.json
For JS

    "lint:js": "npx eslint --config .eslintrc.cjs \"src/**/*.{js,jsx}\"",
    "lint:js:fix": "npx eslint --config .eslintrc.cjs \"src/**/*.{js,jsx}\" --fix"

    "lint:ts": "npx eslint --config .eslintrc.cjs \"src/**/*.{ts,tsx}\"",
    "lint:ts:fix": "npx eslint --config .eslintrc.cjs \"src/**/*.{ts,tsx}\" --fix",

All the rules used

• 5 used plugins
• 1 custom plugin
• 1 parser

All plugins: 7

ℹ️INFO
By default, ready-made rule sets from the plugins themselves are used

 extends: [
      'eslint:recommended',
      'plugin:@typescript-eslint/recommended',
      'plugin:react-hooks/recommended',
      'plugin:react/recommended',
    ],

Base rules

Eslint-plugin-react

Eslint-plugin-react-hooks

Eslint-plugin-import

Eslint-plugin-simple-import-sort

Object options:

 {
      groups: [
        // External packages:
        ['^react', '^@?\\w'],
        // Alias imports:
        ['^@(([\\/.]?\\w)|assets|test-utils)'],
        // Side effect imports:
        ['^\\u0000'],
        // Parent imports:
        ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
        // Other relative imports:
        ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
        // Style imports:
        ['^.+\\.s?css$'],
        // Svg icons imports:
        ['^.+\\.svg$'],
      ],
    }

@typescript-eslint/eslint-plugin

Custom plugin

The rule prohibits the use of two react components in one file

❌Example of incorrect code

export const App = () => {
    return <div><SecondaryComponent /></div>
}

const SecondaryComponent = () => <p>This is a secondary component</p>

✅Example of correct code

import { SecondaryComponent } from "@/components";

export const App = () => {
    return <div><SecondaryComponent /></div>
}