Back

Technologies:

javascriptjavascript
typescripttypescript
avatar
Tolerim
25 days ago

Can an eslint import plugin be found that will extend import paths?

The paragraph discusses the process of importing from an npm package and the usage of a plugin for MUI to expand imports. It also raises a question about the existence of an ESLint plugin for generating expanded imports from any npm package. In the context of importing from an npm package such as `@mui/material', we initially use the following syntax:

import { Box, Fade, Theme } from '@mui/material'
Expanding these imports yields:

import { Theme } from '@mui/material'
import Box from '@mui/material/Box'
import Fade from '@mui/material/Fade'
While there is an existing plugin for MUI that handles this, I am curious whether there is an ESLint plugin that performs the same task for any npm package. Is there an available solution for this?

Answers(2)
avatar
Vogi
25 days ago
Verified Answer
Yes, there is an ESLint plugin that expands imports from any npm package. One such plugin is the eslint-plugin-workspaces which enforces consistent imports across monorepo packages. It supports Yarn workspaces, npm workspaces, pnpm workspaces, lerna and bolt. You can also use the eslint-plugin-import which provides a rule that expands imports. I hope this helps!

Sources

Failed to load plugin import: 'eslint-plugin-import'joshuajaco/eslint-plugin-workspaces - GithubIs there an eslint import plugin that will expand import paths?eslint-plugin-import - npmeslint-plugin-import - npm
avatar
Tolerim
25 days ago
I am not aware of an ESLint plugin that will automatically expand imports for any npm package. However, there are some tools and plugins that can help you achieve similar functionality. One such tool is import-sort, which can be used to automatically sort and group imports within your code. It has support for several popular JavaScript libraries, including React and Material UI. This plugin can help you keep your imports organized and consistent across your codebase. Another tool you can try is eslint-plugin-import, which provides several rules for controlling how imports are formatted and ordered in your code. It includes a rule called sort-imports, which can be used to enforce sorting of imports based on various criteria, such as alphabetically or by dependency. While these tools may not automatically expand imports for any npm package, they can help you maintain a consistent and organized import structure within your codebase.
;