Giter Club home page Giter Club logo

eslint-config-himynameisdave's Introduction

eslint-config-himynameisdave

๐Ÿ“„ An opinionated ESLint config, by and for himynameisdave.


A modular, opinionated, and well-maintained eslint config made by and for himynameisdave. Made of small configs which can be composed together to achieve a linting setup that is project-aware.

Contents

Requirements

Requires at least:

  • Node v14.x+
  • ESLint v8.x+

Installation

Install this eslint and this config:

yarn add -D eslint eslint-config-himynameisdave

You will need to install more plugins depending on which environment you are targeting/which extra plugins you want to use (see configurations below). You may also need a parser. Read on for more about how to get set up.

Configurations

This package provides various configurations which you can extend from. You may need to install additional plugins in order to use them.

Core

The base config turns enables the core eslint rules only. No additional plugins are required to use this config. Great for small projects.

// Extend your .eslintrc
{
  "extends": ["himynameisdave/configurations/core"]
}

Node

Extend this config with additional rules for Node projects. Useful for CLI/Node-only projects, although it should be compatible with the browser-based configurations listed below.

# Add the following plugins
yarn add -D eslint-plugin-node eslint-plugin-promise eslint-plugin-unicorn
// Extend your .eslintrc
{
  "extends": [
    "himynameisdave/configurations/core",
    "himynameisdave/configurations/node"
  ]
}

Typescript

Extend this config for Typescript support. Compatible with other configurations in this project, although Typescript should probably be extended last. Requires some additional configuration, as it has it's own parser.

# Add the following plugins
yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-typescript
// Extend your .eslintrc
{
  "extends": [
    "himynameisdave/configurations/core",
    "himynameisdave/configurations/typescript"
  ],
  "parserOptions": {
    "sourceType": 'module',
    "tsconfigRootDir": __dirname,
    "project": './tsconfig.json'
  },
  "settings": {
    'import/parsers': {
      '@typescript-eslint/parser': [
        '.ts',
        '.tsx', // Only needed if using React
      ]
    },
    'import/extensions': [
      '.ts',
      '.tsx', // Only needed if using React
    ],
    'import/resolver': {
      typescript: {
        'alwaysTryTypes': true,
      },
    },
  },
  //  If you are also using the node or import configurations, you'll want these rules off:
  rules: {
    'import/extensions': 'off',
    'node/file-extension-in-import': 'off',
    'node/no-unsupported-features/es-syntax': 'off',
  }
}

React

Extends the base config with React support. This config may conflict with the Node config, so should be placed after it if using both.

# Add the following plugins
yarn add -D eslint-plugin-promise eslint-plugin-unicorn eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y
//  Extend your .eslintrc
{
  "extends": [
    "himynameisdave/configurations/core",
    "himynameisdave/configurations/react",
    "himynameisdave/configurations/typescript" // If using Typescript, it should come last.
  ]
}

Svelte

Extends the base config with React support. This config may conflict with the Node config, so should be placed after it if using both.

# Add the following plugins
yarn add -D eslint-plugin-promise eslint-plugin-unicorn eslint-plugin-svelte3
//  Extend your .eslintrc
{
  "extends": [
    "himynameisdave/configurations/core",
    "himynameisdave/configurations/svelte"
  ]
}

You may need to read more about configuring your editor for this plugin to work.

Note: You probably shouldn't use the import config below if you're using Svelte, as it has been known not to work properly.

Import

Extends the base config with import plugin rules.

# Add the following plugin
yarn add -D eslint-plugin-import
//  Extend your .eslintrc
{
  "extends": [
    "himynameisdave/configurations/core",
    "himynameisdave/configurations/import"
  ]
}

Jest

Extends the base config with jest plugin rules.

# Add the following plugin
yarn add -D eslint-plugin-jest
//  Extend your .eslintrc
{
  "extends": [
    "himynameisdave/configurations/core",
    "himynameisdave/configurations/jest"
  ]
}

Off

In addition to all of these, there is an off config which you can use to turn off all rules. Not sure there are a ton of use-cases for this, but it would allow you to extend from individual rulesets, like so:

//  .eslintrc
{
  "extends": [
    "himynameisdave/configurations/off",
    "himynameisdave/rules/promises/on",
    "himynameisdave/rules/unicorn/on"
  ]
}

Rules

Note that in addition to extending a configuration, you can also extend various rulesets. This gives you very granular control of your project.

As an example, let's assume we are using React but don't care about the jsx-a11y rules:

//  .eslintrc
{
  "extends": [
    "himynameisdave/configurations/core",
    "himynameisdave/rules/promises/on",
    "himynameisdave/rules/unicorn/on",
    "himynameisdave/rules/react/on",
    "himynameisdave/rules/react-hooks/on",
    "himynameisdave/rules/jsx-a11y/off", // We don't technically need to add this, but note that there are `off` versions for each.
  ]
}

Parser

You may need to install the babel-eslint parser to use some of the configurations exported by this package, unless you are using TypeScript (see Typescript configuration above).

yarn add -D babel-eslint

What is babel-eslint?

babel-eslint allows you to lint ALL valid Babel code with the fantastic ESLint.

ESLint's default parser and core rules only support the latest final ECMAScript standard and do not support experimental (such as new features) and non-standard (such as Flow or TypeScript types) syntax provided by Babel. babel-eslint is a parser that allows ESLint to run on source code that is transformed by Babel.

Note: You only need to use babel-eslint if you are using Babel to transform your code. If this is not the case, please use the relevant parser for your chosen flavor of ECMAScript (note that the default parser supports all non-experimental syntax as well as JSX).

Note: babel-config expects that you've got a @babel/core and .babelrc (or other config file) in your project. Read more about that here.

Releases

Read more about the release guidelines for this project over here.

Inspiration

Inspired very heavily by eslint-config-7geese, which was in turn inspired by eslint-config-walmart, eslint-config-formidable, and many others.

Some neat ESLint stuff

License

FOSSA Status

eslint-config-himynameisdave's People

Contributors

dependabot[bot] avatar fossabot avatar himynameisdave avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.