Coding style guide

[MCTaylor17]

A recent PR highlighted the lack of coding style guidelines for this project.

In addition to adding a linter, a popular solution for JS projects is to use Prettier which helps do all the grunt work: https://prettier.io/docs/en/why-prettier.html

This issue could also apply to other repos, but this might be a good place to have the conversation.

[MCTaylor17]

I just setup VS Code with my personal preferences for Prettier. I've annotated my reasoning behind each option (see docs)

{
  // default
  "prettier.printWidth": 80,

  // default
  "prettier.tabWidth": 2,

  // default | tabs are better but I really don't care
  "prettier.useTabs": false,

  // !default | much cleaner
  "prettier.semi": false,

  // default | more visible, can't be confused with backticks, often follow/precede characters that require the shift key (eg `$("p")`), and single quotes are useful for English, "wouldn't you agree?"
  "prettier.singleQuote": false,

  // default | much easier to maintain
  "prettier.quoteProps": "as-needed",

  // default | <This is="better/> <This is='worse'/>
  "prettier.jsxSingleQuote": false,

  // !default | much easier to append items to objects/arrays
  "prettier.trailingComma": "es5",

  // default | {too: "cramped"}, { just: "right" }
  "prettier.bracketSpacing": true,

  // default | easier to spot closing bracket
  "prettier.jsxBracketSameLine": false,

  // !default | less clean but much easier to add a second function parameter
  "prettier.arrowParens": "always",

  // default | no preference
  "prettier.requirePragma": false,

  // default | not committed to @docblock
  "prettier.insertPragma": false,

  // default | avoids conflicts with some md renderers
  "prettier.proseWrap": "preserve",

  // default | avoids errors with inline tags
  "prettier.htmlWhitespaceSensitivity": "css",

  // default | preserves coding space
  "prettier.vueIndentScriptAndStyle": false,

  // !default | because Windows
  "prettier.endOfLine": "lf",
}

[MCTaylor17]

As config file:

// .prettierrc.js
module.exports = {
    // default
    printWidth: 80,

    // default
    tabWidth: 2,

    // default | tabs are better but I really don't care
    useTabs: false,

    // !default | much cleaner
    semi: false,

    // default | more visible, can't be confused with backticks, often follow/precede characters that require the shift key (eg `$("p")`), and single quotes are useful for English, "wouldn't you agree?"
    singleQuote: false,

    // default | much easier to maintain
    quoteProps: "as-needed",

    // default | <This is="better/> <This is='worse'/>
    jsxSingleQuote: false,

    // !default | much easier to append items to objects/arrays
    trailingComma: "es5",

    // default | {too: "cramped"}, { just: "right" }
    bracketSpacing: true,

    // default | easier to spot closing bracket
    jsxBracketSameLine: false,

    // !default | less clean but much easier to add a second function parameter
    arrowParens: "always",

    // default | no preference
    requirePragma: false,

    // default | not committed to @docblock
    insertPragma: false,

    // default | avoids conflicts with some md renderers
    proseWrap: "preserve",

    // default | avoids errors with inline tags
    htmlWhitespaceSensitivity: "css",

    // default | preserves coding space
    vueIndentScriptAndStyle: false,

    // !default | because Windows
    endOfLine: "lf",
}