Use eslint-config-nextcloud

.eslintrc.js

@@ -1,11 +1,4 @@
 module.exports = {
-	root: true,
-	env: {
-		browser: true,
-		es6: true,
-		node: true,
-		jest: true
-	},
 	globals: {
 		t: false,
 		n: false,
@@ -14,65 +7,7 @@ module.exports = {
 		moment: true,
 		$appVersion: true,
 	},
-	parserOptions: {
-		parser: 'babel-eslint'
-	},
 	extends: [
-		'eslint:recommended',
-		'plugin:node/recommended',
-		'plugin:vue/recommended',
-		'standard'
+		'nextcloud'
 	],
-	plugins: ['vue', 'node'],
-	rules: {
-		// space before function ()
-		'space-before-function-paren': ['error', 'never'],
-		// curly braces always space
-		'object-curly-spacing': ['error', 'always'],
-		// stay consistent with array brackets
-		'array-bracket-newline': ['error', 'consistent'],
-		// 1tbs brace style
-		'brace-style': 'error',
-		// tabs only
-		indent: ['error', 'tab'],
-		'no-tabs': 0,
-		'vue/html-indent': ['error', 'tab'],
-		// only debug console
-		'no-console': ['error', { allow: ['error', 'warn', 'debug'] }],
-		// classes blocks
-		'padded-blocks': ['error', { classes: 'always' }],
-		// always add a trailing comma, for diff readability
-		'comma-dangle': ["error", "only-multiline"],
-		// always have the operator in front
-		'operator-linebreak': ['error', 'before'],
-		// ternary on multiline
-		'multiline-ternary': ['error', 'always-multiline'],
-		// force proper JSDocs
-		'valid-jsdoc': [2, {
-			'prefer': {
-				'return': 'returns'
-			},
-			'requireReturn': false,
-			'requireReturnDescription': false
-		}],
-		"node/no-missing-import": ["error", {
-			"tryExtensions": [".js", ".json", ".node", ".vue"]
-		}],
-		// es6 import/export and require
-		'node/no-unpublished-require': ['off'],
-		'node/no-unsupported-features/es-syntax': ['off'],
-		// space before self-closing elements
-		'vue/html-closing-bracket-spacing': 'error',
-		// code spacing with attributes
-		'vue/max-attributes-per-line': [
-			'error',
-			{
-				singleline: 3,
-				multiline: {
-					max: 3,
-					allowFirstLine: true
-				}
-			}
-		]
-	}
 };

package.json

@@ -62,10 +62,12 @@
 		"browserslist-config-nextcloud": "0.1.0",
 		"css-loader": "^3.4.2",
 		"eslint": "^6.8.0",
+		"eslint-config-nextcloud": "0.1.1",
 		"eslint-config-standard": "^14.1.0",
 		"eslint-friendly-formatter": "^4.0.1",
 		"eslint-loader": "^3.0.3",
 		"eslint-plugin-import": "^2.20.0",
+		"eslint-plugin-nextcloud": "^0.3.0",
 		"eslint-plugin-node": "^11.0.0",
 		"eslint-plugin-promise": "^4.2.1",
 		"eslint-plugin-standard": "^4.0.1",

src/app.vue → src/App.vue

@@ -52,8 +52,8 @@ export default {
 	},
 	computed: {
 		...mapState({
-			calendars: state => state.calendars.calendars
-		})
+			calendars: state => state.calendars.calendars,
+		}),
 	},
 	beforeMount() {
 		// get calendars then get tasks
@@ -105,7 +105,7 @@ export default {
 					this.$router.push({ name: 'collections', params: { collectionId: this.$route.params.collectionId } })
 				}
 			}
-		}
-	}
+		},
+	},
 }
 </script>

src/components/CalendarShare.vue

@@ -23,7 +23,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
 <template>
 	<div class="calendar-shares">
-		<multiselect
+		<Multiselect
 			id="users-groups-search"
 			:options="usersOrGroups"
 			:searchable="true"
@@ -37,13 +37,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 			track-by="user"
 			label="user"
 			@search-change="findSharee"
-			@input="shareCalendar"
-		/>
+			@input="shareCalendar" />
 		<!-- list of user or groups calendar is shared with -->
 		<ul v-if="calendar.shares.length > 0" class="calendar-shares__list">
