Stancer Prettier configuration

This repository contains the Stancer configuration for Prettier.

Installation

With npm:

npm install --save-dev @stancer/prettier

With pnpm:

pnpm add --save-dev @stancer/prettier

With yarn:

yarn add --dev @stancer/prettier

Usage

Once installed, you can use it to configure Prettier.

// prettier.config.mjs
import { createConfig } from '@stancer/prettier';

export default createConfig();

You can override the configuration by passing an object to the createConfig function.

import { createConfig } from '@stancer/prettier';

export default createConfig({
  printWidth: 80,
});

You can also add it to the extends array if you want.

{
  "extends": ["@stancer/prettier"]
}

This package will format ts, vue, svg, package.json, tsconfig.json and more.

Configuration

Global configurations

| Name | Default | Description | |----------------------------|---------------|-------------| | arrowParens | 'always' | Include parentheses around a sole arrow function parameter (see Prettier documentation). | | bracketSameLine | false | Put the end bracket at the end of the line (true) or on a new line (false) (see Prettier documentation). | | bracketSpacing | true | Print spaces between brackets in object literals (see Prettier documentation). | | endOfLine | 'lf' | Use line feeds for line ending (see Prettier documentation). | | printWidth | 120 | Specify the line length that the printer will wrap on (see Prettier documentation). | | quoteProps | 'as-needed' | Only add quotes around object properties where required (see Prettier documentation). | | semi | true | Print semicolons at the ends of statements (see Prettier documentation). | | singleAttributePerLine | true | Enforce single attribute per line (see Prettier documentation). | | singleQuote | true | Use single quotes instead of double quotes (see Prettier documentation). | | sortAttributes | true | Will activate the plugin prettier-plugin-organize-attributes (see configuration below). | | sortCss | true | Will activate the plugin prettier-plugin-css-order (see configuration below). | | sortImports | true | Will activate the plugin @trivago/prettier-plugin-sort-imports (see configuration below). | | tabWidth | 2 | Specify the number of spaces per indentation-level (see Prettier documentation). | | trailingComma | 'all' | Add trailing commas wherever possible (see Prettier documentation). | | useTabs | false | Indent lines with spaces instead of tabs (see Prettier documentation). | | vueIndentScriptAndStyle | false | Do not indent script and style in Vue SFC (see Prettier documentation). |

CSS/SASS relative configurations

This configure the plugin prettier-plugin-css-order.

| Name | Default | Description | |-------------------------------------|--------------------|-------------| | cssDeclarationSorterOrder | 'concentric-css' | Order properties applying outside the box model, moving inward to intrinsic changes. | | cssDeclarationSorterKeepOverrides | false | Sort shorthand and longhand declarations. |

Multiline arrays

This configure the plugin prettier-plugin-multiline-arrays.

| Name | Default | Description | |-------------------------------------|--------------------|-------------| | multilineArraysLinePattern | | Allow you to define a pattern. | | multilineArraysWrapThreshold | 3| Array will be splitted on multiple lines if it contains at least three items. |

Sort imports

This configure the plugin @trivago/prettier-plugin-sort-imports.

| Name | Default | Description | |-------------------------------------|--------------------|-------------| | importOrder | ['^node:', '^(?:(?:@w)\|[^.])', '^w:', '^@[^w]', '^.'] | Define the import order (see original configuration). | | importOrderCaseInsensitive | false | Use case-sensitive sorting (see original configuration). | | importOrderGroupNamespaceSpecifiers | true | Group namespace specifiers to the top of import groups (see original configuration). | | importOrderSeparation | true | Separate import by blocks (see original configuration). | | importOrderSortSpecifiers | true | Sort the specifiers in import (see original configuration). |

Organize attributes

This configure the plugin prettier-plugin-organize-attributes.

| Name | Default | Description | |-------------------------------------|--------------------|-------------| | attributeGroups | See code | Define the attributes order. The order will try to keep at the same position Vue and HTML attributes (aka group class, v-bind:class and :class). |