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

@nitpik/javascript

v0.4.0

Published

A pluggable JavaScript source code formatter

Downloads

422

Readme

Nitpik JavaScript Formatter

by Nicholas C. Zakas

Node CI

If you find this useful, please consider supporting my work with a donation.

Description

A pluggable JavaScript source code formatter.

Status

Prototype - Seeking feedback and not ready for production use.

Automatic Formatting

By default, Nitpik JavaScript automatically makes the following changes:

  1. Collapses whitespace. Use a single space anywhere there's more than one space or other whitespace characters.
  2. Removes trailing whitespace. Remove whitespace that appears before a line break.
  3. Normalizes comma spacing. Spaces before commas are removed and spaces after commas are added where expected (spaces are not added when the comma is immediately followed by a line break).
  4. Normalizes semicolon spacing. Spaces before semicolons are removed and spaces after semicolons are added where expected (spaces are not added when the semicolon is immediately followed by a line break).

Usage

Node.js

Install using [npm][npm] or [yarn][yarn]:

npm install @nitpik/javascript --save

# or

yarn add @nitpik/javascript

Import into your Node.js project:

// CommonJS
const { JavaScriptFormatter } = require("@nitpik/javascript");

// ESM
import { JavaScriptFormatter } from "@nitpik/javascript";

Deno

Import into your Deno project:

import { JavaScriptFormatter } from "https://unpkg.com/@nitpik/javascript/dist/pkg.js";

Browser

Import into a browser script:

import { JavaScriptFormatter } from "https://unpkg.com/@nitpik/javascript/dist/pkg.js";

API

After importing, create a new instance of JavaScriptFormatter. The constructor accepts one argument which is a configuration object with the following keys:

  • style - formatting options
    • collapseWhitespace - whether multiple spaces in a row should be collapsed into one (default: true)
    • emptyLastLine - should the input end with a line break (default: true)
    • indent - either the character to use for indents or the number of spaces (default: 4)
    • lineEndings - the line ending format, either "windows" or "unix" (defualt: "unix")
    • maxEmptyLines - the maximumn number of empty lines allowed before collapsing (default: 1)
    • maxLineLength - the maximum length of a line before wrapping (defualt: Infinity)
    • quotes - the style of quotes to use, either "single" or "double" (default: "double")
    • semicolons - whether or not to use semicolons (default: true)
    • tabWidth - the number of spaces to count for each tab character (defualt: 4)
    • trailingCommas - whether trailing commas should be used for multiline object and array literals (default: false)
    • trimTrailingWhitespace - should trailing whitespace be removed (default: true)
  • plugins - Optional. An array of plugins (see below for examples).

For example:

const formatter = new JavaScriptFormatter({
    style: {
        indent: "\t",
        quotes: "single"
    }
});

const result = formatter.format(yourJavaScriptCode);

Plugins

A plugin is a function that accepts one parameter, context, and returns an object specifying the types of nodes to visit in a JavaScript abstract syntax tree (AST). Here's an example that ensures there's an empty line before each function declaration:

function emptyLineBeforeFunctions(context) {

    const { layout } = context;

    return {
        FunctionDeclaration(node) {
            layout.emptyLineBefore(node);
        }
    };
}

This function uses the context.layout property to specify that there should be an empty line before each function declaration node. FunctionDeclaration is the type of node to look for, as defined by ESTree. The node is passed as an argument to each method as the AST is traversed, so in this example, node represents a function declaration. You can then include the function in the plugins array of the configuration options:

const formatter = new JavaScriptFormatter({
    style: {
        indent: "\t",
        quotes: "single"
    },
    plugins: [
        emptyLineBeforeFunctions
    ]
});

const result = formatter.format(yourJavaScriptCode);

When the formatter is run, it will now run any specified plugins after a first-pass of formatting based on the style options. This makes it easy to define a default style and then modify it to suit your needs.

All of the style options are implemented internally as plugins. Please see the src/plugins directory for examples (documentation to come later).

Developer Setup

  1. Ensure you have Node.js 12+ installed
  2. Fork and clone this repository
  3. Run npm install
  4. Run npm test to run tests

License and Copyright

This code is licensed under the Apache 2.0 License (see LICENSE for details).

Copyright Human Who Codes LLC. All rights reserved.