Integrating Rollup with ESLint and Prettier

In modern JavaScript and TypeScript development, maintaining high readability and code consistency is paramount. As the industry-leading static module bundler, Rollup is renowned for its minimal bundle sizes and exceptional performance, making it one of the preferred choices for building modern web applications. However, excellent output depends not only on efficient build speeds but also on the quality of the input code. Manually checking for syntax errors, enforcing naming conventions, or unifying formatting is often time-consuming and prone to errors. This article explores in depth how to seamlessly integrate ESLint (a static analysis tool) and Prettier (a code formatter) into the Rollup build process, achieving a development experience of "configure once, always compliant."
To understand the integration logic between the two, it is first necessary to clarify their respective roles and interaction methods. ESLint is responsible for checking whether code complies with specific rule sets before compilation or at runtime (e.g., usage of var, existence of undefined variables), while Prettier focuses on unifying code formatting according to team conventions. Rollup itself is a build tool that does not directly execute the logic of ESLint and Prettier; rather, it coordinates through its plugin system or external scripts.

In an integration architecture, there are typically two primary modes:

  1. Pre-check Mode: Run ESLint/Prettier at project startup. If errors are detected, the Rollup build process is blocked (e.g., running npm run lint followed immediately by rollup -c). This approach is simple and intuitive but cannot embed check results directly into the final code.
  2. Runtime Injection Mode: Utilize Rollup's plugin mechanism or intermediate layers like PostCSS/Babel to inspect and fix code in real-time during the bundling process (e.g., using eslint-plugin-rollup or auto-formatting within build hooks). This ensures that the generated files fully comply with specifications, although it involves higher configuration complexity.

For most frontend projects, a "Pre-check + CI Enforcement" strategy is recommended: execute validation and bundling sequentially via scripts during local development, while setting ESLint/Prettier errors as blocking conditions in Continuous Integration (CI) pipelines.

Implementation Steps: Building an Automated Workflow

To achieve efficient integration, the key lies in writing reasonable Shell or npm scripts to orchestrate these toolchains. Below is an example of a standard operational procedure:

First, ensure that necessary dependencies are installed in the project. Verify in package.json that eslint, prettier, @types/eslint-plugin-rollup (if plugin support is needed), and Rollup itself are installed. Next, configure .eslintrc.js and .prettierrc files to define unified code standards for the team.

The core of the implementation involves script writing. We can create a Shell script named build-with-quality.sh to automate this process:

  • Step 1: Execute ESLint scanning to perform syntax and logic checks on all source files. If errors are found (exit code non-zero), immediately terminate subsequent steps and prompt developers to fix the issues.
  • Step 2: Run Prettier formatting commands to ensure code style consistency. Similarly, set a failure exit code to prevent the build from continuing.
  • Step 3: Only after both of the above steps are successfully completed should rollup -c be executed for final module bundling and compression optimization.

Through this method, developers receive immediate feedback before submitting code, while CI/CD systems strictly guarantee the quality of release versions. Additionally, Rollup's plugin functionality can be utilized to output ESLint/Prettier check results directly into build logs, facilitating easy identification of specific files and line numbers.

Practical Example: From Configuration to Bundling

Assume we have a project directory named src containing an entry file index.js. Our goal is to generate an optimized dist/bundle.js. The following command sequence demonstrates the complete operation:

Execute the commands below in the terminal to complete the entire workflow:

# 1. Check code quality (ESLint)
npx eslint src/**/*.js --quiet # quiet mode reduces noise but still exits on error

# 2. Format code (Prettier)
npx prettier --check src/

# 3. Execute Rollup bundling
rollup -c rollup.config.js

If ESLint or Prettier detects any violations, the commands above will exit before reaching Step 3. At this point, developers simply need to fix the reported errors and re-run the script. It is worth noting that custom plugins can be integrated into Rollup's configuration file rollup.config.js to further process build artifacts, ensuring output is not only compact in size but also compliant with coding standards.

Best Practices and Future Outlook

In practical application, it is recommended to include ESLint and Prettier configurations in version control and establish detailed team standard documentation (such as naming conventions, maximum line limits, etc.). Simultaneously, configure automated check tasks on platforms like GitHub Actions or GitLab CI to ensure all Pull Requests must pass quality tool validation before merging.

As frontend engineering advances, the integration between Rollup and static analysis tools will become increasingly tight. In the future, more natively supported plugin solutions may emerge, allowing repair strategies to be applied directly during bundling without external script intervention. However, regardless of technological evolution, the philosophy that "code is an asset" remains unchanged—only high-quality input can produce high-performance, maintainable web applications. By reasonably integrating Rollup, ESLint, and Prettier, developers can significantly enhance team collaboration efficiency and build more robust frontend systems.