Default prettier config with comments and links to prettier rules

prettier.config.js

module.exports = {
  /**
   * Print Width
   * https://prettier.io/docs/en/options.html#print-width
   *
   * Specify the line length that the printer will wrap on.
   *
   * printWidth: <int>
   * default: 80
   */
  // printWidth: 80,

  /**
   * Tab Width
   * https://prettier.io/docs/en/options.html#tab-width
   *
   * Specify the number of spaces per indentation-level.
   *
   * tabWidth: <int>
   * default: 2
   */
  // tabWidth: 2,

  /**
   * Tabs
   * https://prettier.io/docs/en/options.html#tabs
   *
   * Indent lines with tabs instead of spaces.
   *
   * useTabs: <bool>
   * default: false
   */
  // useTabs: false,

  /**
   * Semicolons
   * https://prettier.io/docs/en/options.html#semicolons
   *
   * Print semicolons at the ends of statements
   *
   * semi: <bool>
   * default: true
   */
  // semi: true,

  /**
   * Quotes
   * https://prettier.io/docs/en/options.html#quotes
   *
   * Use single quotes instead of double quotes.
   *
   * singleQuote: <bool>
   * default: false
   */
  // singleQuote: false,

  /**
   * Quote Props
   * https://prettier.io/docs/en/options.html#quote-props
   *
   * Change when properties in objects are quoted.
   *
   * quoteProps: "<as-needed|consistent|preserve>"
   * default: "as-needed"
   */
  // quoteProps: 'as-needed',

  /**
   * JSX Quotes
   * https://prettier.io/docs/en/options.html#jsx-quotes
   *
   * Use single quotes instead of double quotes in JSX.
   *
   * jsxSingleQuote: <bool>
   * default: false
   */
  // jsxSingleQuote: false,

  /**
  * Trailing Commas
  * https://prettier.io/docs/en/options.html#trailing-commas
  *
  * Print trailing commas wherever possible when multi-line. (A single-line array, for example, never gets trailing commas.)
  *
  * trailingComma: "<es5|none|all>"
  * default: 'es5'
  */
  // trailingComma: 'es5',

  /**
  * Bracket Spacing
  * https://prettier.io/docs/en/options.html#bracket-spacing
  *
  * Print spaces between brackets in object literals.
  *
  * bracketSpacing: <bool>
  * default: true
  */
  // bracketSpacing: true,

  /**
   * Bracket Line
   * https://prettier.io/docs/en/options.html#bracket-line
   *
   * Put the > of a multi-line HTML (HTML, JSX, Vue, Angular) element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
   *
   * bracketSameLine: <bool>
   * default: false
   */
  // bracketSameLine: false,

  /**
   * [Deprecated] JSX Brackets
   * https://prettier.io/docs/en/options.html#jsx-brackets
   *
   * This option has been deprecated in v2.4.0, use --bracket-same-line instead
   * Put the > of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
   *
   * jsxBracketSameLine: <bool>
   * default: false
   */
  // jsxBracketSameLine: false,

  /**
   * Arrow Function Parentheses
   * https://prettier.io/docs/en/options.html#arrow-function-parentheses
   *
   * Include parentheses around a sole arrow function parameter.
   *
   * arrowParens: "<always|avoid>"
   * default: "always"
   */
  // arrowParens: 'always',

  /**
   * Range
   * https://prettier.io/docs/en/options.html#range
   *
   * Format only a segment of a file.
   *
   * rangeStart: <int>
   * default: 0
   *
   * rangeEnd: <int>
   * default: Infinity
   */
  // rangeStart: 0,
  // rangeEnd: Infinity,

  /**
   * Parser
   * https://prettier.io/docs/en/options.html#parser
   *
   * Specify which parser to use.
   *
   * parser: "<string>" | require("./my-parser")
   * no default
   *
   */
  // parser: '',

  /**
   * File Path
   * https://prettier.io/docs/en/options.html#file-path
   *
   * Specify the file name to use to infer which parser to use.
   *
   * filepath: "<string>"
   * no default
   */
  // filepath: '',

  /**
   * Require pragma
   * https://prettier.io/docs/en/options.html#require-pragma
   *
   * Prettier can restrict itself to only format files that contain a special comment, called a pragma, at the top of the file. This is very useful when gradually transitioning large, unformatted codebases to prettier.
   *
   * requirePragma: <bool>
   * default: false
   */
  // requirePragma: false,

  /**
   * Insert Pragma
   * https://prettier.io/docs/en/options.html#insert-pragma
   *
   * Prettier can insert a special @format marker at the top of files specifying that the file has been formatted with prettier. This works well when used in tandem with the --require-pragma option. If there is already a docblock at the top of the file then this option will add a newline to it with the @format marker.
   *
   * insertPragma: <bool>
   * default: false
   */
  // insertPragma: false,

  /**
   * Prose Wrap
   * https://prettier.io/docs/en/options.html#prose-wrap
   *
   * By default, Prettier will wrap markdown text as-is since some services use a linebreak-sensitive renderer, e.g. GitHub comment and BitBucket. In some cases you may want to rely on editor/viewer soft wrapping instead, so this option allows you to opt out with "never".
   *
   * proseWrap: "<always|never|preserve>"
   * default: "preserve"
   */
  // proseWrap: 'preserve',

  /**
   * HTML Whitespace Sensitivity
   * https://prettier.io/docs/en/options.html#html-whitespace-sensitivity
   *
   * Specify the global whitespace sensitivity for HTML files, see whitespace-sensitive formatting for more info.
   *
   * htmlWhitespaceSensitivity: "<css|strict|ignore>"
   * default: "css"
   */
  // htmlWhitespaceSensitivity: 'css',

  /**
   * Vue files script and style tags indentation
   * https://prettier.io/docs/en/options.html#vue-files-script-and-style-tags-indentation
   *
   * Whether or not to indent the code inside <script> and <style> tags in Vue files. Some people (like the creator of Vue) don’t indent to save an indentation level, but this might break code folding in your editor.
   *
   * vueIndentScriptAndStyle: <bool>
   * default: false
   */
  // vueIndentScriptAndStyle: false,

  /**
   * End of Line
   * https://prettier.io/docs/en/options.html#end-of-line
   *
   * For historical reasons, there exist two common flavors of line endings in text files. That is \n (or LF for Line Feed) and \r\n (or CRLF for Carriage Return + Line Feed). The former is common on Linux and macOS, while the latter is prevalent on Windows. Some details explaining why it is so can be found on Wikipedia.
   *
   * endOfLine: "<lf|crlf|cr|auto>"
   * default: "lf"
   */
  // endOfLine: 'lf',
  
  /**
   * Embedded Language Formatting
   * https://prettier.io/docs/en/options.html#embedded-language-formatting
   *
   * Control whether Prettier formats quoted code embedded in the file.
   *
   * embeddedLanguageFormatting: "<off|auto>"
   * default: "auto"
   */
  // embeddedLanguageFormatting: 'auto',
  
  /**
   * Single Attribute Per Line
   * https://prettier.io/docs/en/options.html#single-attribute-per-line
   *
   * Enforce single attribute per line in HTML, Vue and JSX.
   *
   * singleAttributePerLine: "<bool>"
   * default: "false"
   */
  // singleAttributePerLine: 'false',
};

