Don't leak LOCAL utils, states, contexts, components into the global scope.
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 |
/** @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 "";
└── src
└── `common`
├── utils.ts
├── context.ts
└── `.scope.ts`
│
│
╭────────────────────╮
│ export default '*' │
╰────────────────────╯
// ⬆ this will make all exports within `common`
// importable from anywhere unless a
// specific export is overriden on a lower level
// schema.ts
/**
* @scope ..
* @scopeException src/schemaConsumer 👈 whole folder has access
* @scopeException src/schemaConsumer/index.ts 👈 whole file has access
*/
export default "";
└── 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.
Install ESLint and the export-scope
package. This package includes both an ESLint
plugin and a TS Language Server
plugin.
npm i -D eslint @typescript-eslint/parser eslint-plugin-export-scope
# ⬆ v6 or above
// .eslintrc.js
module.exports = {
// ...
extends: ["plugin:eslint-plugin-export-scope/recommended"],
parser: "@typescript-eslint/parser",
parserOptions: { project: true, tsconfigRootDir: __dirname },
ignorePatterns: ["!.scope.ts"],
};
Manual ESLint configuration
// .eslintrc.js
module.exports = {
// ...
e̶x̶t̶e̶n̶d̶s̶:̶ ̶[̶"̶p̶l̶u̶g̶i̶n̶:̶e̶s̶l̶i̶n̶t̶-̶p̶l̶u̶g̶i̶n̶-̶e̶x̶p̶o̶r̶t̶-̶s̶c̶o̶p̶e̶/̶r̶e̶c̶o̶m̶m̶e̶n̶d̶e̶d̶"̶]̶,̶
plugins: ["export-scope"],
rules: { "export-scope/no-imports-outside-export-scope": "error" },
};
// tsconfig.json
"compilerOptions": {
"plugins": [{ "name": "eslint-plugin-export-scope" }],
},
"include": ["**/*", "**/.scope.ts"]
// "../../**/.scope.ts" for monorepos
Tell VSCode to Use Workspace Version
of TypeScript. Otherwise TS plugin won't work.
Configuration for JS projects
tsconfig.json
file is still required for the plugin to work- replace
.scope.ts
in both configs with.scope.js
- set
compilerOptions.allowJs
totrue
intsconfig.json
- Replace all
//
comments with jsDocs/** */
- Replace
@scope default
with@scopeDefault
- Relace
@..
file/folder prefixes with.scope.ts
files. - Make sure
.eslintrc.js
andtsconfig.json
configs are updated
- Type
@
above exports for automatic jsDoc generation. - Use autocompletion provided within jsDocs and
.scope.ts
files. - Root
.scope.ts
file (next to package.json) sets the default for the whole project. Havingexport default '*'
there will make all exports global by default if you prefer a less strict approach.
scope
declaration either touch
this import or restart the ESLint Server (ESLint limitation).