Me gustaría tener una regla eslint que permita tener rutas de importación relativas para todo lo que se importe desde dentro del directorio y rutas absolutas para todo lo que se importe desde fuera del directorio.
Ejemplo: Esta es mi estructura de archivos
/Dashboard /components /Component1.tsx /Home /components /Component2.tsx /Component3.tsx /utils /util1.ts style.tsQuiero tener importaciones relativas dentro de mi directorio de inicio e importaciones absolutas para todo lo que se importó desde fuera de mi directorio de inicio .
Las importaciones de mi Component2.tsx deberían verse así
import Component3 from './Component3' import util1 from './../util1' import FlexBox from './../../styled' import Component1 from 'Dashboard/components/component1' // this should be absolute¿Podría algo como esto funcionar?
Para hacer cumplir las importaciones relativas solo dentro del directorio de inicio, puede configurar la regla no-restricted-imports para no permitir importaciones que comiencen con "Inicio".
Agregue esta regla al archivo de configuración de ESLint:
{ rules: { "no-restricted-imports": [ "error", { "patterns": ["Home/*"] } ] } }Esto dará un error si el nombre del módulo para importar comienza con "Inicio".
En Component2.tsx :
import Component3 from 'Home/components/Component3' //error import util1 from 'Home/utils/util1' //error import FlexBox from 'Home/abc/xyz/styled' //error import Component1 from 'Dashboard/components/component1' //no error Si también desea hacer lo mismo para el directorio del panel, deberá usar una configuración separada para cada directorio. Puede hacer esto con la clave overrides en el archivo de configuración de ESLint:
{ "overrides": [ { "files": ["Home/*"], rules: { "no-restricted-imports": [ "error", { "patterns": ["Home/*"] } ] } }, { "files": ["Dashboard/*"], rules: { "no-restricted-imports": [ "error", { "patterns": ["Dashboard/*"] } ] } } ] }