Streamline Your Code with Prettier on Linux Bash

For developers seeking to maintain a consistent coding style, automated tools like Prettier have become invaluable. Prettier is an opinionated code formatter that supports many languages and eliminates the need for style arguments within your team. In this article, we’ll explore how you can install and use Prettier on Linux systems, ensuring your projects remain clean and uniform.

What is Prettier?

Prettier is more than just a tool to make your code look good. It enforces a consistent style by parsing your code and re-printing it with its own rules, integrating seamlessly with most editors and with a robust set of configurations. This not only increases readability but also helps in reducing the time spent formatting code manually.

Installing Prettier on Linux

Before installing Prettier, you must have Node.js and npm (Node Package Manager) installed on your machine as Prettier runs in a Node.js environment. Here’s a step-by-step guide to installing Node.js and npm based on your Linux distribution, followed by the installation of Prettier.

1. Installing Node.js and npm:

For Ubuntu and other Debian-based distros:

1. Open your terminal and update your package list: bash sudo apt update
2. Install Node.js and npm: bash sudo apt install nodejs npm

For Fedora and other DNF-based distros:

1. Update your DNF package index: bash sudo dnf -y update
2. Install Node.js and npm: bash sudo dnf -y install nodejs npm

For openSUSE and other Zypper-based distros:

1. Refresh your repository list: bash sudo zypper refresh
2. Install Node.js and npm: bash sudo zypper install nodejs npm

2. Installing Prettier:

Once Node.js and npm are installed, you can install Prettier using npm:

npm install --save-dev --save-exact prettier

Alternatively, if you want Prettier available globally (which is useful if you want to use it across multiple projects), you can add the global flag:

npm install --global prettier

Using Prettier

With Prettier installed, you can start formatting files right away. To format a JavaScript file, you would use:

prettier --write yourfile.js

This command will format yourfile.js according to the default rules of Prettier. If you need to tailor the formatting rules, you can do so by creating a .prettierrc file in your project directory where you specify different configurations.

Automation and Integration

To maximise Prettier’s potential, it’s useful to integrate it with your code editor so that files are automatically formatted on save or before commits. Most popular editors like VS Code or Sublime Text have extensions or plugins for Prettier.

For Git integration:

You can ensure every commit is formatted properly by using a pre-commit hook with tools like Husky. Install Husky and lint-staged, then set up your package.json like this:

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,css,md}": "prettier --write"
  }
}

This configuration ensures that all JavaScript, CSS, and markdown files are formatted according to Prettier rules before each commit.

Conclusion

Prettier is a powerful tool for teams and individual developers to eliminate inconsistencies in coding styles. By integrating it into your Linux development environment, you streamline your coding workflow, improve code quality, and save time. Follow the install steps above according to your Linux distribution and start enjoying hassle-free code formatting with Prettier today!

Further Reading

Here are some further reading suggestions to expand your knowledge on Prettier and similar tools:

1. Official Prettier Documentation
   Explore detailed documentation, configuration guides, and integration tips directly from the source.
   Prettier Documentation

2. Node.js Installation Guide
   Comprehensive guide on how to install Node.js on various operating systems, critical for running Prettier.
   Node.js Installation

3. Integrating Prettier with Visual Studio Code
   Learn how to set up Prettier in one of the most popular code editors to enhance your coding experience.
   Integrate Prettier with VS Code

4. Using Husky for Automatic Code Formatting
   A tutorial on setting up Husky pre-commit hooks to automate code formatting with Prettier.
   Husky and Prettier Setup

5. Comparison of Code Formatters: Prettier vs. ESLint
   Understand the differences and when to use each tool for maintaining coding standards.
   Prettier vs. ESLint

These resources provide a solid foundation for mastering Prettier and integrating it effectively into your development workflow.