-			<calendar-sharee v-for="sharee in calendar.shares" :key="sharee.uri"
-				:sharee="sharee" :calendar="calendar"
-			/>
+			<CalendarSharee v-for="sharee in calendar.shares"
+				:key="sharee.uri"
+				:sharee="sharee"
+				:calendar="calendar" />
 		</ul>
 	</div>
 </template>
@@ -52,28 +52,28 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 import client from '../services/cdav'
 import { Multiselect } from '@nextcloud/vue/dist/Components/Multiselect'
 
-import calendarSharee from './CalendarSharee'
+import CalendarSharee from './CalendarSharee'
 // import debounce from 'debounce'
 
 export default {
-	name: 'ShareCalendar',
+	name: 'CalendarShare',
 	components: {
-		calendarSharee,
+		CalendarSharee,
 		Multiselect,
 	},
 	props: {
 		calendar: {
 			type: Object,
 			default() {
 				return {}
-			}
-		}
+			},
+		},
 	},
 	data() {
 		return {
 			isLoading: false,
 			inputGiven: false,
-			usersOrGroups: []
+			usersOrGroups: [],
 		}
 	},
 	computed: {
@@ -82,7 +82,7 @@ export default {
 		},
 		noResult() {
 			return this.$t('tasks', 'No users or groups')
-		}
+		},
 	},
 	mounted() {
 		// This ensures that the multiselect input is in focus as soon as the user clicks share
@@ -124,7 +124,7 @@ export default {
 							displayName: result.displayname,
 							icon: isGroup ? 'icon-group' : 'icon-user',
 							uri: result.principalScheme,
-							isGroup
+							isGroup,
 						})
 					}
 					return list
@@ -135,7 +135,7 @@ export default {
 				this.inputGiven = false
 				this.isLoading = false
 			}
-		}
-	}
+		},
+	},
 }
 </script>

src/components/CalendarSharee.vue

@@ -24,11 +24,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <template>
 	<li class="calendar-sharee">
 		<span :class="{
-			'icon-loading-small': loading,
-			'icon-group': sharee.isGroup && !loading,
-			'icon-user': !sharee.isGroup && !loading
-		}" class="icon"
-		/>
+				'icon-loading-small': loading,
+				'icon-group': sharee.isGroup && !loading,
+				'icon-user': !sharee.isGroup && !loading
+			}"
+			class="icon" />
 		<span class="calendar-sharee__identifier">
 			{{ sharee.displayName }}
 		</span>
@@ -40,36 +40,35 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 				class="checkbox"
 				name="editable"
 				type="checkbox"
-				@change="editSharee"
-			>
+				@change="editSharee">
 			<label :for="uid">
 				{{ $t('tasks', 'can edit') }}
 			</label>
-			<a :class="{'calendar-sharee__utils--disabled': loading}" href="#"
+			<a :class="{'calendar-sharee__utils--disabled': loading}"
+				href="#"
 				title="Delete"
 				class="icon-delete"
-				@click="deleteSharee"
-			/>
+				@click="deleteSharee" />
 		</span>
 	</li>
 </template>
 
 <script>
 export default {
-	name: 'ShareSharee',
+	name: 'CalendarSharee',
 	props: {
 		calendar: {
 			type: Object,
-			required: true
+			required: true,
 		},
 		sharee: {
 			type: Object,
-			required: true
-		}
+			required: true,
+		},
 	},
 	data() {
 		return {
-			loading: false
+			loading: false,
 		}
 	},
 	computed: {
@@ -79,7 +78,7 @@ export default {
 		// generated id for this sharee
 		uid() {
 			return this.sharee.id + this.calendar.id + Math.floor(Math.random() * 1000)
-		}
+		},
 	},
 	methods: {
 		async deleteSharee() {
@@ -90,7 +89,7 @@ export default {
 			try {
 				await this.$store.dispatch('removeSharee', {
 					calendar: this.calendar,
-					uri: this.sharee.uri
+					uri: this.sharee.uri,
 				})
 			} catch (error) {
 				console.error(error)
@@ -108,15 +107,15 @@ export default {
 				await this.$store.dispatch('toggleShareeWritable', {
 					calendar: this.calendar,
 					uri: this.sharee.uri,
-					writeable: !this.sharee.writeable
+					writeable: !this.sharee.writeable,
 				})
 			} catch (error) {
 				console.error(error)
 				this.$OC.Notification.showTemporary(this.$t('tasks', 'Unable to change permissions.'))
 			} finally {
 				this.loading = false
 			}
-		}
-	}
+		},
+	},
 }
 </script>