Don't leak LOCAL utils, states, components into the global scope
npm install eslint-plugin-export-scopeDon't leak LOCAL utils, states, contexts, components into the global scope.
!Demo
| 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 | |
``ts@scope
/* @scopeDefault ../.. /
/* ā Applies to all exports in the file unless overriden with a local /
/* @scope */
export const helper1 = ""; // š Available everywhere
export const helper2 = ""; // š inherits scope ../.. from @scopeDefault
/* @scope src/components /
export default "";
`
`ts
/* @scope .. /
const helper3 = "";
export { helper3 }; // š inherits the scope from the variable declaration
`
files
`tscommon
āāā src
āāā .scope.ts
āāā utils.ts
āāā context.ts
āāā common
ā
ā
āāāāāāāāāāāāāāāāāāāāāā®
ā export default '*' ā
ā°āāāāāāāāāāāāāāāāāāāāāÆ
// ⬠this will make all exports within
// importable from anywhere unless a
// specific export is overriden on a lower level
`
#### Export scope exceptions
`ts`
// 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
`tsgenerated
āāā src
āāā .scope.ts
āāā schema.ts
āāā generated
ā
ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā®
ā export default '.'; ā
ā ā
ā export const exceptions = [ ā
ā 'src/schemaConsumer', ā
ā 'src/scripts/schemaParser.ts', ā
ā ] ā
ā°āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāÆ
// ⬠by default exports are only importable
// within folder, butexceptions
// folders/files in are exempt.
`
files- .scope.ts sets a default scope for all exports from the current directory.scope.default.ts
- sets a default scope for the current directory AND all subdirectories
Install ESLint and the export-scope package. This package includes both an ESLint plugin (validates imports) and a TS Language Server plugin (manages autocompletion).
`sh`
npm i -D eslint typescript-eslint eslint-plugin-export-scope
`json`
// package.json
{
"type": "module"
}
`js
// eslint.config.js
import tseslint from "typescript-eslint";
import exportScope from "eslint-plugin-export-scope";
export default tseslint.config(
// other configs,
exportScope.configs.flatConfigRecommended,
);
`
Custom parser (Optional)
`js`
// This plugin already comes with a parser. If you want a local one:
{
files: ['*/.{ts,tsx,js,jsx,mts,mjs,cts,cjs}'],
languageOptions: { parser: / local parser / },
},
Instructions
`sh`
npm i -D eslint eslint-plugin-export-scope
`js
// .eslintrc.js
module.exports = {
extends: ["plugin:export-scope/recommended"],
parserOptions: { project: true, tsconfigRootDir: __dirname },
};
// This plugin already comes with a parser. If you want a local one:
parser: / local parser /,
`
`js`
// tsconfig.json
"compilerOptions": {
"plugins": [{ "name": "eslint-plugin-export-scope" }],
},
ā ļø Tell VSCode to Use Workspace Version of TypeScript. Otherwise TS plugin won't work.

tsconfig.json with compilerOptions.allowJs set to true is required
v2 => v3 (Optional)
- Including "*/.scope." in tsconfig.js is no longer required
- Eslint config could be simplified by following the updated instructions
v1 => v2
- Replace all // comments with jsDocs /* /@scope default
- Replace with @scopeDefault@..
- Relace file/folder prefixes with .scope.ts files..eslintrc.js
- Make sure and tsconfig.json configs are updated
- Type @ above exports for automatic jsDoc generation..scope.ts
- Use autocompletion provided within jsDocs and files..scope.default.ts
- Root could be used to set the default for the whole project. Having export default '*' there would make all exports global by default in case you prefer a less strict approach.
ā ļø To re-lint an import in VSCode after updating a scope declaration either touch` this import or restart the ESLint Server (ESLint limitation).
