Skip to content

Commit ff2d8a2

Browse files
sonicoder86sonicoder86
committed
feat(lint): add prettier
1 parent 901af6e commit ff2d8a2

File tree

14 files changed

+153
-173
lines changed

14 files changed

+153
-173
lines changed

‎.prettierrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"bracketSpacing": true,
3+
"trailingComma": "none",
4+
"singleQuote": true,
5+
"semi": true,
6+
"useTabs": false,
7+
"tabWidth": 2,
8+
"arrowParens": "avoid",
9+
"endOfLine": "lf",
10+
"printWidth": 120
11+
}

‎package-lock.json‎

Lines changed: 1 addition & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
},
88
"scripts": {
99
"start": "npm run serve",
10-
"serve": "vue-cli-service serve",
10+
"format": "prettier --write 'src/**/*.{js,vue}'",
1111
"build": "vue-cli-service build",
1212
"lint": "vue-cli-service lint",
1313
"test": "npm run test:unit && npm run test:e2e",
@@ -33,6 +33,7 @@
3333
"chai": "^4.2.0",
3434
"eslint": "^6.8.0",
3535
"eslint-plugin-vue": "^6.2.2",
36+
"prettier": "^1.19.1",
3637
"sinon": "^9.0.1",
3738
"sinon-chai": "^3.5.0",
3839
"vue-cli-plugin-vue-next": "0.1.0",

‎src/components/app/app.vue‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,30 @@
1010
</template>
1111

1212
<script>
13-
import { useStore } from 'vuex';
14-
import { onMounted, watchEffect, computed } from 'vue';
15-
import Header from '../header/header.vue';
16-
import List from '../list/list.vue';
17-
import Footer from '../footer/footer.vue';
18-
import CopyRight from '../copy-right/copy-right.vue';
19-
import { TodoLocal } from '../../services/todo-local';
13+
import { useStore } from 'vuex';
14+
import { onMounted, watchEffect, computed } from 'vue';
15+
import Header from '../header/header.vue';
16+
import List from '../list/list.vue';
17+
import Footer from '../footer/footer.vue';
18+
import CopyRight from '../copy-right/copy-right.vue';
19+
import { TodoLocal } from '../../services/todo-local';
2020
21-
export default {
22-
components: { CopyRight, Header, List, Footer },
23-
setup() {
24-
const store = useStore();
21+
export default {
22+
components: { CopyRight, Header, List, Footer },
23+
setup() {
24+
const store = useStore();
2525
26-
onMounted(() => {
27-
store.dispatch('onLoad', TodoLocal.loadTodos());
26+
onMounted(() => {
27+
store.dispatch('onLoad', TodoLocal.loadTodos());
2828
29-
watchEffect(() => {
30-
TodoLocal.storeTodos(store.state.todos);
31-
});
29+
watchEffect(() => {
30+
TodoLocal.storeTodos(store.state.todos);
3231
});
32+
});
3333
34-
return {
35-
todosLength: computed(() => store.state.todos.length)
36-
};
37-
}
34+
return {
35+
todosLength: computed(() => store.state.todos.length)
36+
};
3837
}
38+
};
3939
</script>

‎src/components/footer/footer.vue‎

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,41 @@
11
<script>
2-
import { computed } from 'vue';
3-
import { useStore } from 'vuex';
4-
import { FILTERS } from '../../constants/filter';
2+
import { computed } from 'vue';
3+
import { useStore } from 'vuex';
4+
import { FILTERS } from '../../constants/filter';
55
6-
export default {
7-
setup() {
8-
const store = useStore();
6+
export default {
7+
setup() {
8+
const store = useStore();
99
10-
const filterTitles = [
11-
{ key: FILTERS.all, value: 'All' },
12-
{ key: FILTERS.active, value: 'Active' },
13-
{ key: FILTERS.completed, value: 'Completed' }
14-
];
15-
const onClearCompleted = () => store.dispatch('onClearCompleted');
16-
const onFilterSelect = filter => store.dispatch('onFilterSelect', filter);
10+
const filterTitles = [
11+
{ key: FILTERS.all, value: 'All' },
12+
{ key: FILTERS.active, value: 'Active' },
13+
{ key: FILTERS.completed, value: 'Completed' }
14+
];
15+
const onClearCompleted = () => store.dispatch('onClearCompleted');
16+
const onFilterSelect = filter => store.dispatch('onFilterSelect', filter);
1717
18-
return {
19-
filterTitles,
20-
filter: computed(() => store.state.filter),
21-
itemsLeft: computed(() => store.getters.itemsLeft),
22-
completedCount: computed(() => store.getters.completedCount),
23-
itemText: computed(() => store.getters.itemsLeft === 1 ? ' item' : ' items'),
24-
onClearCompleted,
25-
onFilterSelect
26-
};
27-
}
28-
};
18+
return {
19+
filterTitles,
20+
filter: computed(() => store.state.filter),
21+
itemsLeft: computed(() => store.getters.itemsLeft),
22+
completedCount: computed(() => store.getters.completedCount),
23+
itemText: computed(() => (store.getters.itemsLeft === 1 ? ' item' : ' items')),
24+
onClearCompleted,
25+
onFilterSelect
26+
};
27+
}
28+
};
2929
</script>
3030
<template>
3131
<footer class="footer">
32-
<span class="todo-count"><strong>{{ itemsLeft }}</strong><span> {{ itemText }} left</span></span>
32+
<span class="todo-count"
33+
><strong>{{ itemsLeft }}</strong
34+
><span> {{ itemText }} left</span></span
35+
>
3336
<ul class="filters">
3437
<li v-for="filterTitle in filterTitles" :key="filterTitle.key">
35-
<a
36-
href="#"
37-
:class="{ selected: filterTitle.key === filter }"
38-
@click="onFilterSelect(filterTitle.key)"
39-
>
38+
<a href="#" :class="{ selected: filterTitle.key === filter }" @click="onFilterSelect(filterTitle.key)">
4039
{{ filterTitle.value }}
4140
</a>
4241
</li>

‎src/components/header/header.vue‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
<script>
2-
import { reactive, toRefs } from 'vue';
3-
import { useStore } from 'vuex';
4-
const ENTER_KEY = 'Enter';
2+
import { reactive, toRefs } from 'vue';
3+
import { useStore } from 'vuex';
4+
const ENTER_KEY = 'Enter';
55
6-
export default {
7-
setup() {
8-
const store = useStore();
9-
const state = reactive({
10-
name: ''
11-
});
6+
export default {
7+
setup() {
8+
const store = useStore();
9+
const state = reactive({
10+
name: ''
11+
});
1212
13-
const handleChange = event => state.name = event.target.value;
14-
const handleSubmit = event => {
15-
if (event.key !== ENTER_KEY) {
16-
return;
17-
}
13+
const handleChange = event => (state.name = event.target.value);
14+
const handleSubmit = event => {
15+
if (event.key !== ENTER_KEY) {
16+
return;
17+
}
1818
19-
store.dispatch('onCreate', state.name);
20-
state.name = '';
21-
};
19+
store.dispatch('onCreate', state.name);
20+
state.name = '';
21+
};
2222
23-
return {
24-
...toRefs(state),
25-
handleChange,
26-
handleSubmit
27-
};
28-
}
29-
};
23+
return {
24+
...toRefs(state),
25+
handleChange,
26+
handleSubmit
27+
};
28+
}
29+
};
3030
</script>
3131
<template>
3232
<header class="header">

‎src/components/item/item.vue‎

Lines changed: 34 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,46 @@
11
<script>
2-
import { reactive, toRefs } from 'vue';
2+
import { reactive, toRefs } from 'vue';
33
4-
export default {
5-
props: {
6-
todo: {
7-
type: Object,
8-
required: true
9-
}
10-
},
11-
setup(props, { emit }) {
12-
const state = reactive({
13-
editing: false,
14-
name: props.todo.name
15-
});
4+
export default {
5+
props: {
6+
todo: {
7+
type: Object,
8+
required: true
9+
}
10+
},
11+
setup(props, { emit }) {
12+
const state = reactive({
13+
editing: false,
14+
name: props.todo.name
15+
});
1616
17-
const handleRemove = () => emit('remove', props.todo.id);
18-
const handleCompleted = () => emit('update', { id: props.todo.id, completed: !props.todo.completed });
19-
const handleEdit = () => state.editing = true;
20-
const handleChange = event => state.name = event.target.value;
21-
const handleBlur = () => {
22-
emit('update', { id: props.todo.id, name: state.name });
23-
state.editing = false;
24-
};
17+
const handleRemove = () => emit('remove', props.todo.id);
18+
const handleCompleted = () => emit('update', { id: props.todo.id, completed: !props.todo.completed });
19+
const handleEdit = () => (state.editing = true);
20+
const handleChange = event => (state.name = event.target.value);
21+
const handleBlur = () => {
22+
emit('update', { id: props.todo.id, name: state.name });
23+
state.editing = false;
24+
};
2525
26-
return {
27-
...toRefs(state),
28-
handleRemove,
29-
handleCompleted,
30-
handleEdit,
31-
handleChange,
32-
handleBlur
33-
};
34-
}
35-
};
26+
return {
27+
...toRefs(state),
28+
handleRemove,
29+
handleCompleted,
30+
handleEdit,
31+
handleChange,
32+
handleBlur
33+
};
34+
}
35+
};
3636
</script>
3737
<template>
3838
<li :class="{ completed: todo.completed, editing: editing }">
3939
<div class="view">
40-
<input
41-
class="toggle"
42-
type="checkbox"
43-
:checked="todo.completed"
44-
@change="handleCompleted"
45-
/>
40+
<input class="toggle" type="checkbox" :checked="todo.completed" @change="handleCompleted" />
4641
<label @dblclick="handleEdit">{{ todo.name }}</label>
47-
<button
48-
class="destroy"
49-
@click="handleRemove"
50-
/>
42+
<button class="destroy" @click="handleRemove" />
5143
</div>
52-
<input
53-
v-if="editing"
54-
class="edit"
55-
:value="name"
56-
@input="handleChange"
57-
@blur="handleBlur"
58-
/>
44+
<input v-if="editing" class="edit" :value="name" @input="handleChange" @blur="handleBlur" />
5945
</li>
6046
</template>

‎src/components/list/list.vue‎

Lines changed: 20 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,34 @@
11
<script>
2-
import { computed } from 'vue';
3-
import { useStore } from 'vuex';
4-
import Item from '../item/item.vue';
2+
import { computed } from 'vue';
3+
import { useStore } from 'vuex';
4+
import Item from '../item/item.vue';
55
6-
export default {
7-
components: { Item },
8-
setup() {
9-
const store = useStore();
6+
export default {
7+
components: { Item },
8+
setup() {
9+
const store = useStore();
1010
11-
const onRemove = todoId => store.dispatch('onRemove', todoId);
12-
const onUpdate = todo => store.dispatch('onUpdate', todo);
13-
const onCompleteAll = () => store.dispatch('onCompleteAll');
11+
const onRemove = todoId => store.dispatch('onRemove', todoId);
12+
const onUpdate = todo => store.dispatch('onUpdate', todo);
13+
const onCompleteAll = () => store.dispatch('onCompleteAll');
1414
15-
return {
16-
visibleTodos: computed(() => store.getters.visibleTodos),
17-
areAllCompleted: computed(() => store.getters.areAllCompleted),
18-
onRemove,
19-
onUpdate,
20-
onCompleteAll
21-
};
22-
}
23-
};
15+
return {
16+
visibleTodos: computed(() => store.getters.visibleTodos),
17+
areAllCompleted: computed(() => store.getters.areAllCompleted),
18+
onRemove,
19+
onUpdate,
20+
onCompleteAll
21+
};
22+
}
23+
};
2424
</script>
2525
<template>
2626
<section class="main">
2727
<input id="toggle-all" class="toggle-all" type="checkbox" :checked="areAllCompleted" readonly />
2828
<label htmlFor="toggle-all" @click="onCompleteAll"></label>
2929

3030
<ul class="todo-list">
31-
<Item
32-
v-for="todo in visibleTodos"
33-
:key="todo.id"
34-
:todo="todo"
35-
@remove="onRemove"
36-
@update="onUpdate"
37-
/>
31+
<Item v-for="todo in visibleTodos" :key="todo.id" :todo="todo" @remove="onRemove" @update="onUpdate" />
3832
</ul>
3933
</section>
4034
</template>

‎src/constants/action-types.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@ export const ACTION_TYPES = {
55
update: 'update',
66
completeAll: 'complete_all',
77
clearCompleted: 'clear_completed',
8-
selectFilter: 'select_filter',
8+
selectFilter: 'select_filter'
99
};

‎src/constants/filter.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export const FILTERS = {
22
all: 'all',
33
active: 'active',
4-
completed: 'completed',
4+
completed: 'completed'
55
};

0 commit comments

Comments
 (0)