Function Call Tree VSC Extension

Function Call Tree VSC Extension is a Visual Studio Code extension that helps developers visualize and explore function call hierarchies within their codebase. It provides an interactive tree view of function calls, making it easier to understand, navigate, and refactor complex code structures. The extension supports modern JavaScript, TypeScript and Node.js projects, and comes pre-configured with robust tooling for testing, linting, formatting, and automated documentation.

📚 Table of Contents

✨ Key Features
🚀 Getting Started
- Prerequisites
Cloning and Using this Repository
🚀 Available Scripts
A Focus on Quality and Productivity
- The Cost of Stale Documentation
- The Power of Workflow Scripts
📦 Release & Versioning
- How it Works
- Creating a New Release
  - Your First Release
📁 Project Structure
✍️ Linting for Documentation
- How to Check for Missing Documentation
- Example
🤝 Contributing
🗺️ Roadmap
⚖️ Code of Conduct
🙏 Acknowledgements
👨‍💻 About the Author
📄 License

✨ Key Features

Comprehensive Testing Suite: Pre-configured with Jest for unit and integration testing. Includes coverage reporting out-of-the-box to ensure code quality.
Automated Code Quality: A strict, pre-configured setup using ESLint and Prettier to catch errors, enforce best practices, and maintain a consistent code style across all files (.js, .md, .json).
Enforced Documentation Standards: Integrated eslint-plugin-jsdoc to require JSDoc comments for all functions, improving code clarity and long-term maintainability.
Living Documentation: Custom automation scripts (npm run docs:all) that keep your README.md perpetually up-to-date by generating the project structure, a table of contents, and a list of available scripts. This eliminates documentation drift.
Automated Release Workflow: Integrated release-please to automate version bumping, CHANGELOG.md generation, and GitHub releases based on the Conventional Commits specification.
One-Command Pre-Commit Preparation: A single npm run ready command that formats, lints, and updates all documentation, guaranteeing every commit is clean, consistent, and professional. This command is designed to be run before every commit.
Robust Project Defaults: Thoughtfully pre-configured with .gitignore, .prettierignore, and a ready-to-use Continuous Integration (CI) workflow for GitHub Actions.
Automated Dependency Updates: Dependabot integration to keep your dependencies up-to-date and secure.

🚀 Getting Started

Prerequisites

Node.js version 18.0.0 or higher

Cloning and Using this Repository

To clone this repository and use it locally, follow these steps:

Open your terminal and navigate to the directory where you want to place the project.

Clone the repository:

git clone https://github.com/ioncakephper/function-call-tree-vs-extension.git

Navigate into the project directory:
```
cd function-call-tree-vs-extension
```
Install the dependencies:
```
npm install
```
Start building your application in the src directory or use the available scripts as described below.

🚀 Available Scripts

This template includes a set of scripts designed to streamline development, enforce quality, and automate documentation.

Automated Documentation

npm run docs:all: A convenience script that updates all documentation sections: table of contents, available scripts, and project structure.
npm run docs:scripts: Updates the "Available Scripts" section in README.md with this script.
npm run docs:structure: Updates the project structure tree in README.md.
npm run toc: Generates a Table of Contents in README.md using doctoc.

Code Quality & Formatting

npm run check: A convenience script that runs the linter.
npm run fix: A convenience script that formats code and then fixes lint issues.
npm run format: Formats all JavaScript, Markdown, and JSON files with Prettier.
npm run lint: Lints all JavaScript and Markdown files using ESLint.
npm run lint:fix: Automatically fixes linting issues in all JavaScript and Markdown files.

Core Development

npm run start: Runs the application using node src/index.js.
npm run test: Runs all tests with Jest and generates a coverage report.
npm run test:watch: Runs Jest in watch mode, re-running tests on file changes.

The "One-Click" Pre-Commit Workflow

npm run ready: A convenience script to run before committing: updates all documentation and then formats and fixes all files.

A Focus on Quality and Productivity

This starter template is more than just a collection of files; it's a workflow designed to maximize developer productivity and enforce high-quality standards from day one. The core philosophy is to automate the tedious and error-prone tasks so you can focus on what matters: building great software.

The Cost of Stale Documentation

In many projects, the README.md quickly becomes outdated. Manually updating the project structure or list of scripts is an easily forgotten chore.

function-call-tree-vs-extension solves this problem with its custom documentation scripts:

scripts/update-readme-structure.js: Saves you from manually drawing out file trees. What might take 5-10 minutes of careful, manual work (and is often forgotten) is now an instant, accurate, and repeatable command.
scripts/update-readme-scripts.js: Ensures that your project's capabilities are always documented. It reads directly from package.json, so the documentation can't lie. It even reminds you to describe your scripts, promoting good habits.

The Power of Workflow Scripts

Chaining commands together is a simple but powerful concept. The fix, docs:all, and ready scripts are designed to create a seamless development experience.

Instead of remembering to run prettier then eslint --fix, you just run npm run fix.
Instead of running three separate documentation commands, you just run npm run docs:all.
And most importantly, before you commit, you run npm run ready. This single command is your pre-flight check. It guarantees that every commit you push is not only functional but also perfectly formatted, linted, and documented. This discipline saves countless hours in code review and prevents messy commit histories.

