1. Introduction

The Prettier Configurator is a tool designed to simplify the process of creating and customising Prettier configuration files. It provides a user-friendly interface that allows users to adjust various Prettier options and preview the effects of those options in real-time. The tool is built using HTML, CSS, and JavaScript, with the core logic divided into several key modules:

• js/configData.js: This module is the central data repository for all configurable Prettier options. It defines the structure and content of each option, including its ID, title, description, input type, default value, and example code snippets. This data is used to generate the user interface dynamically.

• js/main.js: This is the main entry point for the application's JavaScript code. It orchestrates the UI rendering, handles user events, and generates the final Prettier configuration object based on the user's selections. It also manages the download of the configuration file.

• js/ui.js: This module is responsible for all user interface aspects. It dynamically renders the configuration options, updates the example displays based on user interactions, and manages the overall visual appearance of the application, including theme switching.

These modules work together to provide users with a seamless and intuitive experience when creating and customising Prettier configuration files.

Specifically, this wiki tries to answer the following questions:

• What are the main JavaScript files in the project?
• What is the purpose of each file?
• What are the key functions and data structures within each file?
• How do the files interact with each other?