TypeScript icon, indicating that this package has built-in type declarations

    0.3.5 • Public • Published

    Blueprint ESLint plugin

    Blueprint is a React UI toolkit for the web.

    This package contains the ESLint plugin for Blueprint. It provides custom rules which are useful when developing against Blueprint libraries.

    Key features:


    yarn add --dev @blueprintjs/eslint-plugin


    Simply add this plugin in your .eslintrc file to use the add the plugin. The plugin includes Blueprint-specific rules which enforce semantics particular to usage with @blueprintjs packages, but does not turn them on by default.


    plugins: [

    Rules-only usage

    To enable the Blueprint-specific rules, extend the plugin:@blueprintjs/recommended config inside the package:


    extends: [
    +    "plugin:@blueprintjs/recommended"



    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": {
            "@blueprintjs/classes-constants": ["error"]
    -const element = <div className="pt-navbar" />;
    +const element = <div className={Classes.NAVBAR} />;


    Enforce usage of Blueprint components over regular html components.

    • h1-6 -> H1-6
    • code -> Code
    • pre -> Pre
    • blockquote -> Blockquote
    • table -> HTMLTable
      "rules": {
        "@blueprintjs/html-components": ["error"],


    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"
        "@blueprintjs/icon-components": ["error"],
        // expanded syntax
        "@blueprintjs/icon-components": ["error", "component" | "literal"] // choose one


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


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

    Full Documentation | Source Code




    npm i @blueprintjs/eslint-plugin

    DownloadsWeekly Downloads






    Unpacked Size

    77.7 kB

    Total Files


    Last publish


    • blueprintjs