Prettiers

Author: eamodio

src/webviews/apps/settings/partials/autolinks.html

@@ -1,20 +1,36 @@
 <section id="autolinks" class="section--settings section--collapsible">
 	<div class="section__header">
 		<h2>Autolinks</h2>
-		<p class="section__header-hint">Use autolinks to identify external references, like Jira issues or Zendesk tickets, in your commit messages and convert them to clickable links.</p>
+		<p class="section__header-hint">
+			Use autolinks to identify external references, like Jira issues or Zendesk tickets, in your commit messages
+			and convert them to clickable links.
+		</p>
 	</div>
 
 	<div class="section__collapsible">
 		<div class="section__group">
 			<div class="section__preview mb-0">
-				<img class="image__preview image__preview--fit" src="#{webroot}/media/hovers-autolink.webp" loading="lazy" width="329" height="112">
+				<img
+					class="image__preview image__preview--fit"
+					src="#{webroot}/media/hovers-autolink.webp"
+					loading="lazy"
+					width="329"
+					height="112"
+				/>
 			</div>
 		</div>
 		<div class="section__group">
 			<div class="section__content">
 				<div class="setting-list" data-component="autolinks"></div>
 				<p class="mb-0">
-					<button class="button button--compact button--flat m-0" type="button" data-action="show" data-action-target="autolink">Add autolink</button>
+					<button
+						class="button button--compact button--flat m-0"
+						type="button"
+						data-action="show"
+						data-action-target="autolink"
+					>
+						Add autolink
+					</button>
 				</p>
 			</div>
 		</div>

src/webviews/apps/settings/settings.html

@@ -274,11 +274,7 @@ <h2>Jump to</h2>
 						</li>
 
 						<li class="mt-1">
-							<a
-								class="sidebar__jump-link"
-								data-action="jump"
-								href="#autolinks"
-								title="Jump to Autolinks"
+							<a class="sidebar__jump-link" data-action="jump" href="#autolinks" title="Jump to Autolinks"
 								>Autolinks</a
 							>
 						</li>

src/webviews/apps/settings/settings.scss

