Generate Index 
Generating file indexes easily.
Usage
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 IconName
export 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()
index is a function, used for producing index:
function index(
patterns: Patterns,
codeGenerator: CodeGenerator,
globbyOptions?: GlobbyOptions,
): string {}
Patterns
type Patterns = string | string[]
See supported minimatch patterns.
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
}
See all changeCase methods.
GlobbyOptions
See https://github.com/sindresorhus/globby#options.
Indentation
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
}
RegExp pattern
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'
// @endindex
In this case, the g flag means negative rather than global.
Standalone version
There is a standalone version here that allows you to use this feature without the help of VSCode.
Install
# npm
npm i vscode-generate-index-standalone -D
# yarn
yarn add vscode-generate-index-standalone -D
# pnpm
pnpm add vscode-generate-index-standalone -D
Usage
CLI
# npm
npx vscode-generate-index-standalone src/ scripts/
# yarn
yarn vscode-generate-index-standalone src/ scripts/
# pnpm
pnpx vscode-generate-index-standalone src/ scripts/
API
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,
})
License
Jay Fong (c) MIT
