Elevating Code Quality: Unveiling the Power of Commencis JS Toolkit

The Commencis JS Toolkit is a carefully curated collection of configuration and style guide tools aimed at standardizing web development projects. It encompasses packages of:

• @commencis/eslint-config: A configuration set for ESLint that enforces code quality and style consistency.
• @commencis/eslint-plugin: Custom ESLint plugins tailored to the specific needs of modern JavaScript and TypeScript projects.
• @commencis/commitlint-config: A configuration for Commitlint that ensures consistent commit messages across projects.
• @commencis/stylelint-config: A set of rules for Stylelint to maintain consistent CSS and Sass coding practices.
• @commencis/prettier-config: Configuration for Prettier that automates code formatting to maintain a uniform style.

Structured as a monorepo using TurboRepo for efficient management and tsup for fast bundling, this toolkit allows for centralized management and easy integration into any project, making it a valuable asset for developers striving for excellence.

Check out Commencis JS Toolkit on GitHub:
https://github.com/Commencis/js-toolkit

At Commencis, the journey to creating the Commencis JS Toolkit was driven by our dedication to maintaining high standards of code quality and consistency across our projects. Despite the rapid pace of advancements in web development and the emergence of new tools, our large team has always found TypeScript invaluable for its robust type checking and early error detection, making it our go-to for complex projects. While aware of the advantages of JavaScript and JSDoc for their simplicity and reduced overhead costs, TypeScriptʼs benefits for large-scale development have consistently proven superior. Our goal was to consolidate our internal standards into an updated, comprehensive toolkit that could evolve with the latest technologies and be shared with the broader community.

In developing the toolkit, we reaffirmed our belief in the efficiency of established tools like ESLint, Stylelint, Commitlint, and Prettier.

Even with the rise of new technologies, some utilizing AI or having re- writes in their cores with high-performance languages like Rust, these tools remain the most effective for maintaining coding standards and ensuring consistent linting across our workflows.

The Commencis JS Toolkit is designed to stay relevant alongside technological advancements and provide a robust, open-source solution for developers aiming for excellence in their projects.

With the upcoming release of ESLint 9, a major shift is happening with the introduction of the new flat config structure. The Commencis ESLint Config is fully prepared for this transition, adopting a modern approach that aligns with the latest ESLint standards. Our toolkit includes comprehensive configurations designed for various environments and frameworks, such as base configurations for general best practices, and specialized ones for TypeScript, React, Next.js, Vue, and testing tools like Jest and Vitest.

Example Usage:
// eslint.config.js
import { commencisReactConfig, defineConfig } from '@commencis/eslint-config'
export default defineConfig(...commencisReactConfig);

This approach ensures our configurations remain relevant and can be seamlessly integrated into various projects, simplifying the maintenance of high-quality code standards.

The Commencis ESLint Plugin comprises a collection of custom rules tailored to enforce company-specific standards, such as mandatory copyright notices and internal naming conventions. These rules help ensure consistency and adherence to internal guidelines across all projects.

Example Usage in an Internal Project:

// eslint.config.js
import { commencisReactConfig, defineConfig } from '@commencis/eslint-config'
import commencisEslintPlugin from '@commencis/eslint-plugin';
export default defineConfig(
...commencisReactConfig,
...commencisEslintPlugin.configs.all
);

Example Usage as Standalone:

// eslint.config.js
import { commencisReactConfig, defineConfig } from '@commencis/eslint-config'
import commencisEslintPlugin from '@commencis/eslint-plugin';
export default defineConfig(...commencisReactConfig, {
plugins: { '@commencis': commencisEslintPlugin },
rules: {
'@commencis/copyright-text': 'warn',
},
});

The Commencis Commitlint Config is designed to enforce consistent commit message formats, adhering to conventional commit guidelines. This consistency ensures a clean and understandable project history, facilitating better code reviews and project management.

Example Usage:

// commitlint.config.js
export default {
extends: ['@commencis/commitlint-config'],
};

The Commencis Stylelint Config offers a comprehensive set of configurations tailored to various styling solutions commonly used in our projects. Whether itʼs traditional CSS, CSS modules, SCSS (Sass), or styled-components, our toolkit provides specialized rules to ensure consistency and best practices across different styling methodologies. Additionally, we have specific configurations optimized for Vue.js applications, addressing unique styling requirements in Vue components.

Example Usage:

// stylelint.config.js
export default {
extends: ['@commencis/stylelint-config/scss-modules'],
ignoreFiles: ['node_modules', 'coverage/**/*', 'dist/**/*']
};

