Code and Components Analysis

To begin your session, activate Frontier from the VSCode Sidebar. The extension will start analyzing your repository to provide insights into the code and component structure.

Frontier also scans your project to detect and categorize components and conventions, this process helps to identify reusable components as well as redundant ones, facilitating higher quality code and optimization.

Benefits of Code & Components Analysis

• Quick Onboarding: New team members can quickly familiarize themselves with the project's components and coding practices.
• Learn from the Best: Easily identify which components and usage patterns are implemented by your team's expert developers. This insight allows you to not only reuse code but also ensure that you are copying from the most reliable sources—whether the code was contributed recently by a top-notch developer or might be outdated and no longer reflect best practices.
• Code Clean-up: Easily identify and remove unused or redundant components to maintain a clean and efficient codebase.
• Efficient Development: With ready access to component details and usage examples, developers can significantly speed up the coding process, reducing the time spent searching for information.

The components panel is divided into two sections: External Components and Local Components.

• External Components: Displays a list of components imported from external sources such as different repositories, design system repos, or open-source libraries.
• Local Components: Displays a list of components that are developed and used within the current repository. This section is essential for developers looking to understand and manage locally available resources.

Upon clicking either of those sections, you will be able to find a list of components, each component will also have detailed insights such as:

• Props: Understand the properties that each component accepts, including types and values.
• Associated Files: See which files the component is associated with.
• Usage Examples: Access direct links to where the components are used within your project, complete with information on the last edit date and the contributor. This feature is particularly useful for onboarding new team members and for developers looking to quickly find and reuse existing code.

Frontier is also capable of automatically analyzing the coding patterns and styles adopted in your project. This feature ensures that all code generated by Frontier seamlessly integrates with your existing codebase by adhering to your predefined coding standards.

You can find these options by going to the preferences tab on the sidebar under the name “Conventions”, clicking it will expand and show different options divided by framework, programming language and styling

Frontier not only simplifies your workflow but also enhances the quality and maintainability of your codebase by promoting best practices and expert contributions.