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',
};

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.