The Commencis Prettier Config simplifies code formatting with a unified set of style rules, ensuring all code is consistently formatted. This reduces cognitive load and helps minimize merge conflicts due to differing code styles.

Example Usage:

// prettier.config.js
import commencisPrettierConfig from '@commencis/prettier-config'
export default commencisPrettierConfig;

With these configurations, our toolkit ensures a consistent code style across all projects, allowing developers to focus more on development and less on formatting concerns.

Developer Experience DevX at Commencis encompasses the holistic environment in which developers operate, focusing on enhancing productivity, maintaining a consistent codebase, and fostering improved collaboration across teams. Our toolkit plays a pivotal role in shaping a positive DevX by addressing key elements such as tooling, processes, and professional development.

The Commencis JS Toolkit provides robust configurations for essential development tools and technologies, including ESLint, Stylelint, and Prettier, tailored to enforce coding standards and maintain consistency across projects. Developers benefit from predefined configurations that integrate seamlessly into their workflows, ensuring code quality from the start. This standardized approach reduces friction in development and allows developers to focus more on coding and less on manual code reviews and formatting.

We support streamlined Agile workflows, facilitating iterative development cycles and rapid deployment. By integrating with version control systems and continuous integration pipelines, developers experience a smoother transition from code creation to deployment. Features like automated testing configurations for Jest and Vitest ensure reliable testing practices, reducing the risk of errors and enhancing code reliability.

Our commitment to DevX extends to supporting continuous professional development. By adopting TypeScript and adhering to best the practices promoted by the toolkit, developers stay current with industry standards and emerging technologies. This empowers them to innovate confidently and contribute effectively to the growth of our projects and the broader developer community.

The rules and configurations provided by the Commencis JS Toolkit help catch potential issues early in the development process. This proactive approach reduces the likelihood of bugs making it to production, leading to more reliable and stable software.

With a consistent and high-quality codebase, projects become easier to maintain and scale. The standardized practices enforced by the toolkit mean that code can be more easily understood and modified by any team member, reducing the risk of introducing errors during updates or expansions.

By setting and enforcing a high bar for code quality, the Commencis JS Toolkit helps teams deliver better software. This not only improves the end-user experience but also enhances the reputation of the development team and company.

The future of the Commencis JS Toolkit entails expanding our repertoire of configuration sets to encompass a wider range of technologies and frameworks. We plan to introduce new configurations tailored to emerging frontend technologies and platforms, ensuring that our toolkit remains versatile and adaptable to evolving industry standards.

Furthermore, automation will play a pivotal role in streamlining workflows and enhancing Continuous Integration and Continuous Deployment CI/CD processes. By automating testing, code formatting, and deployment pipelines, we aim to reduce manual intervention and accelerate the delivery of high- quality software.

Looking ahead, the Commencis JS Toolkit will expand to include new packages and shared configurations aimed at optimizing development workflows and enhancing project scalability. Among these additions, we plan to introduce standardized configurations for essential tools such as GitHub Actions, TS Config, RSPack, Webpack, Vite, and Browserslist. These shared configurations will ensure consistency in CI/CD pipelines, TypeScript setups, efficient bundling with RSPack and Webpack, and rapid development with Vite. They will also streamline cross-browser compatibility management using Browserslist, enabling teams to focus more on building robust applications and less on configuration overhead.

By incorporating these new packages and configurations, the toolkit aims to elevate development standards, improve team productivity, and support the seamless integration of emerging technologies. These efforts underscore our commitment to innovation and continuous improvement in delivering high- quality software solutions.

To simplify adoption and standardize project setup, we are working on the Commencis CLI. This command-line interface will enable developers to initialize projects with predefined configurations, set up automation scripts, and enforce coding standards effortlessly. Coupled with comprehensive documentation, the Commencis CLI ensures that new team members can onboard quickly and adhere to our established best practices from day one.

We are also investing in new project starters, templates, and proof-of-concept POC projects to expedite development and encourage innovation. These resources will serve as foundational frameworks that incorporate our toolkitʼs configurations and showcase recommended practices for building robust and scalable web applications.

The Commencis JS Toolkit represents a commitment to elevating code quality and enhancing Developer Experience DevX across our organization. By standardizing coding practices, automating workflows, and fostering collaboration, the toolkit empowers our team to deliver high-quality software efficiently. As we look ahead, our focus remains on innovation and continuous improvement, ensuring that our toolkit evolves in tandem with technological advancements and industry best practices. With these initiatives, we are ready to strengthen our development capabilities, accelerate project delivery, and uphold our commitment to excellence in software engineering.