npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

eslint-config-isiahmeadows

v0.1.8

Published

My default eslintrc, for anyone who likes my opinion.

Downloads

48

Readme

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! :smile:

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"))