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

practical-tslint-config

v1.0.8

Published

A TSLint ruleset based on the Airbnb style guide, Prettier, and practicality

Downloads

3

Readme

A TSLint ruleset based on the Airbnb JavaScript style guide, Prettier, and TypeScript best practices.

Goal

To build a ruleset that promotes consistency, efficiency, optimized code, and most of all to not get in the developer's way.

Installation

npm install practical-tslint-config --save-dev

Usage

The only thing that your tslint.json should consist of:

{
  "extends": "practical-tslint-config"
}

Some of the rules in the set require type info. Therefore when you run the linter via CLI, specifying the --project flag is recommended.

tslint --project tsconfig.json --config tslint.json

Prettier

This ruleset is specifically designed to not lint for any rules that you can set (and automatically fix) through Prettier. Therefore it is highly recommended that you configure Prettier for your project with this custom configuration.

npm install prettier prettier-airbnb-config --save-dev

Custom Rules

The Airbnb JavaScript style guide does an excellent job of being a mostly reasonable guide to JavaScript. However, linting rules don't exist for every recommendation in the style guide nor do they capture all of TypeScript's nuances. Furthermore, a fair number of rules can be fixed using Prettier. Therefore the other rules that this configuration lints for that aren't outlined in the Airbnb guide are mentioned here.

Imports

  • c1.1 Requires that import statements be alphabetized and grouped.

    // bad
    import {bar, foo} from '../zxy';
    import Abc from '../Xyz';
    
    // good
    import Abc from '../Xyz';
    import {bar, foo} from '../zxy';

Variables

  • c2.1 Variables initialized with let or destructuring initializer should not be assigned to undefined.

Values in JavaScript default to undefined. There’s no need to do so manually.

// bad
let a = undefined;

// good
let a;

  • c2.2 Disallows shadowing variable declarations.

    When a variable in a local scope and a variable in the containing scope have the same name, shadowing occurs. Shadowing makes it impossible to access the variable in the containing scope and obscures to what value an identifier actually refers.

    // bad
    const a = 'no shadow';
    function print() {
      const a = 'shadow'; // TSLint will complain here.
      console.log(a);
    }
    print(); // logs 'shadow'.
    
    // good
    const a = 'no shadow';
    function print() {
      console.log(a);
    }
    print(); // logs 'no shadow'.

Classes

  • c3.1 Requires explicit visibility declarations for class members.

    Members lacking a visibility declaration may be an indication of an accidental leak of class internals.

    // bad
    class Foo {
      bar: string;
    }
    
    // good
    class Foo {
      private bar: string;
    }

  • c3.2 Enforces member ordering.

    A consistent ordering for class members can make classes easier to read, navigate, and edit.

    // bad
    class Foo {
      public bar() {
        ...
      }
      private abc: string;
      public static xyz: boolean;
    }
    
    // good
    class Foo {
      public static xyz: boolean;
      private abc: string;
    
      public bar() {
        ...
      }
    }

  • c3.3 Warns if super() appears twice in a constructor.

    The second call to super() will fail at runtime.

    // bad
    class Foo extends Bar {
      public constructor() {
        super();
        super();
      }
    }
    
    // good
    class Foo extends Bar {
      public constructor() {
        super();
      }
    }

Interfaces

  • c4.1 Forbids empty interfaces.

    // bad
    interface Foo {}
    
    // good
    interface Foo {
      foo: string;
    }

  • c4.2 Requires interface names to not have an “I” prefix

    // bad
    interface IFoo {}
    
    // good
    interface Foo {
      foo: string;
    }

Functions

  • c5.1 Disallows empty blocks.

    Empty blocks are often indicators of missing code.

    // bad
    function foo() {}
    
    // good
    function foo() {
      if (conditional) {
        ...
      }
    }

Maintainability

  • c6.1 Disallows use of the null keyword literal.

    To remove confusion over the two similar values, it’s better to stick with just undefined.

    // bad
    let a: string | null;
    
    // good
    let a: string | undefined;

  • c6.2 Disallows non-null assertions using the ! postfix operator.

    Using non-null assertion cancels the benefits of the strict null checking mode.

    // bad
    function foo(instance: MyClass | undefined) {
      instance!.doWork();
    }
    
    // good
    function foo(instance: MyClass | undefined) {
      if (instance !== undefined) {
        instance.doWork();
      }
    }