eslint-plugin-vue-fsd

A custom ESLint plugin for enforcing FSD patterns in Vue projects.

Note

The project is in active development and may have breaking changes in minor versions, but we will strive to keep changes minimal and well-documented.

Features

• Enforces FSD (Feature-Sliced Design) architecture patterns in Vue.js projects.
• Provides a set of rules and guidelines for structuring Vue components and their interactions.
• Includes a set of predefined configurations for different project setups.

Installation

npm install eslint-plugin-vue-fsd --save-dev

Usage

We provide two predefined configurations to help enforce FSD principles in your Vue.js projects.

• recommended - enables the rules that recommended best practices for FSD and Vue.js development.
• all - enables all of the rules shipped with eslint-plugin-vue-fsd.

Eslint v9+ configuration (Recommended):

import vueFsdPlugin from 'eslint-plugin-vue-fsd'

// .eslintrc.js
module.exports = {
  ...vueFsdPlugin.configs.recommended,
}

Legacy Eslint v8 configuration:

import vueFsdPlugin from 'eslint-plugin-vue-fsd'

// .eslintrc.js
module.exports = {
  extends: ['plugin:vue-fsd/legacy/recommended'],
}

Rules

The plugin provides the rules to enforce Feature-Sliced Design principles in Vue.js projects.

Rule	Description
no-processes-layer	Ensure deprecated processes layer is not used.

Roadmap

As the plugin evolves, we plan to implement the following rules:

• no-higher-level-imports: Forbid imports from higher layers.
• no-cross-slice-imports: Forbid cross-imports between slices on the same layer.
• no-layer-public-api: Forbid exposing public APIs from a layer.
• no-segments-without-slices: Forbid segments without slices.
• public-api: Enforce consistent public API on slices.
• no-ui-in-app: Forbid using UI segment in the app layer.
• no-direct-imports: Forbid direct imports from outside the slice.
• slice-relative-path: Imports within one slice should be relative.
• slice-naming: Enforce consistent naming conventions for slices.
• composables-naming: Enforce consistent naming conventions for composables.
• components-naming: Enforce consistent naming conventions for components.
• sfc-sections-order: Enforce consistent order of top-level sections in single-file components.
• no-orphaned-files: Forbid orphaned files that are not part of any slice.

We are always open to suggestions and contributions for new rules and improvements.

Contribution

Pull requests and issues are welcome! Please follow the code style and add tests for new rules.

License

MIT, see LICENSE for details.