refactor(editor): Improve linting for component and prop names (no-changelog) (#8169)

packages/editor-ui/src/components/TemplateList.vue

@@ -1,6 +1,6 @@
 <template>
-	<div :class="$style.list" v-if="loading || workflows.length">
-		<div :class="$style.header" v-if="!simpleView">
+	<div v-if="loading || workflows.length" :class="$style.list">
+		<div v-if="!simpleView" :class="$style.header">
 			<n8n-heading :bold="true" size="medium" color="text-light">
 				{{ $locale.baseText('templates.workflows') }}
 				<span v-if="!loading && totalWorkflows" v-text="`(${totalWorkflows})`" />
@@ -11,10 +11,10 @@
 				v-for="(workflow, index) in workflows"
 				:key="workflow.id"
 				:workflow="workflow"
-				:firstItem="index === 0"
+				:first-item="index === 0"
 				:simple-view="simpleView"
-				:lastItem="index === workflows.length - 1 && !loading"
-				:useWorkflowButton="useWorkflowButton"
+				:last-item="index === workflows.length - 1 && !loading"
+				:use-workflow-button="useWorkflowButton"
 				@click="(e) => onCardClick(e, workflow.id)"
 				@useWorkflow="(e) => onUseWorkflow(e, workflow.id)"
 			/>
@@ -24,8 +24,8 @@
 					v-for="n in 4"
 					:key="'index-' + n"
 					:loading="true"
-					:firstItem="workflows.length === 0 && n === 1"
-					:lastItem="n === 4"
+					:first-item="workflows.length === 0 && n === 1"
+					:last-item="n === 4"
 				/>
 			</div>
 		</div>
@@ -39,6 +39,9 @@ import TemplateCard from './TemplateCard.vue';
 
 export default defineComponent({
 	name: 'TemplateList',
+	components: {
+		TemplateCard,
+	},
 	mixins: [genericHelpers],
 	props: {
 		infiniteScrollEnabled: {
@@ -77,9 +80,6 @@ export default defineComponent({
 			content.removeEventListener('scroll', this.onScroll);
 		}
 	},
-	components: {
-		TemplateCard,
-	},
 	methods: {
 		onScroll() {
 			const loaderRef = this.$refs.loader as HTMLElement | undefined;