use prettier to format html

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
     // https://github.com/prettier/eslint-config-prettier
     'prettier',
     'prettier/standard',
+    'prettier/vue',
   ],
   rules: {
     // Only allow debugger in development
@@ -33,10 +34,6 @@ module.exports = {
         ],
       },
     ],
-    'vue/multiline-html-element-content-newline': 'error',
-    'vue/singleline-html-element-content-newline': 'error',
-    'vue/no-spaces-around-equal-signs-in-attribute': 'error',
-    'vue/script-indent': ['off', null, { baseIndent: 0 }],
   },
   overrides: [
     {

.prettierrc.js

@@ -7,6 +7,8 @@ module.exports = {
   trailingComma: 'es5',
   bracketSpacing: true,
   jsxBracketSameLine: false,
-  arrowParens: 'avoid',
+  arrowParens: 'always',
   proseWrap: 'never',
+  htmlWhitespaceSensitivity: 'strict',
+  endOfLine: 'lf',
 }

.vscode/settings.json

@@ -40,6 +40,7 @@
     { "language": "html", "autoFix": true }
   ],
   "vetur.completion.useScaffoldSnippets": false,
+  "prettier.disableLanguages": [],
 
   // ===
   // HTML
@@ -62,6 +63,7 @@
   "javascript.format.enable": false,
   "json.format.enable": false,
   "vetur.validation.script": false,
+  "vetur.format.defaultFormatter.js": "none",
 
   // ===
   // CSS
@@ -71,6 +73,9 @@
   "css.validate": false,
   "scss.validate": false,
   "vetur.validation.style": false,
+  "vetur.format.defaultFormatter.css": "none",
+  "vetur.format.defaultFormatter.postcss": "none",
+  "vetur.format.defaultFormatter.scss": "none",
 
   // ===
   // MARKDOWN

aliases.config.js

@@ -59,7 +59,7 @@ fs.writeFile(
       parser: 'json',
     }
   ),
