eslint-plugin-feature-sliced-design-architecture
Custom eslint plugin to follow FSD (Feature Sliced Design) frontend architecture rules. FSD Architecture documentation
Installation
You'll first need to install ESLint:
npm i eslint -D
Next, install eslint-plugin-feature-sliced-design-architecture
:
npm install -D eslint-plugin-feature-sliced-design-architecture
Usage
Add feature-sliced-design-architecture-plugin
to the plugins section of your .eslintrc
configuration file. You can omit the eslint-plugin-
prefix:
{
"plugins": [
"feature-sliced-design-architecture"
]
}
Then configure the rules you want to use under the rules section.
{
"rules": {
"feature-sliced-design-architecture/rule-name": 2
}
}
Supported Rules
feature-sliced-design-architecture/layer-imports
)
Rule for check imports from layers structure of FSD architecture (Rule Details
Rule for check imports from layers structure of FSD architecture
Options
Name | Description |
---|---|
alias | The alias with which the import path begins |
ignoreImportPatterns | Array of glob path templates to ignore of rule |
Examples options settings
'feature-sliced-design-architecture/layer-imports': ['error', {
alias: '@', // Example import path with alias - @/shared/...
ignoreImportPatterns: ['**/StoreProvider', '**/*.test.*'],
}],
Examples
Examples of correct code for this rule:
// File path C:/Users/project/src/features/Component
import Button from 'shared/Button.tsx'
import Post from 'entities/Post.tsx'
// With option: alias: '@'
// File path C:/Users/project/src/features/Component
import Button from '@/shared/Button.tsx'
import Post from '@/entities/Post.tsx'
// With option: ignoreImportPatterns: ['**/StoreProvider']
// File path C:/Users/project/src/features/Component
import { StateSchema } from 'app/providers/StoreProvider'
Examples of incorrect code for this rule:
// File path C:/Users/project/src/entities/Component
import AddComment from '@/features/AddComment' // Error: A layer can only import the underlying layers into itself. (app > pages > widgets > features > entities > shared)
feature-sliced-design-architecture/path-checker
)
Checking relative imports in one FSD slice(Rule Details
Checking relative imports in one FSD slice
Options
Name | Description |
---|---|
alias | The alias with which the import path begins |
Examples options settings
'feature-sliced-design-architecture/path-checker': ['error', {
alias: '@', // Example import path with alias - @/shared/...
}],
Examples
Examples of correct code for this rule:
// File path C:/Users/project/src/features/AddComment
import Button from 'shared/Button.tsx'
import { getCommentStatus } from '../../model/selectors/getCommentStatus'
// With option: alias: '@'
// File path C:/Users/project/src/features/AddComment
import Button from '@/shared/Button.tsx'
import { getCommentStatus } from '../../model/selectors/getCommentStatus'
Examples of incorrect code for this rule:
// File path C:/Users/project/src/features/AddComment
import { getCommentStatus } from 'features/model/selectors/getCommentStatus'
// Error: Within one slice, all import paths must be relative
// With option: alias: '@'
// File path C:/Users/project/src/features/AddComment
import { getCommentStatus } from '@/features/model/selectors/getCommentStatus'
// Error: Within one slice, all import paths must be relative
// File path C:/Users/project/src/features/AddComment
import { Currency } from '../shared/const/currency'
// Error: Shared layer import must be absolute path
feature-sliced-design-architecture/public-api-imports
)
FSD Architecture rule for public api imports (Rule Details
FSD Architecture rule for public api imports
Options
Name | Description |
---|---|
alias | The alias with which the import path begins |
testFilesPatterns | Array of glob path templates to need import files from testing public API from testing.js/ts |
Examples options settings
'feature-sliced-design-architecture/public-api-imports': ['error', {
alias: '@', // Example import path with alias - @/shared/...
ignoreImportPatterns: ['**/StoreProvider', '**/*.test.*'],
}],
Examples
Examples of correct code for this rule:
import { getData } from '../../model/selectors/getData'
import { Component } from 'entities/Component'
// With option: alias: '@'
import { Component } from '@/entities/Component'
// With option: testFilesPatterns: ['**/*.test.*']
// File path C:/Users/project/src/entities/Component/file.test.ts
import { Component } from 'entities/Component/testing'
// File path 'C:/Users/project/src/widgets/Profile/model/selectors/getUserProfile.ts',
import { getUser } from 'entities/User'
// With option: alias: '@'
// File path 'C:/Users/project/src/widgets/Profile/model/selectors/getUserProfile.ts',
import { getUser } from '@/entities/User'
Examples of incorrect code for this rule:
import { Some } from 'entities/Component/model/some.ts'
// Error: Absolute import is allowed only from public API (index.js/ts)
// With option: alias: '@'
import { Some } from '@/entities/Component/model/some.ts'
// Error: Absolute import is allowed only from public API (index.js/ts)
// With option: testFilesPatterns: ['**/*.test.*']
// File path C:/Users/project/src/entities/Component/file.test.ts
import { Some } from 'entities/Component/testing/some.ts'
// Error: Absolute import is allowed only from public API (index.js/ts)
// With option: testFilesPatterns: ['**/*.test.*']
// File path C:/Users/project/src/entities/Component/forbidden.ts
import { Some } from 'entities/Component/testing'
// Error: Test data need import from public API file for tests (testing.js/ts) only in files from testFilesPatterns option
// File path 'C:/Users/project/src/widgets/Profile/model/selectors/getUserProfile.ts',
import { getUser } from '../../../../entities/User/model/selectors/getUser/getUser'
// Error: Must be imported from a public API file (index.js/ts)