By embracing this automation, function-call-tree-vs-extension helps you build better software, faster.

📦 Release & Versioning

This project uses release-please to automate releases, versioning, and changelog generation. This ensures a consistent and hands-off release process, relying on the Conventional Commits specification.

How it Works

Conventional Commits: All changes merged into the main branch should follow the Conventional Commits specification (e.g., feat: add new feature, fix: resolve bug).
Release Pull Request: release-please runs as a GitHub Action and monitors the main branch for new Conventional Commits. When it detects changes that warrant a new release (e.g., a feat commit for a minor version, a fix commit for a patch version), it automatically creates a "Release PR" with a title like chore(release): 1.2.3.
Review and Merge: This Release PR contains:
- An updated CHANGELOG.md with all changes since the last release.
- A bumped version number in package.json.
- Proposed release notes. Review this PR, and once satisfied, merge it into main.
Automated GitHub Release & Publish: Merging the Release PR triggers two final, sequential actions:
- The release-please action creates a formal GitHub Release and a corresponding Git tag (e.g., v1.1.0).
- The creation of this release then triggers the publish.yml workflow, which automatically publishes the package to the npm registry.

Creating a New Release

To create subsequent releases, simply merge changes into the main branch using Conventional Commits. release-please will handle the rest by creating a Release PR. Once that PR is merged, the new version will be released automatically.

Your First Release

To bootstrap the process and create your very first release:

Ensure your package.json version is at a sensible starting point (e.g., 1.0.0).
Make at least one commit to the main branch that follows the Conventional Commits specification. A good first commit would be: feat: Initial release.
Push your commit(s) to main. The release-please action will run and create your first Release PR.
Review and merge this PR. This will trigger the creation of your v1.0.0 GitHub Release and publish the package to npm.

For more details, refer to the release-please documentation.

📁 Project Structure

.
├── .github/            # GitHub Actions workflows
│   └── workflows/
│       ├── ci.yml             # Continuous Integration (CI) workflow
│       ├── publish.yml
│       └── release-please.yml
├── .qodo/

├── .eslintignore       # Files/folders for ESLint to ignore
├── .eslintrc.json      # ESLint configuration
├── .gitignore          # Files/folders for Git to ignore
├── .npmrc
├── .prettierignore     # Files/folders for Prettier to ignore
├── .prettierrc.json    # Prettier configuration
├── callTreeProvider.js
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md  # Community standards
├── CONTRIBUTING.md     # Guidelines for contributors
├── extension.js
├── jest.config.mjs
├── LICENSE             # Project license
├── package.json        # Project metadata and dependencies
├── parser.js
└── README.md           # This file

✍️ Linting for Documentation

This project uses the eslint-plugin-jsdoc package to enforce that all functions, classes, and methods are properly documented using JSDoc comments. This helps maintain a high level of code quality and makes the codebase easier for new and existing developers to understand.

How to Check for Missing Documentation

You can check the entire project for missing or incomplete docblocks by running the standard linting command:

npm run lint

ESLint will scan your JavaScript files and report any undocumented code as a warning.

Example

Consider the following function in your code without any documentation:

function calculateArea(width, height) {
  return width * height;
}

When you run npm run lint, ESLint will produce a warning similar to this:

/path/to/your/project/src/your-file.js
  1:1  warning  Missing JSDoc for function 'calculateArea'  jsdoc/require-jsdoc

To fix this, you would add a JSDoc block that describes the function, its parameters, and what it returns. Most modern code editors (like VS Code) can help by generating a skeleton for you if you type /** and press Enter above the function.

Corrected Code:

/**
 * Calculates the area of a rectangle.
 * @param {number} width The width of the rectangle.
 * @param {number} height The height of the rectangle.
 * @returns {number} The calculated area.
 */
function calculateArea(width, height) {
  return width * height;
}

After adding the docblock, running npm run lint again will no longer show the warning for this function.

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines to get started.

🗺️ Roadmap

This project is actively maintained, and we have a clear vision for its future. Here are some of the features and improvements we are planning:

TypeScript Support: Add a separate branch or configuration for a TypeScript version of this template.
Monorepo Example: Provide guidance and an example setup for using this template within a monorepo structure.
Containerization: Include a Dockerfile and docker-compose.yml for easy container-based development.
Additional CI/CD Examples: Add examples for other CI/CD providers like CircleCI or GitLab CI.

If you have ideas for other features, please open an issue to discuss them!

⚖️ Code of Conduct

To ensure a welcoming and inclusive community, this project adheres to a Code of Conduct. Please read it to understand the standards of behavior we expect from all participants.

🙏 Acknowledgements

This project was built upon the shoulders of giants. We'd like to thank the creators and maintainers of these amazing open-source tools and specifications that make this template possible:

👨‍💻 About the Author

This template was created and is maintained by Ion Gireada.

GitHub: @ioncakephper
Website: Feel free to add your personal website or blog here.
LinkedIn: Connect with me on LinkedIn!

📄 License

This project is licensed under the MIT License.

ioncakephper / function-call-tree-vs-extension