-  error => {
+  (error) => {
     if (error) {
       console.error(
         'Error while creating jsconfig.json from aliases.config.js.'

docs/tech.md

@@ -85,7 +85,7 @@ All HTML will exist within [`.vue` files](https://vuejs.org/v2/guide/single-file
 For example, any element or component can be self-closing:
 
 ```html
-<span class="fa fa-comment"/>
+<span class="fa fa-comment" />
 ```
 
 The above simply compiles to:
@@ -131,9 +131,9 @@ There are no advantages to using a JS(X) file, other than not having to use a `<
 
 For our styles, we're using SCSS and CSS modules, which you can activate by adding the `lang="scss"` and `module` attributes to style tags in Vue components:
 
-```html
+```vue
 <style lang="scss" module>
-  /* Styles go here */
+/* Styles go here */
 </style>
 ```
 
@@ -181,8 +181,8 @@ This makes all our design variables available in your component or SCSS file.
 
 As mentioned earlier, every Vue component should be a CSS module. That means the classes you define are not _actually_ classes. When you write:
 
-```html
-<style lang='scss' module>
+```vue
+<style lang="scss" module>
 .inputLabel {
   /* ... */
 }
@@ -232,9 +232,7 @@ In these cases, you can use an [attribute selector](https://developer.mozilla.or
 
 ```vue
 <template>
-  <div :class="$style.container">
-    <SomeOtherComponentContainingAnInput/>
-  </div>
+  <div :class="$style.container"><SomeOtherComponentContainingAnInput /></div>
 </template>
 
 <style lang="scss" module>
@@ -256,7 +254,7 @@ $size-grid-padding: 1.3rem;
 
 You could import our design tooling, then use CSS modules' `:export` it:
 
-```html
+```vue
 <style lang="scss" module>
 @import '@design';
 

docs/tests.md

@@ -91,7 +91,7 @@ And much more! I recommend checking out our Cypress tests in `tests/e2e/specs`,
 Beyond that, also know that you can access our app in Cypress on the `window`. For example, to dispatch a Vuex action that sets up some state:
 
 ```js
-cy.window().then(window => {
+cy.window().then((window) => {
   return window.__app__.$store.dispatch('someModule/someAction')
 })
 ```
@@ -170,14 +170,8 @@ But when you're trying to find a login link as a user, you don't just inspect th
 Instead, thinking from a user's perspective forces you to stay accessible, perhaps updating your generated HTML to:
 
 ```html
-<a
-  aria-label="Log in"
-  href="/login"
->
-  <span
-    aria-hidden="true"
-    class="icon icon-login"
-  ></span>
+<a aria-label="Log in" href="/login">
+  <span aria-hidden="true" class="icon icon-login"></span>
 </a>
 ```
 

package.json

@@ -14,7 +14,7 @@
     "lint:all:eslint": "yarn lint:eslint --ext .js,.vue .",
     "lint:all:stylelint": "yarn lint:stylelint \"src/**/*.{vue,scss}\"",
     "lint:all:markdownlint": "yarn lint:markdownlint \"docs/*.md\" \"*.md\"",
-    "lint:all:prettier": "yarn lint:prettier \"**/*.{js,json,css,scss,vue,md}\"",
+    "lint:all:prettier": "yarn lint:prettier \"**/*.{js,json,css,scss,vue,html,md}\"",
     "lint": "run-s lint:all:*",
     "test:unit": "vue-cli-service test:unit",
     "test:unit:file": "yarn test:unit --bail --findRelatedTests",
@@ -43,11 +43,12 @@
     "vuex": "3.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "3.1.x",
-    "@vue/cli-plugin-e2e-cypress": "3.1.x",
-    "@vue/cli-plugin-eslint": "3.1.x",
-    "@vue/cli-plugin-unit-jest": "3.1.x",
-    "@vue/cli-service": "3.1.x",
+    "@starptech/prettyhtml": "0.8.x",
+    "@vue/cli-plugin-babel": "3.2.x",
+    "@vue/cli-plugin-e2e-cypress": "3.2.x",
+    "@vue/cli-plugin-eslint": "3.2.x",
+    "@vue/cli-plugin-unit-jest": "3.2.x",
+    "@vue/cli-service": "3.2.x",
     "@vue/eslint-config-prettier": "4.0.x",
     "@vue/eslint-config-standard": "4.0.x",
     "@vue/test-utils": "1.0.0-beta.25",
@@ -62,8 +63,9 @@
     "markdownlint-cli": "0.13.x",
     "node-sass": "4.10.x",
     "npm-run-all": "4.1.x",
+    "prettier": "prettier/prettier#11f26a2",
     "sass-loader": "7.1.x",
-    "stylelint": "9.8.x",
+    "stylelint": "9.9.x",
     "stylelint-config-css-modules": "1.3.x",
     "stylelint-config-prettier": "4.0.x",
     "stylelint-config-recess-order": "2.0.x",

public/index.html

@@ -1,10 +1,13 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link
+      rel="shortcut icon"
+      href="<%= webpackConfig.output.publicPath %>favicon.ico"
+    />
     <title><%= webpackConfig.name %></title>
   </head>
   <body>

src/components/_base-button.vue

@@ -1,8 +1,5 @@
 <template>
-  <button
-    :class="$style.button"
-    v-on="$listeners"
-  >
+  <button :class="$style.button" v-on="$listeners">
     <slot />
   </button>
 </template>

src/components/_base-input.vue

@@ -23,7 +23,7 @@ export default {
     :value="value"
     @input="$emit('update', $event.target.value)"
     v-on="$listeners"
-  >
+  />
 </template>
 
 <style lang="scss" module>

src/components/_base-link.unit.js

@@ -22,7 +22,7 @@ describe('@components/_base-link', () => {
   let warning
   beforeEach(() => {
     warning = undefined
-    global.console.warn = jest.fn(text => {
+    global.console.warn = jest.fn((text) => {
       warning = text
     })
   })

src/components/_base-link.vue

@@ -76,19 +76,10 @@ export default {
 </script>
 
 <template>
-  <a
-    v-if="href"
-    :href="href"
-    target="_blank"
-    v-bind="$attrs"
-  >
+  <a v-if="href" :href="href" target="_blank" v-bind="$attrs">
     <slot />
   </a>
-  <RouterLink
-    v-else
-    :to="routerLinkTo"
-    v-bind="$attrs"
-  >
+  <RouterLink v-else :to="routerLinkTo" v-bind="$attrs">
     <slot />
   </RouterLink>
 </template>

src/components/_globals.js

@@ -17,7 +17,7 @@ const requireComponent = require.context(
 )
 
 // For each matching file name...
-requireComponent.keys().forEach(fileName => {
+requireComponent.keys().forEach((fileName) => {
   // Get the component config
   const componentConfig = requireComponent(fileName)
   // Get the PascalCase version of the component name

src/components/nav-bar-routes.unit.js

@@ -1,6 +1,6 @@
 import NavBarRoutes from './nav-bar-routes'
 
-const mountRoutes = options => {
+const mountRoutes = (options) => {
   return mount(
     {
       render(h) {

src/components/nav-bar-routes.vue

@@ -22,7 +22,7 @@ export default {
     // Functional components are the only components allowed
     // to return an array of children, rather than a single
     // root node.
-    return props.routes.map(route => (
+    return props.routes.map((route) => (
       <BaseLink
         tag="li"
         key={route.name}

src/components/nav-bar.unit.js

@@ -21,7 +21,7 @@ describe('@components/nav-bar', () => {
     )
 
     const profileRoute = vm.loggedInNavRoutes.find(
-      route => route.name === 'profile'
+      (route) => route.name === 'profile'
     )
     expect(profileRoute.title()).toEqual('Logged in as My Name')
   })

src/components/nav-bar.vue

@@ -39,14 +39,8 @@ export default {
 <template>
   <ul :class="$style.container">
     <NavBarRoutes :routes="persistentNavRoutes" />
-    <NavBarRoutes
-      v-if="loggedIn"
-      :routes="loggedInNavRoutes"
-    />
-    <NavBarRoutes
-      v-else
-      :routes="loggedOutNavRoutes"
-    />
+    <NavBarRoutes v-if="loggedIn" :routes="loggedInNavRoutes" />
+    <NavBarRoutes v-else :routes="loggedOutNavRoutes" />
   </ul>
 </template>
 

src/main.js

@@ -16,7 +16,7 @@ if (window.Cypress) {
 const app = new Vue({
   router,
   store,
-  render: h => h(App),
+  render: (h) => h(App),
 }).$mount('#app')
 
 // If running inside Cypress...

src/router/index.js

@@ -41,15 +41,15 @@ router.beforeEach((routeTo, routeFrom, next) => {
 
   // Check if auth is required on this route
   // (including nested routes).
-  const authRequired = routeTo.matched.some(route => route.meta.authRequired)
+  const authRequired = routeTo.matched.some((route) => route.meta.authRequired)
 
   // If auth isn't required for the route, just continue.
   if (!authRequired) return next()
 
   // If auth is required and the user is logged in...
   if (store.getters['auth/loggedIn']) {
     // Validate the local user token...
-    return store.dispatch('auth/validate').then(validUser => {
+    return store.dispatch('auth/validate').then((validUser) => {
       // Then continue if the token still represents a valid user,
       // otherwise redirect to login.
       validUser ? next() : redirectToLogin()

src/router/routes.js

@@ -30,7 +30,7 @@ export default [
     meta: {
       authRequired: true,
     },
-    props: route => ({ user: store.state.auth.currentUser || {} }),
+    props: (route) => ({ user: store.state.auth.currentUser || {} }),
   },
   {
     path: '/profile/:username',
@@ -42,7 +42,7 @@ export default [
         store
           // Try to fetch the user's information by their username
           .dispatch('users/fetchUser', { username: routeTo.params.username })
-          .then(user => {
+          .then((user) => {
             // Add the user to the route params, so that it can
             // be provided as a prop for the view component below.
             routeTo.params.user = user
@@ -58,7 +58,7 @@ export default [
     },
     // Set the user from the route params, once it's set in the
     // beforeResolve route guard.
-    props: route => ({ user: route.params.user }),
+    props: (route) => ({ user: route.params.user }),
   },
   {
     path: '/logout',
@@ -68,7 +68,7 @@ export default [
       beforeResolve(routeTo, routeFrom, next) {
         store.dispatch('auth/logOut')
         const authRequiredOnPreviousRoute = routeFrom.matched.some(
-          route => route.meta.authRequired
+          (route) => route.meta.authRequired
         )
         // Navigate back to previous page, or home as a fallback
         next(authRequiredOnPreviousRoute ? { name: 'home' } : { ...routeFrom })

src/router/views/_loading.vue

@@ -13,11 +13,7 @@ export default {
 <template>
   <Layout>
     <Transition appear>
-      <BaseIcon
-        :class="$style.loadingIcon"
-        name="sync"
-        spin
-      />
+      <BaseIcon :class="$style.loadingIcon" name="sync" spin />
     </Transition>
   </Layout>
 </template>

src/router/views/_timeout.vue

@@ -15,7 +15,8 @@ export default {
 <template>
   <Layout>
     <h1 :class="$style.title">
-      The page timed out while loading. Are you sure you're still connected to the Internet?
+      The page timed out while loading. Are you sure you're still connected to
+      the Internet?
     </h1>
   </Layout>
 </template>

src/router/views/home.vue

@@ -14,9 +14,6 @@ export default {
 <template>
   <Layout>
     <h1>Home Page</h1>
-    <img
-      src="@assets/images/logo.png"
-      alt="Logo"
-    >
+    <img src="@assets/images/logo.png" alt="Logo" />
   </Layout>
 </template>