A better Prettier CLI and config file

Explanation of the problem

The author proposes a fresh approach to Prettier’s command-line interface (CLI) with the goal of simplifying usage and promoting explicitness. The existing approach of configuring Prettier through package.json scripts using globs and formatting options is deemed problematic. The author suggests a new structure where separate subcommands are used for different operations, making it easier to understand and utilize Prettier’s capabilities. The proposed structure also addresses issues related to editor integration, CI workflows, git hooks, and lint-staged usage. Additionally, the author suggests adopting a prettier.json configuration file that specifies global and per-language options, file extension mappings, and ignore patterns.

The current problem lies in the complexity and limitations of the existing Prettier CLI configuration using package.json scripts and globs. The lack of explicitness makes it challenging for editors to determine the appropriate options and files to format. Running Prettier with different options, such as --check for continuous integration (CI), or using git hooks and lint-staged, becomes cumbersome. The reliance on globs for file selection and formatting is deemed unfavorable. The author proposes a reimagined CLI structure that addresses these issues by introducing subcommands and explicit file selection. This ensures editors can easily determine which files to format, enables CI-friendly operations, and simplifies one-off formatting tasks from the command line.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

 

Problem solution for: A better Prettier CLI and config file

 

To address the problems mentioned in the description and implement the proposed solution, here’s an outline of the steps that could be taken:

1. Revamped CLI Structure: Implement a new CLI structure for Prettier that includes subcommands for different operations. This can be achieved by enhancing the existing CLI implementation or developing a new CLI tool specifically designed for Prettier.
2. Subcommands and Options: Implement the suggested subcommands, such as format, check, and stdio, along with the required options for each subcommand. The format subcommand should handle file formatting and overwriting, while the check subcommand should perform checks to determine if files are already formatted. The stdio subcommand should enable Prettier to process input from stdin and produce formatted output to stdout.
3. File Selection and Formatting: Refactor the file selection process to eliminate the reliance on globs. Instead, allow explicit file paths or directories to be provided as arguments to the subcommands. Implement logic to automatically discover files within directories recursively for formatting. Ensure proper handling of ignored files, displaying relevant messages when encountering ignored or unsupported file types.
4. Output and Messages: Modify the output format to provide concise and informative messages. Use a minimalistic approach, similar to tools like black, to convey the formatting status. Display messages indicating successful formatting or the number of files formatted. Include notes when files are ignored or encounter errors during the formatting process.
5. Configuration: Introduce the prettier.json configuration file as the primary source of configuration for Prettier. Ensure that the file is required for Prettier to run, making Prettier opt-in for projects. Allow configuration options to be specified globally and per-language, accommodating specific formatting preferences. Enable file extension mappings, allowing customization of file types handled by Prettier. Implement support for specifying ignore patterns, supporting gitignore-style patterns and linking to other ignore files.
6. Tools Integration: Maintain compatibility with existing Prettier configuration approaches, such as loading configurations from npm packages like “@company/prettier-config.” Ensure smooth integration with popular editors and development tools, providing clear guidelines on how to incorporate the new CLI structure and prettier.json configuration.
7. User-Friendly Initialization: Consider implementing an interactive prettier init command to assist users in creating a prettier.json configuration file. This command can guide users through language preferences, ignore patterns, and file extension mappings based on the files found in the project. Detect existing ignore files like .gitignore or .eslintignore and provide options to link to them.

By implementing these steps, the proposed solution aims to simplify Prettier’s CLI usage, enhance explicitness, and provide a more streamlined and flexible approach to file formatting and configuration.

 

Other popular problems with prettier

 

Problem 1: Inconsistent Formatting

Description: One common problem with Prettier is that it can sometimes lead to inconsistent formatting across different codebases. This issue arises when multiple developers have different Prettier configurations or when Prettier’s default settings don’t align with the desired code style of a project. As a result, code files may appear differently formatted, causing confusion and potential conflicts during collaboration.

Solution: To address this issue, it is essential to establish a consistent code style across the project and ensure that all developers adhere to it. This can be achieved by creating a shared configuration file, such as .prettierrc or prettier.config.js, that defines the desired formatting rules. By sharing this configuration file among the team and enforcing its usage, you can ensure consistent formatting across all codebases.

Example code block illustrating a shared configuration file:

 

// .prettierrc

{
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2
}

 

Problem 2: Ignoring Files or Directories

Description: Another challenge with Prettier is selectively ignoring certain files or directories during formatting. There may be cases where specific files, such as generated code or third-party libraries, should be excluded from the formatting process. However, configuring Prettier to ignore these files can be confusing and may require manual adjustments when the file structure changes.

