@zl-asica/prettier-config

English | 中文

A shareable and reusable Prettier configuration by ZL Asica, designed to ensure consistent code formatting across JavaScript, TypeScript, and React projects.

Installation

Install this package as a development dependency in your project:

npm install --save-dev prettier @zl-asica/prettier-config
# or with Yarn
yarn add -D prettier @zl-asica/prettier-config
# or with pnpm
pnpm add -D prettier @zl-asica/prettier-config

Usage

To use this Prettier configuration, create a .prettierrc file in the root directory of your project with the following content:

"@zl-asica/prettier-config"

Alternatively, if you prefer .prettierrc.js or prettier.config.js:

module.exports = require("@zl-asica/prettier-config")

Now, all Prettier commands will follow the configuration provided by @zl-asica/prettier-config.

Configuration Details

This configuration includes the following Prettier options:

• Trailing commas: Only where valid in ES5 (e.g., objects, arrays).
• Tab width: 2 spaces per tab.
• Semicolons: Enable semicolons at the end of statements.
• Quotes: Single quotes for strings and JSX.
• Bracket spacing: Spaces inside object literals ({ foo: bar }).
• Arrow function parameters: Always include parentheses, even with a single parameter.
• Print width: Wrap lines at 80 characters.
• End of line: LF for consistent cross-platform line endings.
• Single attribute per line: Puts each attribute on a new line in JSX.
• Embedded language formatting: Automatically formats embedded code (e.g., HTML in markdown).
• Vue support: Indents <script> and <style> tags in Vue files.

Recommended .prettierignore

To prevent formatting of unnecessary files, you can use the following .prettierignore template. You can download this file directly or copy and paste the contents into a new .prettierignore file in your project.

# Ignore node_modules, build output, and logs
node_modules/
dist/
build/
*.log
.DS_Store

# Ignore documentation and large data files
docs/
data/

# Ignore other files not needing formatting
*.min.js
*.lock

Download:
Right-click here and select "Save Link As..." to download .prettierignore

Why Use This Configuration?

This configuration ensures:

• Consistent code formatting across multiple projects.
• Easy integration with any JavaScript, TypeScript, or React project.
• Clear and minimal formatting preferences that enhance readability.

Contributing

If you’d like to suggest improvements, please feel free to open a pull request or issue on GitHub.

License

This project is licensed under the MIT License.