Set up linting and autoformatting

client/.eslintrc.js

@@ -3,19 +3,19 @@ module.exports = {
   env: {
     node: true,
   },
-  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
+  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
   parserOptions: {
-    parser: "babel-eslint",
+    parser: 'babel-eslint',
   },
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
   },
   overrides: [
     {
       files: [
-        "**/__tests__/*.{j,t}s?(x)",
-        "**/tests/unit/**/*.spec.{j,t}s?(x)",
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)',
       ],
       env: {
         jest: true,

client/.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSpacing: false,
+  singleQuote: true,
+  trailingComma: 'all',
+};

client/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
+  presets: ['@vue/cli-plugin-babel/preset'],
 };

client/jest.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  preset: "@vue/cli-plugin-unit-jest",
+  preset: '@vue/cli-plugin-unit-jest',
 };

client/src/App.vue

@@ -6,10 +6,10 @@
 </template>
 
 <script>
-import HelloWorld from "./components/HelloWorld.vue";
+import HelloWorld from './components/HelloWorld.vue';
 
 export default {
-  name: "App",
+  name: 'App',
   components: {
     HelloWorld,
   },

client/src/components/HelloWorld.vue

@@ -112,7 +112,7 @@
 
 <script>
 export default {
-  name: "HelloWorld",
+  name: 'HelloWorld',
   props: {
     msg: String,
   },

client/src/main.js

@@ -1,10 +1,10 @@
-import Vue from "vue";
-import App from "./App.vue";
-import store from "./store";
+import Vue from 'vue';
+import App from './App.vue';
+import store from './store';
 
 Vue.config.productionTip = false;
 
 new Vue({
   store,
-  render: (h) => h(App),
-}).$mount("#app");
+  render: h => h(App),
+}).$mount('#app');

client/src/store/index.js

@@ -1,5 +1,5 @@
-import Vue from "vue";
-import Vuex from "vuex";
+import Vue from 'vue';
+import Vuex from 'vuex';
 
 Vue.use(Vuex);
 

client/tests/e2e/.eslintrc.js

@@ -1,10 +1,10 @@
 module.exports = {
-  plugins: ["cypress"],
+  plugins: ['cypress'],
   env: {
     mocha: true,
-    "cypress/globals": true,
+    'cypress/globals': true,
   },
   rules: {
-    strict: "off",
+    strict: 'off',
   },
 };

client/tests/e2e/plugins/index.js

@@ -16,10 +16,10 @@ module.exports = (on, config) => {
   // }))
 
   return Object.assign({}, config, {
-    fixturesFolder: "tests/e2e/fixtures",
-    integrationFolder: "tests/e2e/specs",
-    screenshotsFolder: "tests/e2e/screenshots",
-    videosFolder: "tests/e2e/videos",
-    supportFile: "tests/e2e/support/index.js",
+    fixturesFolder: 'tests/e2e/fixtures',
+    integrationFolder: 'tests/e2e/specs',
+    screenshotsFolder: 'tests/e2e/screenshots',
+    videosFolder: 'tests/e2e/videos',
+    supportFile: 'tests/e2e/support/index.js',
   });
 };

client/tests/e2e/specs/test.js

@@ -1,8 +1,8 @@
 // https://docs.cypress.io/api/introduction/api.html
 
-describe("My First Test", () => {
-  it("Visits the app root url", () => {
-    cy.visit("/");
-    cy.contains("h1", "Welcome to Your Vue.js App");
+describe('My First Test', () => {
+  it('Visits the app root url', () => {
+    cy.visit('/');
+    cy.contains('h1', 'Welcome to Your Vue.js App');
   });
 });

client/tests/e2e/support/index.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import "./commands";
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

client/tests/unit/example.spec.js

@@ -1,11 +1,11 @@
-import { shallowMount } from "@vue/test-utils";
-import HelloWorld from "@/components/HelloWorld.vue";
+import {shallowMount} from '@vue/test-utils';
+import HelloWorld from '@/components/HelloWorld.vue';
 
-describe("HelloWorld.vue", () => {
-  it("renders props.msg when passed", () => {
-    const msg = "new message";
+describe('HelloWorld.vue', () => {
+  it('renders props.msg when passed', () => {
+    const msg = 'new message';
     const wrapper = shallowMount(HelloWorld, {
-      propsData: { msg },
+      propsData: {msg},
     });
     expect(wrapper.text()).toMatch(msg);
   });