npm package: @stancer/prettier
Description: Stancer prettier configuration
Latest version: 3.0.5

# 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.

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

export default createConfig();
```

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

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

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

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

```json
{
  "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](https://prettier.io/docs/options#arrow-function-parentheses)). |
| bracketSameLine            | `false`       | Put the end bracket at the end of the line (`true`) or on a new line (`false`) ([see Prettier documentation](https://prettier.io/docs/options#bracket-line)). |
| bracketSpacing             | `true`        | Print spaces between brackets in object literals ([see Prettier documentation](https://prettier.io/docs/options#bracket-spacing)). |
| endOfLine                  | `'lf'`        | Use line feeds for line ending ([see Prettier documentation](https://prettier.io/docs/options#end-of-line)). |
| printWidth                 | `120`         | Specify the line length that the printer will wrap on ([see Prettier documentation](https://prettier.io/docs/options#print-width)). |
| quoteProps                 | `'as-needed'` | Only add quotes around object properties where required ([see Prettier documentation](https://prettier.io/docs/options#quote-props)). |
| semi                       | `true`        | Print semicolons at the ends of statements ([see Prettier documentation](https://prettier.io/docs/options#semicolons)). |
| singleAttributePerLine     | `true`        | Enforce single attribute per line ([see Prettier documentation](https://prettier.io/docs/options#single-attribute-per-line)). |
| singleQuote                | `true`        | Use single quotes instead of double quotes ([see Prettier documentation](https://prettier.io/docs/options#quotes)). |
| 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](https://prettier.io/docs/options#tab-width)). |
| trailingComma              | `'all'`       | Add trailing commas wherever possible ([see Prettier documentation](https://prettier.io/docs/options#trailing-commas)). |
| useTabs                    | `false`       | Indent lines with spaces instead of tabs ([see Prettier documentation](https://prettier.io/docs/options#tabs)). |
| vueIndentScriptAndStyle    | `false`       | Do not indent `script` and `style` in Vue SFC ([see Prettier documentation](https://prettier.io/docs/options#vue-files-script-and-style-tags-indentation)). |


### CSS/SASS relative configurations

This configure the plugin [prettier-plugin-css-order](https://www.npmjs.com/package/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](https://www.npmjs.com/package/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](https://www.npmjs.com/package/@trivago/prettier-plugin-sort-imports).

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


### Organize attributes

This configure the plugin [prettier-plugin-organize-attributes](https://www.npmjs.com/package/prettier-plugin-organize-attributes).

| Name                                | Default            | Description |
|-------------------------------------|--------------------|-------------|
| attributeGroups                     | [See code](src/confs/sort-vue-attributes.ts#28) | Define the attributes order. <br /> The order will try to keep at the same position Vue and HTML attributes (aka group `class`, `v-bind:class` and `:class`). |