Depcheck uses parsers to extract dependencies from different file types. Each parser analyzes specific file formats and returns the dependencies found in them.
type Parser = (
content: string,
filePath: string,
deps: string[],
rootDir: string
) => string[];Parameters:
content: File content as stringfilePath: Absolute path to the file being parseddeps: Array of available dependencies to match againstrootDir: Project root directory pathReturns: Array of dependency names found in the file
// ES6/ES2015+ JavaScript parser
depcheck.parser.es6: Parser;
// ES7+ JavaScript parser with advanced features
depcheck.parser.es7: Parser;
// React JSX parser
depcheck.parser.jsx: Parser;// TypeScript parser (.ts, .tsx files)
depcheck.parser.typescript: Parser;
// TypeScript configuration parser (tsconfig.json)
depcheck.parser.tsconfig: Parser;// CoffeeScript parser (.coffee, .litcoffee, .coffee.md)
depcheck.parser.coffee: Parser;
// SASS/SCSS parser
depcheck.parser.sass: Parser;
// GraphQL parser
depcheck.parser.graphql: Parser;// Vue.js component parser
depcheck.parser.vue: Parser;
// Svelte component parser
depcheck.parser.svelte: Parser;
// Storybook configuration parser
depcheck.parser.storybook: Parser;Depcheck uses this default parser mapping:
const defaultParsers = {
'**/*.js': depcheck.parser.jsx,
'**/*.mjs': depcheck.parser.jsx,
'**/*.cjs': depcheck.parser.jsx,
'**/*.jsx': depcheck.parser.jsx,
'**/*.coffee': depcheck.parser.coffee,
'**/*.litcoffee': depcheck.parser.coffee,
'**/*.coffee.md': depcheck.parser.coffee,
'**/*.graphql': depcheck.parser.graphql,
'**/.storybook/main.js': depcheck.parser.storybook,
'**/tsconfig*.json': depcheck.parser.tsconfig,
'**/*.cts': depcheck.parser.typescript,
'**/*.mts': depcheck.parser.typescript,
'**/*.ts': depcheck.parser.typescript,
'**/*.tsx': depcheck.parser.typescript,
'**/*.sass': depcheck.parser.sass,
'**/*.scss': depcheck.parser.sass,
'**/*.vue': depcheck.parser.vue,
'**/*.svelte': depcheck.parser.svelte
};You can customize parser configuration by providing a parsers object:
import depcheck from 'depcheck';
const options = {
parsers: {
// Use multiple parsers for JS files
'**/*.js': [depcheck.parser.es6, depcheck.parser.jsx],
// Use TypeScript parser for .mjs files
'**/*.mjs': depcheck.parser.typescript,
// Custom file pattern
'**/custom/*.special': depcheck.parser.es7
}
};
depcheck('/path/to/project', options).then(result => {
// Results include dependencies found by custom parsers
});Different parsers handle different import/require patterns:
ES6 Parser detects:
import foo from 'package-name';
import { bar } from 'package-name';
import * as baz from 'package-name';JSX Parser additionally detects:
import React from 'react';
import Component from './Component';
// JSX usage: <Component />TypeScript Parser additionally detects:
import type { TypeName } from 'package-name';
import { type TypeName, functionName } from 'package-name';Vue Parser detects:
<template>
<div>{{ message }}</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// Vue-specific dependency detection
}
}
</script>
<style lang="scss">
@import 'some-sass-package';
</style>Sass Parser detects:
@import 'node-sass-package';
@use 'sass-package' as sp;In configuration files (.depcheckrc), specify parsers as:
{
"parsers": {
"**/*.js": "jsx",
"**/*.ts": "typescript",
"**/*.vue": ["vue", "es6"],
"**/*.custom": "es7"
}
}Note: Parser names in configuration correspond to the keys in depcheck.parser object.