Thank you, btw they added a new option, https://prettier.io/docs/en/options.html#embedded-language-formatting

To derive latest default prettier options from official docs page (https://prettier.io/docs/en/options.html#print-width), run this script in the console in a "modern" browser:

var defaultOptions = Object.fromEntries(
  $$('tbody').map(tbody => {
    var optionsDataRow = tbody.lastElementChild // tr
    var APIOverrideCell = optionsDataRow.lastElementChild.lastElementChild.innerText
    var optionKey = APIOverrideCell.split(':')[0]

    var defaultValue = optionsDataRow.firstElementChild.innerText

    try {
      if (defaultValue === "None") defaultValue = undefined
      defaultValue = eval(defaultValue)
    } catch(e) {
      
    }

    return [optionKey, defaultValue]
  })
)
console.log(defaultOptions)
copy(JSON.stringify(defaultOptions, null, 2))

as of today, default options are:

module.exports = {
arrowParens: "always",
bracketSpacing: true,
embeddedLanguageFormatting: "auto",
endOfLine: "lf",
filepath: undefined,
htmlWhitespaceSensitivity: "css",
insertPragma: false,
jsxBracketSameLine: false,
jsxSingleQuote: false,
parser: undefined,
printWidth: 80,
proseWrap: "preserve",
quoteProps: "as-needed",
rangeEnd: Infinity,
requirePragma: false,
semi: true,
singleQuote: false,
tabWidth: 2,
trailingComma: "es5",
useTabs: false,
vueIndentScriptAndStyle: false
}

Latest defaults:

module.exports = {
arrowParens: "always"
bracketSameLine: false // ** NEW
bracketSpacing: true
embeddedLanguageFormatting: "auto"
endOfLine: "lf"
filepath: undefined
htmlWhitespaceSensitivity: "css"
insertPragma: false
jsxBracketSameLine: false
jsxSingleQuote: false
parser: undefined
printWidth: 80
proseWrap: "preserve"
quoteProps: "as-needed"
rangeEnd: Infinity
requirePragma: false
semi: true
singleQuote: false
tabWidth: 2
trailingComma: "es5"
useTabs: false
vueIndentScriptAndStyle: false
}

Cross-referencing - prettier defaults to reduce merge conflicts:
https://gist.github.com/devinrhode2/08c84e175c61b282b76f4766a94e4a01

Thank you very much for creating this gist! It has been fairly frustrating trying to find the default prettier configuration attributes in a concise format.

for sure

btw: it's good to assert defaults. People can configure prettier options inside their personal vscode settings, which can then create thrashing in projects that don't assert defaults.

@devinrhode2 In our case I wanted the local formatting for the developers in the team to match the formatting that occurs when running npm run format (prettier --write) in our pre-commit hook.

With that said I noticed that the rangeEnd attribute requires an Integer value. Using a js file format, setting the attribute to Infinity works fine. However, using a yaml file format it complains that it does not match the schema that it validates towards. This is the schema and this is the error

It feels like the schema must be wrong, requiring an Integer value but having a null value as the default. Any idea how this could be solved on my end, or is this something that has to be addressed in the prettier code base?

Just don't use yaml

I like vanilla .js because it's obvious how to share configs, and you get best in class typescript autocomplete and type checking

Thank u @devinrhode2. It saved my day.

Sorry @daabe3 - I didn't have time to give a good answer a while back.

The correct answer, since you are just asserting prettier's defaults, is to remove the rangeEnd config line in your *.yaml file.

@devinrhode2 Thank you for your more thorough answer!

I still seem to have a few issues with this approach. One is that the default settings above do not seem to match the settings that are applied when running prettier --write in the CLI. Tweaking a few options I managed to get it to work.

Except for one thing. It seems that the formatOnSave functionality insists on moving array indices into separate lines (noticed in JSON files), while the CLI command prettier --write moves them back into one line. Do you have any idea why this is happening?

Nevermind, I was using a different default formatter.

Thanks @einSelbst and @devinrhode2! I was always planning to update this based on your comments. It just took a wee bit longer than I thought it would...

Is there a way to config using JSON so that the ">" symbol is properly aligned behind an object?

For example, I'm using Vue and I have an UI component that, when I save, (format on save turned on) it formats nicely with my other prettier configs, except the ">" is not behind the div at the bottom of my app.vue. How would I make it so if I have a < div >< / div > the ">" from last div is behind the actual div and not on a separate line?

Thanks for this gist though!

EDIT It seems that using bracketSameLine does not work for the single > bracket line, only works for the /> brackets.

@vtonu I think the point of using prettier, is that you don't get to micro manage your formatting. When I introduced prettier at a previous job, a lot of people complained about little things like this at first. I told them to just give it a try for a while. After about a month, no one cared anymore.