Package Exports

eslint-plugin-export-scope
eslint-plugin-export-scope/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (eslint-plugin-export-scope) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

eslint-plugin-export-scope

Set export scope (importability) for local utils, states, contexts, components, e.t.c. They should only be visible/accessible within their local scope.

Before-after comparison

Demo

Scopes

scope	importable from
.	current directory and children	default for all exports
..	parent directory and children	default for `index` files
../..	two directories above and children
src/consumer	within specified directory and children
src/consumer.ts	within specified file
*	anywhere

Scoped Exports

/** @scopeDefault ../.. */
/** ☝ Applies to all exports in the file unless overriden with a local `@scope` */

/** @scope * */
export const helper1 = ""; // 👈 Available everywhere

export const helper2 = ""; // 👈 inherits scope `../..` from `@scopeDefault`

/** @scope src/components */
export default "";

Default folder scope with `.scope.ts` files

└── src
  └── `common`
    ├── utils.ts
    ├── context.ts
    └── `.scope.ts`
             │
             │
  ╭────────────────────╮
  │ export default '*' │
  ╰────────────────────╯
// ⬆ this will make all exports within `common` accessible from anywhere unless a specific export is overriden on a lower level

Hint: creating an export default '*' scope file in the root of the project will make all exports global by default if you prefer this approach.

Exceptions

Export scope exceptions

// schema.ts
/**
 * @scope ..
 * @scopeException src/schemaConsumer 👈 whole folder has access
 * @scopeException src/schemaConsumer/index.ts 👈 whole file has access
 */
export default "";

Folder scope exceptions in `.scope.ts` files

└── src
  └── generated
    ├── [^0] 👈 exports only available within this folder
    └── schema.ts
  └── scripts
    └── index.ts

└── src
  └── `generated`
    ├── schema.ts
    └── `.scope.ts`
             │
             │
  ╭──────────────────────────────────╮
  │ export default '.';              │
  │                                  │
  │ export const exceptions = [      │
  │   'src/schemaConsumer',          │
  │   'src/scripts/schemaParser.ts', │
  │ ]                                │
  ╰──────────────────────────────────╯
// ⬆ by default exports are only importable within `generated` folder, but folders/files in exceptions are exempt.

Issues

⚠️ To re-lint an import in VSCode after updating a scope declaration either touch this import or restart the ESLint Server (ESLint limitation).

Restart ESLint Server

Installation

Install ESLint and the export-scope package. This package includes both an ESLint plugin and a TS Language Server plugin.

npm i -D eslint eslint-plugin-export-scope

ESLint plugin will highlight imports outside the scope

// .eslintrc.js
module.exports = {
  // ...
  ignorePatterns: ["!.scope.ts"],
  overrides: [
    {
      files: ["*.js", "*.mjs", "*.jsx", "*.ts", "*.mts", "*.tsx"],
      parser: "@typescript-eslint/parser",
      parserOptions: { project: true, tsconfigRootDir: __dirname },
      plugins: ["export-scope"],
      rules: { "export-scope/no-imports-outside-export-scope": "error" },
    },
  ],
};

TS plugin will disable autocompletion for exports outside the scope

// tsconfig.json
"compilerOptions": {
  "plugins": [{ "name": "eslint-plugin-export-scope" }],
},
"include": ["**/*", "**/.scope.ts"]

Tell VSCode to Use Workspace Version of TypeScript. Otherwise TS plugin won't work.

Select TS version