eslint-config-hjcostabr76

Custom eslint configurations

Usage no npm install needed!

<script type="module">
  import eslintConfigHjcostabr76 from 'https://cdn.skypack.dev/eslint-config-hjcostabr76';
</script>

README

eslint-config-hjcostabr76

Custom eslint configurations designed for typescript developing.

It's good for:

  • nodejs;
  • React JS;

It Will be good for (soon):

  • React Native;

Table of Contents

Principles

  1. Type Safety:

    Typescript is powerfull and awesome! Let's make it work for us!

  2. Less is more:

    We should write less. Less code means less places where a bug might emerge from. So whenever you can make it smaller and cleaner do It! (As far as it doesn't overrule principle #1).

  3. S.O.L.I.D. and Clean Code:

    Well, you know about it. Right?

How to

  • Installation:

    $ npm i -D eslint-config-hjcostabr76

  • Other dependencies:

    To use it you'll need ESLint Typescript parser and, ESLint packages to be installed.

  • Config file:

    With that all set you'll only need to build your project's eslint config file. It should look something like this:

    // .eslintrs.js

module.exports = {
    parserOptions: {
        project: './tsconfig.json',
        tsconfigRootDir: __dirname,
    },
    extends: [
        'hjcostabr76/ts-node'
    ],

    ...
}

Sub-packages

You can simply import it into your lint config. If you do this you will be getting general typescript rules only. All other configs derive from it (except spellcheck).


// .eslintrs.js

module.exports = {
    
    ...
    
    extends: 'hjcostabr76',

    ...
}

But what you probably want to do is to get some sub package(s). They are:

  • ts-node: Rules for NodeJS with typescript;
  • ts-package: Rules for writing your npm packages using typescript;
  • tsx: React with Typescript;
  • spellcheck: No need for description;

So your eslint config might come to look more like:


// .eslintrs.js

module.exports = {
    
    ...
    
    extends: [
        'hjcostabr76/ts-node',
        'hjcostabr76/spellcheck',
    ],

    ...
}

Soon there will be more sub packages for React

Used Plugins

This set of rules was built thanks to some good plugins presented by the community: