Client - update prettier config

This commit is contained in:
Sam 2021-07-25 13:23:25 +02:00
parent 433f6bfd52
commit 5d80039319
11 changed files with 113 additions and 100 deletions

View File

@ -0,0 +1,13 @@
{
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"quoteProps": "as-needed",
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "always",
"printWidth": 80,
"endOfLine": "auto",
"vueIndentScriptAndStyle": true
}

View File

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

View File

@ -4,36 +4,36 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from 'vue'
import NavBar from "@/components/NavBar.vue"; import NavBar from '@/components/NavBar.vue'
export default defineComponent({ export default defineComponent({
name: "App", name: 'App',
components: { components: {
NavBar, NavBar,
}, },
}); })
</script> </script>
<style lang="scss"> <style lang="scss">
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50; color: #2c3e50;
}
&.router-link-exact-active { #nav {
color: #42b983; padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
} }
} }
}
</style> </style>

View File

@ -127,30 +127,30 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from 'vue'
export default defineComponent({ export default defineComponent({
name: "HelloWorld", name: 'HelloWorld',
props: { props: {
msg: String, msg: String,
}, },
}); })
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> <style scoped lang="scss">
h3 { h3 {
margin: 40px 0 0; margin: 40px 0 0;
} }
ul { ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
} }
li { li {
display: inline-block; display: inline-block;
margin: 0 10px; margin: 0 10px;
} }
a { a {
color: #42b983; color: #42b983;
} }
</style> </style>

View File

@ -6,11 +6,11 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from 'vue'
export default defineComponent({ export default defineComponent({
name: "NavBar", name: 'NavBar',
}); })
</script> </script>
<style scoped></style> <style scoped></style>

View File

@ -1,7 +1,7 @@
import { createApp } from "vue"; import { createApp } from 'vue'
import App from "./App.vue"; import App from './App.vue'
import "./registerServiceWorker"; import './registerServiceWorker'
import router from "./router"; import router from './router'
import store from "./store"; import store from './store'
createApp(App).use(store).use(router).mount("#app"); createApp(App).use(store).use(router).mount('#app')

View File

@ -1,34 +1,34 @@
/* eslint-disable no-console */ /* eslint-disable no-console */
import { register } from "register-service-worker"; import { register } from 'register-service-worker'
if (process.env.NODE_ENV === "production") { if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, { register(`${process.env.BASE_URL}service-worker.js`, {
ready() { ready() {
console.log( console.log(
"App is being served from cache by a service worker.\n" + 'App is being served from cache by a service worker.\n' +
"For more details, visit https://goo.gl/AFskqB" 'For more details, visit https://goo.gl/AFskqB'
); )
}, },
registered() { registered() {
console.log("Service worker has been registered."); console.log('Service worker has been registered.')
}, },
cached() { cached() {
console.log("Content has been cached for offline use."); console.log('Content has been cached for offline use.')
}, },
updatefound() { updatefound() {
console.log("New content is downloading."); console.log('New content is downloading.')
}, },
updated() { updated() {
console.log("New content is available; please refresh."); console.log('New content is available; please refresh.')
}, },
offline() { offline() {
console.log( console.log(
"No internet connection found. App is running in offline mode." 'No internet connection found. App is running in offline mode.'
); )
}, },
error(error) { error(error) {
console.error("Error during service worker registration:", error); console.error('Error during service worker registration:', error)
}, },
}); })
} }

View File

@ -1,26 +1,26 @@
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from "../views/Home.vue"; import Home from '../views/Home.vue'
const routes: Array<RouteRecordRaw> = [ const routes: Array<RouteRecordRaw> = [
{ {
path: "/", path: '/',
name: "Home", name: 'Home',
component: Home, component: Home,
}, },
{ {
path: "/about", path: '/about',
name: "About", name: 'About',
// route level code-splitting // route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route // this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"), import(/* webpackChunkName: "about" */ '../views/About.vue'),
}, },
]; ]
const router = createRouter({ const router = createRouter({
history: createWebHistory(process.env.BASE_URL), history: createWebHistory(process.env.BASE_URL),
routes, routes,
}); })
export default router; export default router

View File

@ -1,8 +1,8 @@
import { createStore } from "vuex"; import { createStore } from 'vuex'
export default createStore({ export default createStore({
state: {}, state: {},
mutations: {}, mutations: {},
actions: {}, actions: {},
modules: {}, modules: {},
}); })

View File

@ -6,13 +6,13 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from 'vue'
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
export default defineComponent({ export default defineComponent({
name: "Home", name: 'Home',
components: { components: {
HelloWorld, HelloWorld,
}, },
}); })
</script> </script>

View File

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