Solution: Prettier provides an option to specify files or patterns to ignore through the .prettierignore file. This file follows the same format as .gitignore and allows you to define glob patterns for files and directories to be excluded from formatting. By utilizing the .prettierignore file effectively, you can ensure that Prettier skips formatting for the specified files or directories.

Example code block illustrating the usage of .prettierignore:

 

# .prettierignore

build/
dist/
*.min.js

 

Problem 3: Integration with Pre-commit Hooks

Description: Integrating Prettier with pre-commit hooks can pose challenges, particularly when dealing with staged changes or specific files. Many projects utilize pre-commit hooks to enforce code quality and formatting standards before committing changes to the repository. However, configuring Prettier to only format staged changes or particular files during the pre-commit process can be complex.

Solution: To overcome this problem, you can leverage Prettier’s support for running in --check mode and its integration with git hooks. By configuring a git pre-commit hook to run Prettier in --check mode, you can ensure that only the staged changes or specified files are checked for formatting issues without automatically modifying them. If any formatting errors are detected, the hook can prevent the commit from proceeding, prompting developers to fix the issues before committing.

Example code block illustrating the usage of Prettier in a pre-commit hook:

 

#!/bin/sh

# .git/hooks/pre-commit

echo "Running Prettier check..."

# Run Prettier in --check mode for staged changes
git diff --name-only --cached | xargs prettier --check

# If there are any formatting errors, exit with a non-zero status code
if [ $? -ne 0 ]; then
  echo "Prettier check failed. Please fix the formatting errors."
  exit 1
fi

echo "Prettier check passed."

 

By addressing these common problems with Prettier and implementing the suggested solutions, developers can achieve consistent code formatting, effectively ignore specific files or directories, and seamlessly integrate Prettier into their pre-commit workflows.

 

Prettier is a popular code formatting tool used in the development community. It aims to simplify the process of enforcing consistent code styles across different programming languages and projects. Prettier analyzes code files and automatically applies formatting rules to ensure a standardized and clean codebase. It eliminates the need for manual formatting and reduces debates over style preferences within a development team.

At its core, Prettier operates based on a set of default rules that define the desired formatting style. These rules cover various aspects such as indentation, line breaks, trailing commas, quotes, and more. Prettier supports a wide range of programming languages, including JavaScript, TypeScript, CSS, HTML, JSON, and Markdown. Additionally, Prettier provides configuration options that allow developers to customize the formatting rules to align with specific project requirements. It integrates seamlessly with popular code editors, build tools, and continuous integration systems, making it convenient to incorporate into existing development workflows.

Overall, Prettier simplifies the task of code formatting by automating the process and providing a consistent style across projects. Its ease of use, wide language support, and integration capabilities make it a valuable tool for developers striving for clean and well-formatted codebases.

 

Most popular use cases for prettier

 

1. Code Formatting: Prettier excels at automatically formatting code according to predefined rules, ensuring consistency and readability. By running Prettier on code files, developers can eliminate manual formatting and rely on the tool to handle indentation, line breaks, spacing, and other formatting aspects. For example, in JavaScript, Prettier can transform the following unformatted code block:

 

function   exampleFunction(){
return    {  name: 'John',  age:   25   };
}

 

Into the formatted code:

 

function exampleFunction() {
  return {
    name: 'John',
    age: 25,
  };
}

 

2. Integration with Development Tools: Prettier seamlessly integrates with various development tools, enabling effortless code formatting within existing workflows. It provides plugins or extensions for popular code editors such as Visual Studio Code, Sublime Text, and Atom, allowing developers to format code directly from their editor. Prettier can also be integrated into build systems and version control hooks, ensuring consistent formatting during the development process. This integration enables developers to enforce code formatting automatically and maintain a clean codebase across the entire project.
3. Customization and Configuration: Prettier offers configuration options to tailor the formatting rules to specific project requirements. Developers can create a .prettierrc file in the project directory to define custom settings. This configuration file allows specifying options such as indentation size, line width, quote styles, and more. By customizing the formatting rules, developers can adapt Prettier to match their preferred coding style or adhere to project-specific guidelines. Here’s an example of a .prettierrc file:

 

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80
}

 

In this example, Prettier is configured to use semicolons, single quotes for strings, a tab width of 2 spaces, and a maximum line width of 80 characters.

By leveraging these capabilities, developers can utilize Prettier to achieve consistent code formatting, streamline their development workflow, and easily customize the formatting rules to suit their specific needs.