eslint-plugin-app-copy

An ESLint plugin to enforce Geckoboard's in-house style guide for application copy.

Installation

Assuming you already have ESLint installed in your project, simply run:

npm install --save-dev https://github.com/geckoboard/eslint-plugin-app-copy@latest

Configuration

Within your .eslintrc file you'll need to add this plugin to the plugins section, and add the additional rules:

{
    plugins: ['app-copy'],
    rules: {
        'app-copy/no-apologies': 'warn',
        'app-copy/prefer-rsquo': 'error',
        'app-copy/use-em-dash': 'error',
        'app-copy/use-en-dash': 'error',
        'app-copy/use-hyphen': 'error',
    }
}

Rules

no-apologies

This rule discourages the use of the word "sorry" in messages. Although it's sometimes included in user-facing error messages, most of the time we don't have any control over the cause of the error, so at Geckoboard we discourage its use.

valid

const stringLiteral = "Your upload failed. Please try again.";

invalid

const stringLiteral = "Sorry, your upload failed.";
const templateString = `We are sorry ${name}, but something went wrong!`;

prefer-rsquo

This rule encourages the use of the right single quote ’ (’) over ' (') in text. This rule is auto fixable.

valid

const MyComponent = () => (<span>That’s Leo’s mug!</span>);
const stringLiteral = "You don’t have permission to do that!";
const templateString = `Matt’s cat is ${name}`;

invalid

const MyComponent = () => (<span>That's Leo's mug!</span>);
const stringLiteral = "You don't have permission to do that!";
const templateString = `Matt's cat is ${name}`;

use-em-dash

This rule encourages the use of an em-dash (—) for parenthetical breaks between words, rather than a hyphen (-) or en-dash (–). This rule is auto fixable.

valid

const stringLiteral = "A good — dash";
const MyComponent = () => (<span>A good — dash in JSX</span>);

invalid

const stringLiteral = "A bad - hyphen";
const stringLiteral = "A bad – endash";
const stringLiteral = "no double -- dashes";

use-en-dash

This rule encourages the use of an en-dash (–) for numeric ranges, with no surrounding spaces, rather than a hyphen (-) or em-dash (—). This rule is auto fixable.

valid

const stringLiteral = "A good 0–9 endash";
const MyComponent = () => (<span>A good 0–9 endash in JSX</span>);

invalid

const stringLiteral = "A hyphen 0-9";
const stringLiteral = "An emdash 0—9";
const stringLiteral = "Correct dash but spaces 0 - 9";

use-hyphen

This rule encourages the use of a hyphen (-) for compound words, rather than an en-dash (–) or em-dash (—). This rule is auto fixable.

valid

const stringLiteral = "A good-hyphen";
const MyComponent = () => (<span>A good-hyphen</span>);

invalid

const stringLiteral = "A bad–endash";
const stringLiteral = "A bad—emdash";