refactor: Upgrade to Prettier 3 (no-changelog) (#6947)

Supersedes https://github.com/n8n-io/n8n/pull/6937 Excluding fixtures and test workflow JSONs to avoid having to update tests.
2024-11-09 22:24:05 -08:00 · 2023-08-16 17:13:57 +02:00 · 2023-08-16 17:13:57 +02:00 · 7ce5d8fd90
parent bb76c18073
commit 7ce5d8fd90
55 changed files with 1314 additions and 1295 deletions
--- a/.github/workflows/check-issue-template.yml
+++ b/.github/workflows/check-issue-template.yml
@ -13,6 +13,3 @@ jobs:
        uses: n8n-io/GH-actions-playground@v1
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
-
-
-
--- a/.prettierignore
+++ b/.prettierignore
@ -2,3 +2,6 @@ coverage
 dist
 package.json
 .pnpm-lock.yml
+packages/nodes-base/nodes/**/test
+cypress/fixtures
+CHANGELOG.md
--- a/README.md
+++ b/README.md
@ -36,6 +36,7 @@ changes [here](https://github.com/n8n-io/n8n/blob/master/packages/cli/BREAKING-C
  [how to run n8n in **Docker**](https://docs.n8n.io/hosting/installation/docker/)

 ## Start
+
 You can try n8n without installing it using npx. You must have [Node.js](https://nodejs.org/en/) installed.
 From the terminal, run:

--- a/cypress/e2e/12-canvas-actions.cy.ts
+++ b/cypress/e2e/12-canvas-actions.cy.ts
@ -82,14 +82,10 @@ describe('Canvas Actions', () => {
 		cy.get('.plus-endpoint').should('be.visible').click();
 		WorkflowPage.getters.nodeCreatorSearchBar().should('be.visible');
 		WorkflowPage.getters.nodeCreatorSearchBar().type(CODE_NODE_NAME);
-		cy.drag(
-			WorkflowPage.getters.nodeCreatorNodeItems().first(),
-			[100, 100],
-			{
+		cy.drag(WorkflowPage.getters.nodeCreatorNodeItems().first(), [100, 100], {
 			realMouse: true,
-				abs: true
-			}
-		);
+			abs: true,
+		});
 		cy.get('body').type('{esc}');
 		WorkflowPage.getters.canvasNodes().should('have.length', 2);
 		WorkflowPage.getters.nodeConnections().should('have.length', 1);
@ -100,14 +96,10 @@ describe('Canvas Actions', () => {
 		cy.get('.plus-endpoint').should('be.visible').click();
 		WorkflowPage.getters.nodeCreatorSearchBar().should('be.visible');
 		WorkflowPage.getters.nodeCreatorSearchBar().type(CODE_NODE_NAME);
-		cy.drag(
-			WorkflowPage.getters.nodeCreatorActionItems().first(),
-			[100, 100],
-			{
+		cy.drag(WorkflowPage.getters.nodeCreatorActionItems().first(), [100, 100], {
 			realMouse: true,
-				abs: true
-			}
-		);
+			abs: true,
+		});
 		WorkflowPage.getters.nodeCreatorCategoryItems().its('length').should('be.gt', 0);
 		WorkflowPage.getters.canvasNodes().should('have.length', 1);
 		WorkflowPage.getters.nodeConnections().should('have.length', 0);
--- a/cypress/e2e/24-ndv-paired-item.cy.ts
+++ b/cypress/e2e/24-ndv-paired-item.cy.ts
@ -28,14 +28,9 @@ describe('NDV', () => {
 		ndv.actions.switchOutputMode('Table');

 		// input to output
-		ndv.getters
-			.inputTableRow(1)
-			.should('exist')
+		ndv.getters.inputTableRow(1).should('exist');

-		ndv.getters
-			.inputTableRow(1)
-			.invoke('attr', 'data-test-id')
-			.should('equal', 'hovering-item');
+		ndv.getters.inputTableRow(1).invoke('attr', 'data-test-id').should('equal', 'hovering-item');

 		ndv.getters.inputTableRow(1).realHover();
 		ndv.getters.outputTableRow(4).invoke('attr', 'data-test-id').should('equal', 'hovering-item');
@ -88,14 +83,9 @@ describe('NDV', () => {
 		ndv.actions.selectInputNode('Set1');
 		ndv.getters.backToCanvas().realHover(); // reset to default hover

-		ndv.getters
-			.inputTableRow(1)
-			.should('have.text', '1000')
+		ndv.getters.inputTableRow(1).should('have.text', '1000');

-		ndv.getters
-			.inputTableRow(1)
-			.invoke('attr', 'data-test-id')
-			.should('equal', 'hovering-item');
+		ndv.getters.inputTableRow(1).invoke('attr', 'data-test-id').should('equal', 'hovering-item');

 		ndv.getters.inputTableRow(1).realHover();
 		cy.wait(50);
@ -106,14 +96,9 @@ describe('NDV', () => {
 		ndv.actions.changeOutputRunSelector('1 of 2 (6 items)');
 		ndv.getters.backToCanvas().realHover(); // reset to default hover

-		ndv.getters
-			.inputTableRow(1)
-			.should('have.text', '1111')
+		ndv.getters.inputTableRow(1).should('have.text', '1111');

-		ndv.getters
-			.inputTableRow(1)
-			.invoke('attr', 'data-test-id')
-			.should('equal', 'hovering-item');
+		ndv.getters.inputTableRow(1).invoke('attr', 'data-test-id').should('equal', 'hovering-item');
 		ndv.getters.inputTableRow(1).realHover();
 		cy.wait(50);
 		ndv.getters.outputHoveringItem().should('have.text', '1111');
@ -146,27 +131,16 @@ describe('NDV', () => {
 		ndv.getters.inputRunSelector().find('input').should('include.value', '1 of 2 (6 items)');
 		ndv.getters.outputRunSelector().find('input').should('include.value', '1 of 2 (6 items)');

-		ndv.getters
-			.inputTableRow(1)
-			.should('have.text', '1111')
-		ndv.getters
-			.inputTableRow(1)
-			.invoke('attr', 'data-test-id')
-			.should('equal', 'hovering-item');
+		ndv.getters.inputTableRow(1).should('have.text', '1111');
+		ndv.getters.inputTableRow(1).invoke('attr', 'data-test-id').should('equal', 'hovering-item');
 		ndv.getters.outputTableRow(1).should('have.text', '1111');
 		ndv.getters.outputTableRow(1).realHover();

-
 		ndv.getters.outputTableRow(3).should('have.text', '4444');
 		ndv.getters.outputTableRow(3).realHover();

-		ndv.getters
-			.inputTableRow(3)
-			.should('have.text', '4444')
-		ndv.getters
-			.inputTableRow(3)
-			.invoke('attr', 'data-test-id')
-			.should('equal', 'hovering-item');
+		ndv.getters.inputTableRow(3).should('have.text', '4444');
+		ndv.getters.inputTableRow(3).invoke('attr', 'data-test-id').should('equal', 'hovering-item');

 		ndv.actions.changeOutputRunSelector('2 of 2 (6 items)');
 		cy.wait(50);
@ -174,9 +148,7 @@ describe('NDV', () => {
 		ndv.getters.inputTableRow(1).should('have.text', '1000');
 		ndv.getters.inputTableRow(1).realHover();

-		ndv.getters
-			.outputTableRow(1)
-			.should('have.text', '1000')
+		ndv.getters.outputTableRow(1).should('have.text', '1000');
 		ndv.getters
 			.outputTableRow(1)
 			.should('have.text', '1000')
@ -186,14 +158,9 @@ describe('NDV', () => {
 		ndv.getters.outputTableRow(3).should('have.text', '2000');
 		ndv.getters.outputTableRow(3).realHover();

-		ndv.getters
-			.inputTableRow(3)
-			.should('have.text', '2000')
+		ndv.getters.inputTableRow(3).should('have.text', '2000');

-		ndv.getters
-			.inputTableRow(3)
-			.invoke('attr', 'data-test-id')
-			.should('equal', 'hovering-item');
+		ndv.getters.inputTableRow(3).invoke('attr', 'data-test-id').should('equal', 'hovering-item');
 	});

 	it('resolves expression with default item when input node is not parent, while still pairing items', () => {
@ -215,42 +182,27 @@ describe('NDV', () => {
 		ndv.actions.switchOutputMode('Table');

 		ndv.getters.backToCanvas().realHover(); // reset to default hover
-		ndv.getters
-			.inputTableRow(1)
-			.should('have.text', '1111')
+		ndv.getters.inputTableRow(1).should('have.text', '1111');

-		ndv.getters
-			.inputTableRow(1)
-			.invoke('attr', 'data-test-id')
-			.should('equal', 'hovering-item');
+		ndv.getters.inputTableRow(1).invoke('attr', 'data-test-id').should('equal', 'hovering-item');
 		ndv.getters.inputTableRow(1).realHover();
 		ndv.getters.outputHoveringItem().should('not.exist');
 		ndv.getters.parameterExpressionPreview('value').should('include.text', '1111');

 		ndv.actions.selectInputNode('Code1');
 		ndv.getters.inputTableRow(1).realHover();
-		ndv.getters
-			.inputTableRow(1)
-			.should('have.text', '1000')
+		ndv.getters.inputTableRow(1).should('have.text', '1000');

-		ndv.getters
-			.inputTableRow(1)
-			.invoke('attr', 'data-test-id')
-			.should('equal', 'hovering-item');
+		ndv.getters.inputTableRow(1).invoke('attr', 'data-test-id').should('equal', 'hovering-item');
 		ndv.getters.outputTableRow(1).should('have.text', '1000');
 		ndv.getters.parameterExpressionPreview('value').should('include.text', '1000');

 		ndv.actions.selectInputNode('Code');

 		ndv.getters.inputTableRow(1).realHover();
-		ndv.getters
-			.inputTableRow(1)
-			.should('have.text', '6666')
+		ndv.getters.inputTableRow(1).should('have.text', '6666');

-		ndv.getters
-			.inputTableRow(1)
-			.invoke('attr', 'data-test-id')
-			.should('equal', 'hovering-item');
+		ndv.getters.inputTableRow(1).invoke('attr', 'data-test-id').should('equal', 'hovering-item');

 		ndv.getters.outputHoveringItem().should('not.exist');
 		ndv.getters.parameterExpressionPreview('value').should('include.text', '1000');
@ -282,26 +234,16 @@ describe('NDV', () => {
 		ndv.getters.outputTableRow(1).should('have.text', '8888');
 		ndv.getters.outputTableRow(1).realHover();

-		ndv.getters
-			.inputTableRow(5)
-			.should('have.text', '8888')
+		ndv.getters.inputTableRow(5).should('have.text', '8888');

-		ndv.getters
-			.inputTableRow(5)
-			.invoke('attr', 'data-test-id')
-			.should('equal', 'hovering-item');
+		ndv.getters.inputTableRow(5).invoke('attr', 'data-test-id').should('equal', 'hovering-item');

 		ndv.getters.outputTableRow(2).should('have.text', '9999');
 		ndv.getters.outputTableRow(2).realHover();

-		ndv.getters
-			.inputTableRow(6)
-			.should('have.text', '9999')
+		ndv.getters.inputTableRow(6).should('have.text', '9999');

-		ndv.getters
-			.inputTableRow(6)
-			.invoke('attr', 'data-test-id')
-			.should('equal', 'hovering-item');
+		ndv.getters.inputTableRow(6).invoke('attr', 'data-test-id').should('equal', 'hovering-item');

 		ndv.actions.close();

@ -309,12 +251,12 @@ describe('NDV', () => {

 		ndv.actions.switchInputBranch('True Branch');
 		ndv.actions.changeOutputRunSelector('1 of 2 (2 items)');
-		ndv.getters.outputTableRow(1).should('have.text', '8888')
+		ndv.getters.outputTableRow(1).should('have.text', '8888');
 		ndv.getters.outputTableRow(1).realHover();
 		cy.wait(100);
 		ndv.getters.inputHoveringItem().should('not.exist');

-		ndv.getters.inputTableRow(1).should('have.text', '1111')
+		ndv.getters.inputTableRow(1).should('have.text', '1111');
 		ndv.getters.inputTableRow(1).realHover();
 		cy.wait(100);
 		ndv.getters.outputHoveringItem().should('not.exist');
--- a/cypress/pages/credentials.ts
+++ b/cypress/pages/credentials.ts
@ -18,7 +18,8 @@ export class CredentialsPage extends BasePage {
 		credentialDeleteButton: () =>
 			cy.getByTestId('action-toggle-dropdown').filter(':visible').contains('Delete'),
 		sort: () => cy.getByTestId('resources-list-sort').first(),
-		sortOption: (label: string) => cy.getByTestId('resources-list-sort-item').contains(label).first(),
+		sortOption: (label: string) =>
+			cy.getByTestId('resources-list-sort-item').contains(label).first(),
 		filtersTrigger: () => cy.getByTestId('resources-list-filters-trigger'),
 		filtersDropdown: () => cy.getByTestId('resources-list-filters-dropdown'),
 	};
--- a/cypress/pages/workflow-executions-tab.ts
+++ b/cypress/pages/workflow-executions-tab.ts
@ -1,5 +1,5 @@
-import { BasePage } from "./base";
-import { WorkflowPage } from "./workflow";
+import { BasePage } from './base';
+import { WorkflowPage } from './workflow';

 const workflowPage = new WorkflowPage();

@ -14,10 +14,14 @@ export class WorkflowExecutionsTab extends BasePage {
 		failedExecutionListItems: () => cy.get('[data-test-execution-status="error"]'),
 		executionCard: (executionId: string) => cy.getByTestId(`execution-details-${executionId}`),
 		executionPreviewDetails: () => cy.get('[data-test-id^="execution-preview-details-"]'),
-		executionPreviewDetailsById: (executionId: string) => cy.getByTestId(`execution-preview-details-${executionId}`),
-		executionPreviewTime: () => this.getters.executionPreviewDetails().find('[data-test-id="execution-time"]'),
-		executionPreviewStatus: () => this.getters.executionPreviewDetails().find('[data-test-id="execution-preview-label"]'),
-		executionPreviewId: () => this.getters.executionPreviewDetails().find('[data-test-id="execution-preview-id"]'),
+		executionPreviewDetailsById: (executionId: string) =>
+			cy.getByTestId(`execution-preview-details-${executionId}`),
+		executionPreviewTime: () =>
+			this.getters.executionPreviewDetails().find('[data-test-id="execution-time"]'),
+		executionPreviewStatus: () =>
+			this.getters.executionPreviewDetails().find('[data-test-id="execution-preview-label"]'),
+		executionPreviewId: () =>
+			this.getters.executionPreviewDetails().find('[data-test-id="execution-preview-id"]'),
 	};
 	actions = {
 		toggleNodeEnabled: (nodeName: string) => {
@ -36,6 +40,6 @@ export class WorkflowExecutionsTab extends BasePage {
 		},
 		switchToEditorTab: () => {
 			workflowPage.getters.editorTabButton().click();
+		},
+	};
 }
-	};
-};
--- a/cypress/pages/workflow.ts
+++ b/cypress/pages/workflow.ts
@ -221,7 +221,7 @@ export class WorkflowPage extends BasePage {
 				this.getters.workflowTagsInput().type(tag);
 				this.getters.workflowTagsInput().type('{enter}');
 			});
-			cy.realPress('Tab')
+			cy.realPress('Tab');
 			// For a brief moment the Element UI tag component shows the tags as(+X) string
 			// so we need to wait for it to disappear
 			this.getters.workflowTagsContainer().should('not.contain', `+${tags.length}`);
--- a/cypress/support/binaryTestFiles.ts
+++ b/cypress/support/binaryTestFiles.ts
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@ -111,7 +111,7 @@ Cypress.Commands.add('drag', (selector, pos, options) => {
 		const newPosition = {
 			x: options?.abs ? xDiff : originalLocation.right + xDiff,
 			y: options?.abs ? yDiff : originalLocation.top + yDiff,
-		}
+		};
 		if (options?.realMouse) {
 			element.realMouseDown();
 			element.realMouseMove(newPosition.x, newPosition.y);
--- a/cypress/support/index.ts
+++ b/cypress/support/index.ts
@ -31,7 +31,11 @@ declare global {
 			grantBrowserPermissions(...permissions: string[]): void;
 			readClipboard(): Chainable<string>;
 			paste(pastePayload: string): void;
-			drag(selector: string | Cypress.Chainable<JQuery<HTMLElement>>, target: [number, number], options?: {abs?: boolean, index?: number, realMouse?: boolean}): void;
+			drag(
+				selector: string | Cypress.Chainable<JQuery<HTMLElement>>,
+				target: [number, number],
+				options?: { abs?: boolean; index?: number; realMouse?: boolean },
+			): void;
 			draganddrop(draggableSelector: string, droppableSelector: string): void;
 		}
 	}
--- a/package.json
+++ b/package.json
@ -52,7 +52,6 @@
    "nock": "^13.3.2",
    "nodemon": "^3.0.1",
    "p-limit": "^3.1.0",
-    "prettier": "^2.8.8",
    "rimraf": "^5.0.1",
    "run-script-os": "^1.0.7",
    "start-server-and-test": "^2.0.0",
@ -75,6 +74,7 @@
      "@types/node": "^18.16.16",
      "chokidar": "3.5.2",
      "jsonwebtoken": "9.0.0",
+      "prettier": "^3.0.0",
      "semver": "^7.5.4",
      "tough-cookie": "^4.1.3",
      "tslib": "^2.6.1",
--- a/packages/cli/src/PublicApi/v1/handlers/credentials/spec/paths/credentials.id.yml
+++ b/packages/cli/src/PublicApi/v1/handlers/credentials/spec/paths/credentials.id.yml
@ -14,13 +14,13 @@ delete:
      schema:
        type: string
  responses:
-    "200":
+    '200':
      description: Operation successful.
      content:
        application/json:
          schema:
-            $ref: "../schemas/credential.yml"
-    "401":
-      $ref: "../../../../shared/spec/responses/unauthorized.yml"
-    "404":
-      $ref: "../../../../shared/spec/responses/notFound.yml"
+            $ref: '../schemas/credential.yml'
+    '401':
+      $ref: '../../../../shared/spec/responses/unauthorized.yml'
+    '404':
+      $ref: '../../../../shared/spec/responses/notFound.yml'
--- a/packages/cli/src/PublicApi/v1/handlers/credentials/spec/schemas/credential.yml
+++ b/packages/cli/src/PublicApi/v1/handlers/credentials/spec/schemas/credential.yml
@ -17,14 +17,14 @@ properties:
  data:
    type: object
    writeOnly: true
-    example: { token: "ada612vad6fa5df4adf5a5dsf4389adsf76da7s" }
+    example: { token: 'ada612vad6fa5df4adf5a5dsf4389adsf76da7s' }
  createdAt:
    type: string
    format: date-time
    readOnly: true
-    example: "2022-04-29T11:02:29.842Z"
+    example: '2022-04-29T11:02:29.842Z'
  updatedAt:
    type: string
    format: date-time
    readOnly: true
-    example: "2022-04-29T11:02:29.842Z"
+    example: '2022-04-29T11:02:29.842Z'
--- a/packages/cli/src/PublicApi/v1/handlers/sourceControl/spec/paths/sourceControl.yml
+++ b/packages/cli/src/PublicApi/v1/handlers/sourceControl/spec/paths/sourceControl.yml
@ -11,15 +11,15 @@ post:
    content:
      application/json:
        schema:
-          $ref: "../schemas/pull.yml"
+          $ref: '../schemas/pull.yml'
  responses:
-    "200":
+    '200':
      description: Import result
      content:
        application/json:
          schema:
-            $ref: "../schemas/importResult.yml"
-    "400":
-      $ref: "../../../../shared/spec/responses/badRequest.yml"
-    "409":
-      $ref: "../../../../shared/spec/responses/conflict.yml"
+            $ref: '../schemas/importResult.yml'
+    '400':
+      $ref: '../../../../shared/spec/responses/badRequest.yml'
+    '409':
+      $ref: '../../../../shared/spec/responses/conflict.yml'
--- a/packages/cli/src/PublicApi/v1/handlers/sourceControl/spec/schemas/pull.yml
+++ b/packages/cli/src/PublicApi/v1/handlers/sourceControl/spec/schemas/pull.yml
@ -5,4 +5,4 @@ properties:
    example: true
  variables:
    type: object
-    example: { "foo": "bar" }
+    example: { 'foo': 'bar' }
--- a/packages/cli/src/PublicApi/v1/handlers/workflows/spec/schemas/workflow.yml
+++ b/packages/cli/src/PublicApi/v1/handlers/workflows/spec/schemas/workflow.yml
@ -27,23 +27,23 @@ properties:
  nodes:
    type: array
    items:
-      $ref: "./node.yml"
+      $ref: './node.yml'
  connections:
    type: object
-    example: { main: [{ node: "Jira", type: "main", index: 0 }] }
+    example: { main: [{ node: 'Jira', type: 'main', index: 0 }] }
  settings:
-    $ref: "./workflowSettings.yml"
+    $ref: './workflowSettings.yml'
  staticData:
    example: { lastId: 1 }
    nullable: true
    anyOf:
      - type: string
-        format: "jsonString"
+        format: 'jsonString'
        nullable: true
      - type: object
        nullable: true
  tags:
    type: array
    items:
-      $ref: "./tag.yml"
+      $ref: './tag.yml'
    readOnly: true
--- a/packages/cli/src/PublicApi/v1/openapi.yml
+++ b/packages/cli/src/PublicApi/v1/openapi.yml
@ -55,7 +55,7 @@ paths:
  /users/{id}:
    $ref: './handlers/users/spec/paths/users.id.yml'
  /source-control/pull:
-    $ref: "./handlers/sourceControl/spec/paths/sourceControl.yml"
+    $ref: './handlers/sourceControl/spec/paths/sourceControl.yml'
 components:
  schemas:
    $ref: './shared/spec/schemas/_index.yml'
--- a/packages/cli/src/PublicApi/v1/shared/spec/responses/_index.yml
+++ b/packages/cli/src/PublicApi/v1/shared/spec/responses/_index.yml
@ -1,8 +1,8 @@
 NotFound:
-  $ref: "./notFound.yml"
+  $ref: './notFound.yml'
 Unauthorized:
-  $ref: "./unauthorized.yml"
+  $ref: './unauthorized.yml'
 BadRequest:
-  $ref: "./badRequest.yml"
+  $ref: './badRequest.yml'
 Conflict:
-  $ref: "./conflict.yml"
+  $ref: './conflict.yml'
--- a/packages/cli/src/PublicApi/v1/shared/spec/schemas/_index.yml
+++ b/packages/cli/src/PublicApi/v1/shared/spec/schemas/_index.yml
@ -23,9 +23,9 @@ CredentialType:
 Audit:
  $ref: './../../../handlers/audit/spec/schemas/audit.yml'
 Pull:
-  $ref: "./../../../handlers/sourceControl/spec/schemas/pull.yml"
+  $ref: './../../../handlers/sourceControl/spec/schemas/pull.yml'
 ImportResult:
-  $ref: "./../../../handlers/sourceControl/spec/schemas/importResult.yml"
+  $ref: './../../../handlers/sourceControl/spec/schemas/importResult.yml'
 UserList:
  $ref: './../../../handlers/users/spec/schemas/userList.yml'
 User:
--- a/packages/cli/templates/oauth-error-callback.handlebars
+++ b/packages/cli/templates/oauth-error-callback.handlebars
@ -2,9 +2,9 @@
 	<head>
 		<title>n8n - OAuth Callback</title>
 		<style>
-			body { font-family: 'Open Sans', sans-serif; padding: 10px;}
-			details.error { margin-bottom: 20px; }
-			pre.reason { background: #f7f7f7; border: 1px solid #ddd; border-radius: 3px; padding: 10px; overflow: auto; overflow-wrap: break-word; white-space: pre-wrap;}
+			body { font-family: 'Open Sans', sans-serif; padding: 10px;} details.error { margin-bottom:
+			20px; } pre.reason { background: #f7f7f7; border: 1px solid #ddd; border-radius: 3px; padding:
+			10px; overflow: auto; overflow-wrap: break-word; white-space: pre-wrap;}
 		</style>
 	</head>
 	<body>
@ -12,7 +12,7 @@
 			<h4>Error: {{error.message}}</h4>
 			<details class='error'>
 				<summary>More details</summary>
-				{{#if error.reason}}<pre class="reason">{{error.reason}}</pre>{{/if}}
+				{{#if error.reason}}<pre class='reason'>{{error.reason}}</pre>{{/if}}
 			</details>
 		{{/if}}
 		Failed to connect. The window can be closed now.
--- a/packages/design-system/src/css/checkbox.scss
+++ b/packages/design-system/src/css/checkbox.scss
@ -196,7 +196,8 @@
 		height: var.$checkbox-input-height;
 		background-color: var.$checkbox-background-color;
 		z-index: var.$index-normal;
-		transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
+		transition:
+			border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
 			background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);

 		&:hover {
--- a/packages/design-system/src/css/color-picker.scss
+++ b/packages/design-system/src/css/color-picker.scss
@ -134,7 +134,9 @@
 			cursor: head;
 			width: 4px;
 			height: 4px;
-			box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
+			box-shadow:
+				0 0 0 1.5px #fff,
+				inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
 				0 0 1px 2px rgba(0, 0, 0, 0.4);
 			border-radius: 50%;
 			transform: translate(-2px, -2px);
--- a/packages/design-system/src/css/common/transition.scss
+++ b/packages/design-system/src/css/common/transition.scss
@ -79,10 +79,16 @@
 }

 .collapse-transition {
-	transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
+	transition:
+		0.3s height ease-in-out,
+		0.3s padding-top ease-in-out,
+		0.3s padding-bottom ease-in-out;
 }
 .horizontal-collapse-transition {
-	transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
+	transition:
+		0.3s width ease-in-out,
+		0.3s padding-left ease-in-out,
+		0.3s padding-right ease-in-out;
 }

 .el-list-enter-active,
--- a/packages/design-system/src/css/common/var.scss
+++ b/packages/design-system/src/css/common/var.scss
@ -10,7 +10,8 @@
 $all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 $fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 $fade-linear-transition: opacity 200ms linear;
-$md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+$md-fade-transition:
+	transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
 	opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 $border-transition-base: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 $color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
@ -199,9 +200,13 @@ $focus-outline-width: 2px;
 /* Box shadow
 -------------------------- */
 /// boxShadow|1|Shadow|1
-$box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+$box-shadow-base:
+	0 2px 4px rgba(0, 0, 0, 0.12),
+	0 0 6px rgba(0, 0, 0, 0.04);
 // boxShadow|1|Shadow|1
-$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
+$box-shadow-dark:
+	0 2px 4px rgba(0, 0, 0, 0.12),
+	0 0 6px rgba(0, 0, 0, 0.12);
 /// boxShadow|1|Shadow|1
 $box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

--- a/packages/design-system/src/css/icon.scss
+++ b/packages/design-system/src/css/icon.scss
@ -2,7 +2,8 @@

@font-face {
 	font-family: 'element-icons';
-	src: url('#{var.$font-path}/element-icons.woff') format('woff'),
+	src:
+		url('#{var.$font-path}/element-icons.woff') format('woff'),
 		/* chrome, firefox */ url('#{var.$font-path}/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 	font-weight: normal;
 	font-display: var.$font-display;
--- a/packages/design-system/src/css/menu.scss
+++ b/packages/design-system/src/css/menu.scss
@ -13,7 +13,10 @@
 	list-style: none;
 	cursor: pointer;
 	position: relative;
-	transition: border-color 0.3s, background-color 0.3s, color 0.3s;
+	transition:
+		border-color 0.3s,
+		background-color 0.3s,
+		color 0.3s;
 	box-sizing: border-box;
 	white-space: nowrap;
 	border-radius: var.$menu-item-border-radius;
--- a/packages/design-system/src/css/message.scss
+++ b/packages/design-system/src/css/message.scss
@ -13,7 +13,10 @@
 	top: 20px;
 	transform: translateX(-50%);
 	background-color: var.$message-background-color;
-	transition: opacity 0.3s, transform 0.4s, top 0.4s;
+	transition:
+		opacity 0.3s,
+		transform 0.4s,
+		top 0.4s;
 	overflow: hidden;
 	padding: var.$message-padding;
 	display: flex;
--- a/packages/design-system/src/css/mixins/utils.scss
+++ b/packages/design-system/src/css/mixins/utils.scss
@ -52,4 +52,3 @@
@function getCssVarName($args...) {
 	@return joinVarName($args);
 }
-
--- a/packages/design-system/src/css/notification.scss
+++ b/packages/design-system/src/css/notification.scss
@ -11,7 +11,13 @@
 	position: fixed;
 	background-color: var.$color-white;
 	box-shadow: var.$notification-shadow;
-	transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s;
+	transition:
+		opacity 0.3s,
+		transform 0.3s,
+		left 0.3s,
+		right 0.3s,
+		top 0.4s,
+		bottom 0.3s;
 	overflow: hidden;

 	&.right {
--- a/packages/design-system/src/css/pagination.scss
+++ b/packages/design-system/src/css/pagination.scss
@ -259,7 +259,6 @@
 	display: inline-flex;
 	align-items: center;

-
 	.more::before {
 		line-height: 30px;
 	}
@ -313,7 +312,6 @@
 	}
 }

-
 //@mixin pagination-button {
 //	display: flex;
 //	justify-content: center;
--- a/packages/design-system/src/css/popper.scss
+++ b/packages/design-system/src/css/popper.scss
@ -124,7 +124,6 @@
 			}
 		}

-
 		&[data-popper-placement^='bottom'] .el-popper__arrow {
 			border-bottom-color: transparent;

--- a/packages/design-system/src/css/switch.scss
+++ b/packages/design-system/src/css/switch.scss
@ -63,7 +63,9 @@
 		box-sizing: border-box;
 		background: var.$switch-off-color;
 		cursor: pointer;
-		transition: border-color 0.1s, background-color 0.1s;
+		transition:
+			border-color 0.1s,
+			background-color 0.1s;
 		vertical-align: middle;

 		&:after {
--- a/packages/design-system/src/css/tabs.scss
+++ b/packages/design-system/src/css/tabs.scss
@ -179,7 +179,8 @@
 		> .el-tabs__header .el-tabs__item {
 			border-bottom: 1px solid transparent;
 			border-left: 1px solid var(--border-color-base);
-			transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+			transition:
+				color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
 				padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 			&:first-child {
 				border-left: none;
@ -211,7 +212,9 @@
 	@include mixins.m(border-card) {
 		background: var.$color-white;
 		border: 1px solid var(--border-color-base);
-		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
+		box-shadow:
+			0 2px 4px 0 rgba(0, 0, 0, 0.12),
+			0 0 6px 0 rgba(0, 0, 0, 0.04);

 		> .el-tabs__content {
 			padding: 15px;
--- a/packages/design-system/theme/preview/docs.min.css
+++ b/packages/design-system/theme/preview/docs.min.css
@ -20,7 +20,9 @@
 	transition: 0.2s;
 }
 .demo-block.hover {
-	box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5);
+	box-shadow:
+		0 0 8px 0 rgba(232, 237, 250, 0.6),
+		0 2px 4px 0 rgba(232, 237, 250, 0.5);
 }
 .demo-block code {
 	font-family: Menlo, Monaco, Consolas, Courier, monospace;
@ -305,7 +307,9 @@
 	right: 0;
 	height: 2px;
 	width: 0;
-	transition: width 0.2s, opacity 0.4s;
+	transition:
+		width 0.2s,
+		opacity 0.4s;
 	opacity: 1;
 	z-index: 999999;
 }
@ -943,7 +947,9 @@
 	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 98 L100 0 L100 1 L1 98' fill='%23FCC3C3' /></svg>");
 	background-repeat: no-repeat;
 	background-position: 50%;
-	background-size: 100% 100%, auto;
+	background-size:
+		100% 100%,
+		auto;
 }
 .demo-color-box-lite {
 	color: #303133;
@ -1189,7 +1195,13 @@ ul.language-list li {
 }
 .icon-list li span {
 	line-height: normal;
-	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun,
+	font-family:
+		Helvetica Neue,
+		Helvetica,
+		PingFang SC,
+		Hiragino Sans GB,
+		Microsoft YaHei,
+		SimSun,
 		sans-serif;
 	color: #99a9bf;
 	transition: color 0.15s linear;
@ -1811,7 +1823,13 @@ html {
 	margin: 0;
 	padding: 0;
 	height: 100%;
-	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun,
+	font-family:
+		Helvetica Neue,
+		Helvetica,
+		PingFang SC,
+		Hiragino Sans GB,
+		Microsoft YaHei,
+		SimSun,
 		sans-serif;
 	font-weight: 400;
 	-webkit-font-smoothing: antialiased;
@ -1972,7 +1990,8 @@ textarea {
@font-face {
 	font-family: icomoon;
 	src: url(data:application/vnd.ms-fontobject;base64,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);
-	src: url(data:application/vnd.ms-fontobject;base64,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#iefix)
+	src:
+		url(data:application/vnd.ms-fontobject;base64,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#iefix)
 			format('embedded-opentype'),
 		url(data:font/ttf;base64,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)
 			format('truetype'),
--- a/packages/design-system/theme/preview/index.html
+++ b/packages/design-system/theme/preview/index.html
@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
 	<head>
 		<meta charset="UTF-8" />
--- a/packages/editor-ui/index.html
+++ b/packages/editor-ui/index.html
@ -10,9 +10,51 @@
 			window.REST_ENDPOINT = '{{REST_ENDPOINT}}';
 		</script>
 		<% if(!isDev){ %>
-			<script type="text/javascript" src='https://cdn-rs.n8n.io/v1/ra.min.js'></script>
+		<script type="text/javascript" src="https://cdn-rs.n8n.io/v1/ra.min.js"></script>
 		<% } %>
-		<script>!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled getFeatureFlag onFeatureFlags reloadFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[])</script>
+		<script>
+			!(function (t, e) {
+				var o, n, p, r;
+				e.__SV ||
+					((window.posthog = e),
+					(e._i = []),
+					(e.init = function (i, s, a) {
+						function g(t, e) {
+							var o = e.split('.');
+							2 == o.length && ((t = t[o[0]]), (e = o[1])),
+								(t[e] = function () {
+									t.push([e].concat(Array.prototype.slice.call(arguments, 0)));
+								});
+						}
+						((p = t.createElement('script')).type = 'text/javascript'),
+							(p.async = !0),
+							(p.src = s.api_host + '/static/array.js'),
+							(r = t.getElementsByTagName('script')[0]).parentNode.insertBefore(p, r);
+						var u = e;
+						for (
+							void 0 !== a ? (u = e[a] = []) : (a = 'posthog'),
+								u.people = u.people || [],
+								u.toString = function (t) {
+									var e = 'posthog';
+									return 'posthog' !== a && (e += '.' + a), t || (e += ' (stub)'), e;
+								},
+								u.people.toString = function () {
+									return u.toString(1) + '.people (stub)';
+								},
+								o =
+									'capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled getFeatureFlag onFeatureFlags reloadFeatureFlags'.split(
+										' ',
+									),
+								n = 0;
+							n < o.length;
+							n++
+						)
+							g(u, o[n]);
+						e._i.push([i, s, a]);
+					}),
+					(e.__SV = 1));
+			})(document, window.posthog || []);
+		</script>

 		<title>n8n.io - Workflow Automation</title>
 	</head>
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@ -65,7 +65,7 @@
    "n8n-workflow": "workspace:*",
    "normalize-wheel": "^1.0.1",
    "pinia": "^2.1.6",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.0",
    "stream-browserify": "^3.0.0",
    "timeago.js": "^4.0.2",
    "uuid": "^8.3.2",
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@ -188,7 +188,6 @@
 }

 .tags-container {
-
 	.el-select-tags-wrapper .el-tag {
 		font-size: 12px;
 		font-weight: 400;
@ -222,7 +221,8 @@
 			cursor: not-allowed;
 			color: var(--color-foreground-dark);
 		}
-		.el-input__inner, .el-input__inner::placeholder {
+		.el-input__inner,
+		.el-input__inner::placeholder {
 			opacity: 1;
 			color: var(--color-foreground-dark);
 		}
@ -230,7 +230,9 @@
 	.el-select .el-input:not(.is-disabled) .el-input__icon {
 		color: var(--color-text-dark);
 	}
-	.el-input .el-input__inner { text-align: center; }
+	.el-input .el-input__inner {
+		text-align: center;
+	}
 	.el-input:not(.is-disabled) .el-input__inner {
 		&,
 		&:hover,
--- a/packages/editor-ui/src/plugins/i18n/docs/README.md
+++ b/packages/editor-ui/src/plugins/i18n/docs/README.md
@ -507,4 +507,3 @@ After changing the dynamic text file:
 If a `headerText` section was changed, re-run `pnpm build:translations` in `/nodes-base`.

 > **Note**: To translate base and dynamic text simultaneously, run three terminals following the steps from both sections (first terminal running only once) and browse `http://localhost:8080`.
-
--- a/packages/editor-ui/src/styles/autocomplete-theme.scss
+++ b/packages/editor-ui/src/styles/autocomplete-theme.scss
@ -10,7 +10,8 @@

 // Custom autocomplete item type icons
 // 1. Native and n8n extension functions:
-.cm-completionIcon-extension-function, .cm-completionIcon-native-function {
+.cm-completionIcon-extension-function,
+.cm-completionIcon-native-function {
 	&::after {
 		content: 'ƒ';
 	}
--- a/packages/editor-ui/vite.config.ts
+++ b/packages/editor-ui/vite.config.ts
@ -3,7 +3,7 @@ import { resolve } from 'path';
 import { defineConfig, mergeConfig } from 'vite';
 import { defineConfig as defineVitestConfig } from 'vitest/config';
 import { sentryVitePlugin } from '@sentry/vite-plugin';
-import { ViteEjsPlugin } from "vite-plugin-ejs";
+import { ViteEjsPlugin } from 'vite-plugin-ejs';

 import packageJSON from './package.json';

--- a/packages/node-dev/README.md
+++ b/packages/node-dev/README.md
@ -137,8 +137,6 @@ it received as input. This becomes crucial when a node needs to query data such
 all users_. In such cases, the node typically receives only one input item but returns as
 many items as there are users. Therefore, when in doubt, it is recommended to use `execute`!

-
-
 **Trigger node**

 Method is called once when the workflow gets activated. It can then trigger workflow runs and provide the necessary data by itself.
--- a/packages/nodes-base/test/nodes/Airtable/workflow.json
+++ b/packages/nodes-base/test/nodes/Airtable/workflow.json
@ -9,10 +9,7 @@
 			"name": "On clicking 'execute'",
 			"type": "n8n-nodes-base.manualTrigger",
 			"typeVersion": 1,
-			"position": [
-				820,
-				380
-			]
+			"position": [820, 380]
 		},
 		{
 			"parameters": {
@ -35,10 +32,7 @@
 			"name": "Airtable",
 			"type": "n8n-nodes-base.airtable",
 			"typeVersion": 1,
-			"position": [
-				1020,
-				380
-			],
+			"position": [1020, 380],
 			"credentials": {
 				"airtableApi": {
 					"id": "20",
--- a/packages/workflow/test/TypeValidation.test.ts
+++ b/packages/workflow/test/TypeValidation.test.ts
@ -136,8 +136,7 @@ describe('Type Validation', () => {
 		).toEqual(true);
 		// Invalid value:
 		expect(validateFieldType('json', ['one', 'two'], 'object').valid).toEqual(false);
-		// eslint-disable-next-line prettier/prettier
-		expect(validateFieldType('json', ["one", "two"], 'object').valid).toEqual(false);
+		expect(validateFieldType('json', ['one', 'two'], 'object').valid).toEqual(false);
 		expect(validateFieldType('json', '1', 'object').valid).toEqual(false);
 		expect(validateFieldType('json', '[1]', 'object').valid).toEqual(false);
 		expect(validateFieldType('json', '1.1', 'object').valid).toEqual(false);
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -1,4 +1,4 @@
-lockfileVersion: '6.1'
+lockfileVersion: '6.0'

 settings:
  autoInstallPeers: true
@ -11,6 +11,7 @@ overrides:
  '@types/node': ^18.16.16
  chokidar: 3.5.2
  jsonwebtoken: 9.0.0
+  prettier: ^3.0.0
  semver: ^7.5.4
  tough-cookie: ^4.1.3
  tslib: ^2.6.1
@ -91,9 +92,6 @@ importers:
      p-limit:
        specifier: ^3.1.0
        version: 3.1.0
-      prettier:
-        specifier: ^2.8.8
-        version: 2.8.8
      rimraf:
        specifier: ^5.0.1
        version: 5.0.1
@ -887,8 +885,8 @@ importers:
        specifier: ^2.1.6
        version: 2.1.6(typescript@5.1.6)(vue@3.3.4)
      prettier:
-        specifier: ^2.8.8
-        version: 2.8.8
+        specifier: ^3.0.0
+        version: 3.0.0
      stream-browserify:
        specifier: ^3.0.0
        version: 3.0.0
@ -4966,7 +4964,7 @@ packages:
      less-loader: 11.1.3(less@4.1.3)(webpack@5.75.0)
      postcss: 8.4.27
      postcss-loader: 7.3.3(postcss@8.4.27)(webpack@5.75.0)
-      prettier: 2.8.8
+      prettier: 3.0.0
      react: 17.0.2
      react-dom: 18.2.0(react@17.0.2)
      resolve-url-loader: 5.0.0
@ -5280,7 +5278,7 @@ packages:
      jscodeshift: 0.14.0(@babel/preset-env@7.22.9)
      leven: 3.1.0
      ora: 5.4.1
-      prettier: 2.8.8
+      prettier: 3.0.0
      prompts: 2.4.2
      puppeteer-core: 2.1.1
      read-pkg-up: 7.0.1
@ -5331,7 +5329,7 @@ packages:
      globby: 11.1.0
      jscodeshift: 0.14.0(@babel/preset-env@7.22.9)
      lodash: 4.17.21
-      prettier: 2.8.8
+      prettier: 3.0.0
      recast: 0.23.3
    transitivePeerDependencies:
      - supports-color
@ -17147,16 +17145,10 @@ packages:
      fast-diff: 1.2.0
    dev: true

-  /prettier@2.8.8:
-    resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
-    engines: {node: '>=10.13.0'}
-    hasBin: true
-
  /prettier@3.0.0:
    resolution: {integrity: sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==}
    engines: {node: '>=14'}
    hasBin: true
-    dev: true

  /pretty-bytes@5.6.0:
    resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
--- a/scripts/format.mjs
+++ b/scripts/format.mjs
@ -4,7 +4,7 @@ import fs from 'fs';
 import path from 'path';
 import { execSync } from 'child_process';

-const prettier = path.resolve('node_modules', 'prettier', 'bin-prettier.js');
+const prettier = path.resolve('node_modules', '.bin', 'prettier');

 if (!fs.existsSync(prettier)) {
 	throw new Error(