npm

npm’s 2019 JavaScript ecosystem survey analysis is now available!Get your copy here »

@blueprintjs/tslint-config

1.8.0 • Public • Published

Blueprint TSLint configuration

Blueprint is a React UI toolkit for the web.

This package contains configuration for TSLint (the TypeScript linter) and a handful of new rules specifically for use when developing against Blueprint libraries.

Key features:

Installation

yarn add @blueprintjs/tslint-config tslint

Usage

Simply extend this package in your tslint.json to use the default rules configuration. This configuration includes Blueprint-specific rules which enforce semantics particular to usage with @blueprintjs packages.

tslint.json

{
  "extends": "@blueprintjs/tslint-config"
}

Rules-only usage

To enable the Blueprint-specific rules only without the full TSLint config, extend the blueprint-rules config inside the package:

tslint.json

{
  "extends": [
+   "@blueprintjs/tslint-config/blueprint-rules"
  ]
}

Editor integration

⭐️ VS Code: Enable the tslint.autoFixOnSave option to fix all fixable failures every time you save. Most importantly, this will automatically apply the Prettier formatting fixes!

Rules

blueprint-classes-constants

Enforce usage of Classes constants over namespaced string literals.

Each @blueprintjs package exports a Classes object that contains constants for every CSS class defined by the package. While the values of the constants may change between releases, the names of the constants will remain more stable.

{
  "rules": {
    "blueprint-classes-constants": true,
  }
}
-const element = <div className="pt-navbar" />;
+const element = <div className={Classes.NAVBAR} />;

blueprint-icon-components

Enforce usage of JSX Icon components over IconName string literals (or vice-versa) in icon JSX props. Note that this rule only supports hardcoded values in the icon prop; it does not handle expressions or conditionals.

A fixer is available for this rule that will convert between string literals and named Icon components. Note that the implementation is naive and may require intervention, such as to import a component or fix an invalid name.

Named icon components (TickIcon, GraphIcon, etc) can be imported from the @blueprintjs/icons package.

This rule is disabled in the blueprint-rules config as it is most useful to ensure that the @blueprintjs/icons package can be tree-shaken (an opt-in process which requires using components and never IconName literals).

{
  "rules": {
    // default uses "component"
    "blueprint-icon-components": true,
    // expanded syntax
    "blueprint-icon-components": {
      "options": ["component" | "literal"] // choose one
    }
  }
}

"component"

-<Button icon="tick" />
+<Button icon={<TickIcon />} />

"literal"

-<Button icon={<GraphIcon />} />
+<Button icon="graph" />

Full Documentation | Source Code

Keywords

none

install

npm i @blueprintjs/tslint-config

Downloadsweekly downloads

3,521

version

1.8.0

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability