Installation

npm i -D prettier @dunggramer/prettier
# or
yarn add -D prettier @dunggramer/prettier
# or
pnpm i -D prettier @dunggramer/prettier

Usage

To enable the rules, add a prettier property in your package.json. See the Prettier configuration docs for more details.

{
  "name": "my-projects-name",
+ "prettier": "@dunggramer/prettier",
  "devDependencies": {
    "@dunggramer/prettier": "^4.0.0"
  }
}

If you don't want to use package.json, you can use any of the supported extensions to export a string:

// `.prettierrc.json`
"@dunggramer/prettier"

// `prettier.config.js` or `.prettierrc.js`
module.exports = '@dunggramer/prettier';

It is also recommended to add the following scripts to your package.json for easy usage.

"format": "prettier --ignore-path='.gitignore' --list-different --write .",
"format:check": "prettier --ignore-path='.gitignore' --check .",

Additionally, it is recommended to install the VS Code Extension to get in-editor formatting support.

Extending

This configuration is not intended to be changed, but if you have a setup where modification is required, it is possible. To extend a configuration you will need to use a prettier.config.js file that exports an object:

// prettier.config.js
module.exports = {
  ...require('@dunggramer/prettier'),
  semi: false,
};

Template Literals

If you want using template literals, you can use the following configuration:

// .prettierrc
'@dunggramer/prettier/react';

| Language, Framework, Library | Template literals | | ---------------------------- | ----------------------------------- | | Angular | @dunggramer/prettier/angular | | React | @dunggramer/prettier/react | | Vue | @dunggramer/prettier/vue | | React Native | @dunggramer/prettier/react-native |

| Extracted from repository | Template literals | | ------------------------- | ---------------------------------------- | | Airbnb | @dunggramer/prettier/airbnb | | typescript-eslint | @dunggramer/prettier/typescript-eslint |

Prettier Properties

arrowParens

Always include parentheses | Example: (x) => x
arrowParens: 'always'

bracketSpacing

Print spaces between brackets in object literals | Example: {foo: bar} => { foo: bar }
bracketSpacing: true

endOfLine

Use the operating system's line endings | Example: \n => \r\n
endOfLine: 'auto'

jsxSingleQuote

Use double quotes in JSX. jsxSingleQuote: false

pluginSearchDirs

Disable search folder plugins.
pluginSearchDirs: false

printWidth

For readability, and to avoid horizontal scrolling.
printWidth: 80

proseWrap

Wrap prose if it exceeds the print width.
proseWrap: 'always'

quoteProps

If at least one property in an object requires quotes, quote all properties
quoteProps: 'consistent'
Example:

{foo: "bar", "baz": 42, "qux": true} => {"foo": "bar", "baz": 42, "qux": true}

semi

Print semicolons at the ends of statements.
semi: true
Example:

console.log('foo') => console.log('foo');

singleQuote

Use single quotes instead of double quotes.
singleQuote: true
Example:

"foo" => 'foo'

tabWidth

Specify the number of spaces per indentation-level.
tabWidth: 2

trailingComma

Print trailing commas wherever possible when multi-line.
trailingComma: 'es5'
Example:

const user = {
  firstName: 'foo',
  lastName: 'bar'
};
=> ---
const user = {
  firstName: 'foo',
+ lastName: 'bar',
};

useTabs

Indent lines with spaces instead of tabs. Using the space bar makes the layout more flexible.
useTabs: false