2. configData.js

js/configData.js

This file is responsible for defining the data structure and content used to display and configure Prettier options within the user interface. It serves as a central repository for all the customisable settings that the user can adjust to tailor Prettier's behaviour.

Specifically, it exports the prettierOptions array. This array contains a series of objects, each representing a single Prettier option. Each object includes the following properties:

• id: A unique identifier for the option, corresponding to Prettier's internal option name (e.g., 'printWidth').
• title: A user-friendly title for the option, displayed in the UI (e.g., 'Print Width').
• description: A detailed explanation of the option's function and impact on code formatting.
• inputType: Specifies the type of input control to be rendered in the UI. This can be 'number' (for numerical inputs), 'boolean' (for checkboxes), or 'select' (for dropdown menus).
• defaultValue: The default value for the option, used if the user doesn't explicitly specify a different value.
• choices: An array of Choice objects (only required for options with inputType: 'select'). Each Choice object defines a possible value for the dropdown, along with a user-friendly label and optional example code snippets.
• exampleInput: Example code before formatting, demonstrating the effect of the option.
• exampleOutputTrue: Example code after formatting, specifically when a boolean option is set to true.
• exampleOutputFalse: Example code after formatting, specifically when a boolean option is set to false.
• exampleOutput: General example code after formatting (used for number types or as a fallback for select types).
• exampleNote: An additional note to provide context or clarification for the example code.
• language: Specifies the programming language for syntax highlighting in the example code snippets (using Prism.js).

In essence, js/configData.js provides all the necessary information for the application to dynamically generate the UI elements for configuring Prettier and to display illustrative examples of how each option affects code formatting.