@@ -730,13 +730,13 @@ section {
 		// background-color: var(--color-button-secondary-background);
 
 		&:hover {
-			border-color:var(--color-background--lighten-30);
+			border-color: var(--color-background--lighten-30);
 		}
 	}
 
 	&__control:checked + .toggle-button__label {
 		background-color: var(--color-background--lighten-30);
-		border-color:var(--color-background--lighten-30);
+		border-color: var(--color-background--lighten-30);
 	}
 
 	&__control:focus + .toggle-button__label {

src/webviews/apps/settings/settings.ts

@@ -250,7 +250,7 @@ export class SettingsApp extends AppWithConfig<State> {
 		`;
 
 		const autolinkTemplate = (index: number, autolink?: AutolinkReference, isNew = false, renderHelp = true) => `
-			<div class="setting${ isNew ? ' hidden" data-region="autolink' : ''}">
+			<div class="setting${isNew ? ' hidden" data-region="autolink' : ''}">
 				<div class="setting__group">
 					<div class="setting__input setting__input--short setting__input--with-actions">
 						<label for="autolinks.${index}.prefix">Prefix</label>
@@ -260,7 +260,7 @@ export class SettingsApp extends AppWithConfig<State> {
 							placeholder="TICKET-"
 							data-setting
 							data-setting-type="arrayObject"
-							${ autolink?.prefix ? `value="${encodeURIComponent(autolink.prefix)}"` : ''}
+							${autolink?.prefix ? `value="${encodeURIComponent(autolink.prefix)}"` : ''}
 						>
 						<div class="setting__input-actions">
 							<div class="toggle-button">
@@ -271,7 +271,7 @@ export class SettingsApp extends AppWithConfig<State> {
 									class="toggle-button__control"
 									data-setting
 									data-setting-type="arrayObject"
-									${ autolink?.ignoreCase ? 'checked' : ''}
+									${autolink?.ignoreCase ? 'checked' : ''}
 								>
 								<label class="toggle-button__label" for="autolinks.${index}.ignoreCase" title="Case-sensitive" aria-label="Case-sensitive">Aa</label>
 							</div>
@@ -283,7 +283,7 @@ export class SettingsApp extends AppWithConfig<State> {
 									class="toggle-button__control"
 									data-setting
 									data-setting-type="arrayObject"
-									${ autolink?.alphanumeric ? 'checked' : ''}
+									${autolink?.alphanumeric ? 'checked' : ''}
 								>
 								<label class="toggle-button__label" for="autolinks.${index}.alphanumeric" title="Alphanumeric" aria-label="Alphanumeric">a1</label>
 							</div>
@@ -298,9 +298,11 @@ export class SettingsApp extends AppWithConfig<State> {
 							placeholder="https://example.com/TICKET?q=&lt;num&gt;"
 							data-setting
 							data-setting-type="arrayObject"
-							${ autolink?.url ? `value="${encodeURIComponent(autolink.url)}"` : ''}
+							${autolink?.url ? `value="${encodeURIComponent(autolink.url)}"` : ''}
 						>
-						${ isNew ? `
+						${
+							isNew
+								? `
 							<button
 								class="button button--compact button--flat-subtle"
 								type="button"
@@ -310,7 +312,8 @@ export class SettingsApp extends AppWithConfig<State> {
 								title="Delete"
 								aria-label="Delete"
 							><i class="codicon codicon-close"></i></button>
-						` : `
+						`
+								: `
 							<button
 								id="autolinks.${index}.delete"
 								name="autolinks.${index}.delete"
@@ -321,10 +324,11 @@ export class SettingsApp extends AppWithConfig<State> {
 								title="Delete"
 								aria-label="Delete"
 							><i class="codicon codicon-close"></i></button>
-						`}
+						`
+						}
 					</div>
 				</div>
-				${ renderHelp && isNew ? helpTemplate() : ''}
+				${renderHelp && isNew ? helpTemplate() : ''}
 			</div>
 		`;
 
@@ -337,7 +341,7 @@ export class SettingsApp extends AppWithConfig<State> {
 		fragment.push(autolinkTemplate(this.state.config.autolinks?.length ?? 0, undefined, true, !autolinks));
 
 		if (autolinks) {
-			fragment.push( helpTemplate());
+			fragment.push(helpTemplate());
 		}
 
 		$root.innerHTML = fragment.join('');

src/webviews/apps/shared/appWithConfigBase.ts

@@ -57,10 +57,8 @@ export abstract class AppWithConfig<State extends AppStateWithConfig> extends Ap
 				'input',
 				(e, target: HTMLInputElement) => this.onInputChanged(target),
 			),
-			DOM.on(
-				'button[data-setting-clear]',
-				'click',
-				(e, target: HTMLButtonElement) => this.onButtonClicked(target),
+			DOM.on('button[data-setting-clear]', 'click', (e, target: HTMLButtonElement) =>
+				this.onButtonClicked(target),
 			),
 			DOM.on('select[data-setting]', 'change', (e, target: HTMLSelectElement) => this.onInputSelected(target)),
 			DOM.on('.token[data-token]', 'mousedown', (e, target: HTMLElement) => this.onTokenMouseDown(target, e)),
@@ -138,19 +136,22 @@ export abstract class AppWithConfig<State extends AppStateWithConfig> extends Ap
 				setting[index] = settingItem;
 			}
 
-			set(setting[index], objectProps.join('.'), element.type === 'number' && value != null ? Number(value) : value);
+			set(
+				setting[index],
+				objectProps.join('.'),
+				element.type === 'number' && value != null ? Number(value) : value,
+			);
 
 			this._changes[settingName] = setting;
 		} else {
 			this._changes[element.name] = element.type === 'number' && value != null ? Number(value) : value;
 		}
 
-
 		// this.setAdditionalSettings(element.checked ? element.dataset.addSettingsOn : element.dataset.addSettingsOff);
 		this.applyChanges();
 	}
 
-	protected onButtonClicked(element:HTMLButtonElement) {
+	protected onButtonClicked(element: HTMLButtonElement) {
 		if (element.dataset.settingType === 'arrayObject') {
 			const props = element.name.split('.');
 			const settingName = props[0];