Giter Site home page Giter Site logo

eslint-config-isiahmeadows's Introduction

eslint-config-isiahmeadows

Build Status

My ESLint preset for most of my projects (and all new ones I create). You can look into each of the files to see what all the rules are. And yes, this project uses itself as its own ESLint config (and works).

This is a global package for anyone who wants to use my config and/or agrees with my code style opinions.

Do note that this is still 0.x and very specific to my projects, so if you depend on this, it's best to specify at least a minor version for any stability.

Usage

  1. Install ESLint and this module.

    npm install --save-dev eslint eslint-plugin-isiahmeadows
    
  2. Create an .eslintrc file with one of these presets.

    ---
    extends: isiahmeadows/node
  3. Code away! ๐Ÿ˜„

And if there's something you feel doesn't quite fit your style, it's a preset. You can make all the changes you feel you need.

Although, why would you? It's readymade for you to start. Kinda like Standard.

Why not Standard?

Although I agree with some things, like skipping semicolons, spacing keywords, or strict checking except for == null, there are things I don't agree with:

  • Two spaces make the pyramid of doom a bit less steep, so it's not as obvious of a problem to fix. This is a bad thing. This set of presets uses an indent of 4 spaces, to make this much more clear.

  • Double quotes are better than single quotes. I use apostrophes much more often than quotes. You can still use the latter to avoid escaping.

  • Adding a space after the name of a named function isn't consistent with calling that function. That's ugly in my opinion.

  • Prefixing browser methods with window. gets repetitive and annoying after a while. All it does is increase boilerplate without adding anything meaningful.

I also feel a few things were missed, like max line length, function length, or block depth. I limit those to 80 characters, 25 statements, and 4 levels (excluding functions), respectively. This helps further make it easier and clearer to keep your functions small and simple. In my experience, 99% of the issues I have with this are fixable through refactoring.

Tips

  • Keep your function names concise and self-descriptive. Common abbreviations are generally acceptable if it's very clear from context and the variable is only used in a small scope, but don't take this to an extreme (e.g. xs is not a preferable name for a list, but i for a loop index is okay). Here's a few examples:

    // Bad
    function copyOwnProperties(destination, source) {
        for (var property in source) {
            if ({}.hasOwnProperty.call(source, property)) {
                destination[property] = source[property]
            }
        }
    }
    
    function clearNode(parentNode) {
        while (parentNode.firstChild) {
            parentNode.removeChild(parentNode.firstChild)
        }
    }
    
    function forEach(array, callback) {
        for (var index = 0; index < array.length; index++) {
            callback(array[index], index)
        }
    }
    
    // Better
    function assign(dest, src) {
        for (var key in src) if ({}.hasOwnProperty.call(src, key)) {
            dest[key] = src[key]
        }
    }
    
    function clear(node) {
        while (node.firstChild) node.removeChild(node.firstChild)
    }
    
    function forEach(list, func) {
        for (var i = 0; i < list.length; i++) {
            func(list[i], i)
        }
    }
  • Do heed the various limits. Trust me in that even though it makes callbacks slightly inconvenient at times, it makes stack traces more meaningful, and it makes it easier to reason about the code. I'd rather slightly unwieldy callbacks over slightly convoluted logic.

Presets

Each of these refer to files within this directory, with all the merging magic in ./merge.js. And do note that each of these are standalone presets.

  • isiahmeadows (isiahmeadows/index)

    The base preset for everything here. If you need some custom magic in your .eslintrc, just extend this file. Most of the rest of the rules are minor variations of this, and only exist to target a more specialized use case.

    Do note that this enables function-level strict mode, not global, by default.

  • isiahmeadows/browser, isiahmeadows/worker

    Presets for my web projects. If either of these are used with anything else, like in Browserify, include this first (e.g. with isiahmeadows/node or isiahmeadows/commonjs), because many other configs have overrides for this.

  • isiahmeadows/commonjs

    A preset for anything that works with CommonJS, but is otherwise platform-agnostic (it doesn't need any browser/Node APIs). Generally used for utility libraries without dependencies that consist of multiple files.

  • isiahmeadows/compat

    A preset for anything requiring ES3 support or support for older browsers. It also checks some IE quirks. If any other presets are used, this should be included last.

  • isiahmeadows/es6

    A preset for using ES6 (with Babel). It supports modules as well as everything else.

  • isiahmeadows/node

    A preset for Node. It doesn't include all the Node 4+ stuff, and includes 0 support for ES6. For that, use isiahmeadows/node-4.

  • isiahmeadows/node-4

    A preset for Node 4 and later. It includes all the parts of ES6 that Node 4 supports, and the relevant ES6 rules also set in isiahmeadows/es6.

API

You can use these programmatically use each of these in your own .eslintrc.js, and merge them however you want. Each of these presets without the base preset can be retrieved from isiahmeadows/base/{preset-name}, with exception of the base preset itself. And if you need to combine rules, you can use merge.js to do whatever you need. This utility is also used to create the presets themselves.

// Equivalent to the following .eslintrc.yml:
//
// extends:
//     - isiahmeadows/node
//     - isiahmeadows/es6

var merge = require("eslint-config-isiahmeadows/merge")

module.exports = merge(
    require("eslint-config-isiahmeadows"),
    require("eslint-config-isiahmeadows/base/node"),
    require("eslint-config-isiahmeadows/base/es6"))

eslint-config-isiahmeadows's People

Contributors

dead-claudia avatar

Watchers

 avatar

eslint-config-isiahmeadows's Issues

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.