Skip to main content

Quick Start

Follow these steps to quickly set up ESLint Plugin Boundaries in your project. Then you can explore more advanced configurations to fit your project's needs in the Setup section.

1. Installation​

If you have not installed them yet, install ESLint and ESLint Plugin Boundaries:

npm install eslint eslint-plugin-boundaries --save-dev

2. Register the Plugin​

Once installed, enable the plugin in your eslint.config.js file:

import boundaries from "eslint-plugin-boundaries";

export default [
  {
    plugins: {
      boundaries,
    },
  }
];

3. Define your Element Types​

The plugin needs to identify the elements in your project. To do so, define your element types using the boundaries/elements setting.

These patterns determine how each file or dependency is classified.

tip

Read the Elements section for guidance on how to define the patterns for the elements in your project.

import boundaries from "eslint-plugin-boundaries";


export default [
  {
    plugins: {
      boundaries,
    },
    settings: {
      "boundaries/elements": [
        { type: "controllers", pattern: "controllers/*" },
        { type: "models", pattern: "models/*" },
        { type: "views", pattern: "views/*" }
      ],
    },
  }
];
info

This is only a basic example of configuration. The plugin can be configured to identify elements being a file, or elements being a folder containing files. It also supports capturing path fragments to be used afterwards on each rule, etc.

4. Apply Predefined Rules​

Apply one of the predefined rule configurations as a starting point by extending it in your rules section.

tip

You should use recommended config in already existing projects to gradually introduce the rules without too many errors at once, because it does not require all files in the project to belong to an element type. For new projects, you can use strict config to ensure all files belong to an element type from the beginning.

import boundaries from "eslint-plugin-boundaries";


export default [
  {
    plugins: {
      boundaries,
    },
    settings: {
      "boundaries/elements": [
        { type: "controllers", pattern: "controllers/*" },
        { type: "models", pattern: "models/*" },
        { type: "views", pattern: "views/*" }
      ],
    },
    rules: {
      ...boundaries.configs.recommended.rules,
    },
  },
];

5. Set Dependency Rules​

Now you can define your own dependency rules by using the boundaries/element-types rule.

tip

Read how to use Element Selectors to configure your rules in more detail.

import boundaries from "eslint-plugin-boundaries";


export default [
 {
   plugins: {
     boundaries,
   },
   settings: {
     "boundaries/elements": [
       { type: "controllers", pattern: "controllers/*" },
       { type: "models", pattern: "models/*" },
       { type: "views", pattern: "views/*" }
     ],
   },
   rules: {
     ...boundaries.configs.recommended.rules,
     "boundaries/element-types": [2, {
       default: "disallow",
       rules: [
         {
           from: "controllers",
           allow: ["models", "views"]
         },
         {
           from: "views",
           allow: ["models"]
         },
         {
           from: "models",
           disallow: ["*"]
         }
       ]
     }]
   },
 },
];

6. Next Steps​

You are all set! Now you can start enforcing architectural boundaries in your project 🎉

From here you can: