Generating file indexes easily.
In any file, simply invoke command Generate Index to generate a file list.
To display the command palette, use the following keyboard shortcut, based on your installed operating system:
- MacOS:
Command+Shift+P- Windows:
Ctrl+Shift+P
-
Example 1:
src/components/index.js// @index('./**/*.jsx', f => `export * from '${f.path}'`) export * from './Button' export * from './Card' export * from './Modal' export * from './Modal/Alert' // @endindex
-
Example 2:
src/styles/components.scss// @index(['../components/**/*.scss', '!../components/**/_*.scss'], f => `@import '${f.path}';`) @import '../components/Button'; @import '../components/Card'; @import '../components/Modal'; @import '../components/Modal/Alert'; // @endindex
-
Example 3:
src/assets/index.ts// @index('./*.{png,jpg,svg}', (f, _) => `export { default as img${_.pascalCase(f.name)} } from '${f.path}${f.ext}'`) export { default as imgHomeBanner } from './home-banner.png' export { default as imgPlaceholder } from './placeholder.jpg' export { default as imgDivider } from './divider.svg' // @endindex // @index('./*.{mp3,aac,m4a}', (f, _) => `export { default as audio${_.pascalCase(f.name)} } from '${f.path}${f.ext}'`) export { default as audioSailing } from './sailing.mp3' export { default as audioSummerWine } from './summer-wine.aac' export { default as audioThankYou } from './thank-you.m4a' // @endindex
-
Example 4: exports all
./*.tsx?and./*/index.tsx?files.// @index(['./*.{ts,tsx}', './*/index.{ts,tsx}'], f => `export * from '${f.path.replace(/\/index$/, '')}'`) export * from './components' export * from './types' export * from './utils' // @endindex
-
Example 5: produces the type of the
IconNameexport type IconName = // @index(['./icons/*.svg'], (f, _, e) => `'${f.name}'${e.isLast ? '' : ' |'}`) 'arrow' | 'home' | 'pass' | 'picture' | 'user' // @endindex
-
Example 6: imports all scripts
<html> <head> <!-- @index('./*.js', f => `<script type="text/javascript" src="${f.path}${f.ext}"></script>`) --> <script type="text/javascript" src="./jssdk.js"></script> <script type="text/javascript" src="./polyfill.js"></script> <!-- @endindex --> </head> <body> ... </body> </html>
index is a function, used for producing index:
function index(
patterns: Patterns,
codeGenerator: CodeGenerator,
globbyOptions?: GlobbyOptions,
): string {}-
Patterns
type Patterns = string | string[]
See supported
minimatchpatterns. -
CodeGenerator
type CodeGenerator = ( parsedPath: ParsedPath, changeCase: ChangeCase, extraInfo: ExtraInfo, ) => string interface ParsedPath { /** The relative file path without extension, such as `./api` */ path: string /** The file name without extension, such as `api` */ name: string /** The file extension, such as `.js`*/ ext: string } interface ChangeCase { // See https://github.com/blakeembrey/change-case#usage } interface ExtraInfo { /** total number of items */ total: number /** index of current item */ index: number /** if current item is the first */ isFirst: boolean /** if current item is the last */ isLast: boolean /** if current item is a directory */ isDir: boolean /** if current item is a file */ isFile: boolean }
-
GlobbyOptions
You can make an index indented by indenting the start marker, e.g.
module.exports = {
// @index('./*.js', (f, _) => `${_.constantCase(f.name)}: require('${f.path}'),`)
// @endindex
}The produced index like as:
module.exports = {
// @index('./*.js', (f, _) => `${_.constantCase(f.name)}: require('${f.path}'),`)
MODULE1: require('./module1'),
MODULE2: require('./module2'),
// @endindex
}You can use regular expressions to filter the matched files, e.g.
// export all button components except starting with _
// @index(['./components/*', /button/, /\/_/g], f => `export * from '${f.name}${f.ext}'`)
export * from './components/button.js'
export * from './components/button_small.js'
export * from './components/button_large.js'
// @endindexIn this case, the g flag means negative rather than global.
There is a standalone version here that allows you to use this feature without the help of VSCode.
# npm
npm i vscode-generate-index-standalone -D
# yarn
yarn add vscode-generate-index-standalone -D
# pnpm
pnpm add vscode-generate-index-standalone -D# npm
npx vscode-generate-index-standalone src/ scripts/
# yarn
yarn vscode-generate-index-standalone src/ scripts/
# pnpm
pnpx vscode-generate-index-standalone src/ scripts/import { generateIndex, generateManyIndex } from 'vscode-generate-index-standalone'
import { join } from 'path'
const generateResult = await generateIndex({
filePath: join(__dirname, '../src/index.ts'),
replaceFile: true,
}
const generateManyResult = await generateManyIndex({
patterns: ['../src/**/index.ts', '!**/ignore/index.ts'],
cwd: __dirname,
replaceFile: true,
})Jay Fong (c) MIT