Merge pull request #89 from EXXETA/feature/87-code-formatting-setup

#87 - added Prettier check to CI pipeline.

.github/pull_request_template.md

@@ -10,7 +10,8 @@ If relevant, mention your manual testing here. If possible, include screenshots.
 
 - [ ] Issue has been linked to this PR
 - [ ] Code has been reviewed by person creating the PR
-- [ ] Commit messages, branch names, code formatting adheres to our guidelines
+- [ ] Commit messages, branch names, code formatting adheres to our [Contributing Guidelines
+](https://github.com/EXXETA/rufus/blob/main/CONTRIBUTING.md)
 - [ ] Automated tests have been written, if possible
 - [ ] Manual testing has been performed
 - [ ] Documentation has been updated, if necessary

.github/workflows/ci.yml

@@ -27,8 +27,11 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Prettier check
+        run: npx prettier '**/*.{ts,tsx}' --check
+
       - name: Run tests
         run: npm test
 
       - name: Build package
-        run: npm run package
+        run: npm run package

.gitignore

@@ -94,6 +94,20 @@ out/
 # IntelliJ
 .idea
 
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
 # SCSS
 *.css.d.ts
 *.sass.d.ts

.prettierrc

@@ -2,5 +2,6 @@
   "trailingComma": "es5",
   "tabWidth": 2,
   "semi": true,
-  "singleQuote": true
+  "singleQuote": true,
+  "printWidth": 100
 }

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}

CONTRIBUTING.md

@@ -55,6 +55,40 @@ For this repository we have agreed on the following git workflow:
     - Preferably rebase your branch onto `main` before completing the PR
 - Once the `main` branch reaches a stable state, we can create a release by...
     - creating an annotated tag `vX.Y.Z` for the target commit on the `main` branch
-      - tag message should be: `Release vX.Y.Z`
+        - tag message should be: `Release vX.Y.Z`
     - creating a release on github that references the tag
-    - attaching the release binaries to the github release
+    - attaching the release binaries to the github release
+
+## Code Formatting
+
+We use [Prettier](https://prettier.io/) for TypeScript code formatting.
+To ensure that the code formatting follows our configuration
+in [.prettierrc](https://github.com/EXXETA/rufus/blob/main/.prettierrc), the Prettier plugin should
+be installed in your IDE.
+The setup for Prettier is described in the following sections for IntelliJ and Visual Studio Code:
+
+### IntelliJ
+
+1. Navigate to **Settings** > **Plugins**.
+2. Install [Prettier](https://plugins.jetbrains.com/plugin/10456-prettier) from marketplace.
+3. Install [Save Actions X](https://plugins.jetbrains.com/plugin/22113-save-actions-x) from
+   marketplace.
+4. Activate options "Activate save actions on save (before saving each file, performs the configured
+   actions below)" and "Reformat file":
+   ![Code Formatting IntelliJ](images/contributing/code-formatting-intellij.png)
+
+### Visual Studio Code
+
+Install [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+from Extensions. When installation is completed, Prettier will be used directly as the default
+formatter when saving a file, as it is already configured in `.vscode/settings.json`.
+
+---
+After following these instructions, the code should always be formatted automatically when saving a
+file.
+
+However, you can check all Typescript files for code style issues with this command:
+`npx prettier '**/*.{ts,tsx}' --check`
+
+If you want Prettier to fix code style issues, you can use the following command:
+`npx prettier '**/*.{ts,tsx}' --write`

forge.config.ts

@@ -14,7 +14,7 @@ import { rendererConfig } from './webpack.renderer.config';
 const config: ForgeConfig = {
   packagerConfig: {
     asar: true,
-    icon: './images/icon'
+    icon: './images/icon',
   },
   rebuildConfig: {},
   makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']), new MakerRpm({}), new MakerDeb({})],
@@ -30,16 +30,16 @@ const config: ForgeConfig = {
             js: './src/renderer/index.tsx',
             name: 'main_window',
             preload: {
-              js: './src/main/preload.ts'
-            }
-          }
-        ]
+              js: './src/main/preload.ts',
+            },
+          },
+        ],
       },
       devServer: {
         client: {
-          overlay: { runtimeErrors: error => !error.message.startsWith('ResizeObserver loop') }
-        }
-      }
+          overlay: { runtimeErrors: (error) => !error.message.startsWith('ResizeObserver loop') },
+        },
+      },
     }),
     // Fuses are used to enable/disable various Electron functionality
     // at package time, before code signing the application
@@ -50,9 +50,9 @@ const config: ForgeConfig = {
       [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
       [FuseV1Options.EnableNodeCliInspectArguments]: false,
       [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
-      [FuseV1Options.OnlyLoadAppFromAsar]: true
-    })
-  ]
+      [FuseV1Options.OnlyLoadAppFromAsar]: true,
+    }),
+  ],
 };
 
 export default config;

package.json

@@ -48,6 +48,7 @@
     "monaco-editor-webpack-plugin": "^7.1.0",
     "node-loader": "^2.0.0",
     "postcss": "^8.4.38",
+    "prettier": "^3.3.3",
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.4",
     "ts-jest": "^29.2.5",

scripts/setup-jest.ts

@@ -20,10 +20,8 @@ jest.mock('electron', () => ({
     getName: () => 'DiagClient',
   },
   safeStorage: {
-    encryptString: (plainText: string) =>
-      Buffer.from(plainText).toString('base64'),
-    decryptString: (encrypted: Buffer) =>
-      Buffer.from(encrypted.toString(), 'base64').toString(),
+    encryptString: (plainText: string) => Buffer.from(plainText).toString('base64'),
+    decryptString: (encrypted: Buffer) => Buffer.from(encrypted.toString(), 'base64').toString(),
   },
 }));
 jest.mock('node:fs', () => fs);

src/main/environment/service/environment-service.ts

@@ -14,8 +14,7 @@ const persistenceService = PersistenceService.instance;
  * request body, headers, etc.).
  */
 export class EnvironmentService implements Initializable {
-  public static readonly instance: EnvironmentService =
-    new EnvironmentService();
+  public static readonly instance: EnvironmentService = new EnvironmentService();
 
   public currentCollection: Collection;
 
@@ -34,9 +33,7 @@ export class EnvironmentService implements Initializable {
    * @returns The stream with the variables replaced.
    */
   public setVariablesInStream(stream: Readable) {
-    return stream.pipe(
-      new TemplateReplaceStream(this.getVariableValue.bind(this)),
-    );
+    return stream.pipe(new TemplateReplaceStream(this.getVariableValue.bind(this)));
   }
 
   /**
@@ -80,9 +77,7 @@ export class EnvironmentService implements Initializable {
    * @param path The path of the collection to load and set as the current collection.
    */
   public async changeCollection(path: string) {
-    return (this.currentCollection = await persistenceService.loadCollection(
-      path,
-    ));
+    return (this.currentCollection = await persistenceService.loadCollection(path));
   }
 
   /**
@@ -94,10 +89,7 @@ export class EnvironmentService implements Initializable {
    * @returns The value of the variable if it exists and  is enabled, otherwise undefined.
    */
   private getVariableValue(key: string) {
-    return (
-      this.currentCollection.variables[key]?.value ??
-      this.getSystemVariableValue(key)
-    );
+    return this.currentCollection.variables[key]?.value ?? this.getSystemVariableValue(key);
   }
 
   /**

src/main/error/internal-error.ts

@@ -6,7 +6,11 @@ export enum InternalErrorType {
 }
 
 export class InternalError extends Error {
-  constructor(public readonly type: InternalErrorType, message: string, public readonly cause?: Error) {
+  constructor(
+    public readonly type: InternalErrorType,
+    message: string,
+    public readonly cause?: Error
+  ) {
     super(message);
     this.name = 'InternalError';
   }

src/main/event/main-event-service.test.ts

@@ -3,17 +3,14 @@ import path from 'node:path';
 import { tmpdir } from 'node:os';
 import { fs } from 'memfs';
 
-jest.mock(
-  'electron',
-  () => ({
-    ipcMain: {
-      handle: jest.fn(),
-    },
-    app: {
-      getPath: jest.fn().mockReturnValue(''),
-    },
-  }),
-);
+jest.mock('electron', () => ({
+  ipcMain: {
+    handle: jest.fn(),
+  },
+  app: {
+    getPath: jest.fn().mockReturnValue(''),
+  },
+}));
 
 const eventService = MainEventService.instance;
 
@@ -30,7 +27,6 @@ describe('MainEventService', () => {
   });
 
   it('should read the file correctly providing no parameters', async () => {
-
     // Act
     const buffer = await eventService.readFile(TEST_FILE_PATH);
 
@@ -39,7 +35,6 @@ describe('MainEventService', () => {
   });
 
   it('should read the file correctly with offset', async () => {
-
     // Act
     const buffer = await eventService.readFile(TEST_FILE_PATH, 1);
 
@@ -48,12 +43,10 @@ describe('MainEventService', () => {
   });
 
   it('should read the file correctly with offset and length', async () => {
-
     // Act
     const buffer = await eventService.readFile(TEST_FILE_PATH, 1, 2);
 
     // Assert
     expect(Buffer.from(buffer).toString()).toBe(TEST_STRING.substring(1, 3));
   });
-
 });

src/main/event/main-event-service.ts

@@ -20,7 +20,7 @@ declare type AsyncFunction<R> = (...args: unknown[]) => Promise<R>;
  * @param fn The function to wrap.
  */
 function wrapWithErrorHandler<F extends AsyncFunction<R>, R>(fn: F) {
-  return async function(...args: Parameters<F>) {
+  return async function (...args: Parameters<F>) {
     try {
       return (await fn(...args)) as R;
     } catch (error) {
@@ -36,14 +36,13 @@ function wrapWithErrorHandler<F extends AsyncFunction<R>, R>(fn: F) {
  * @param functionName The name of the function to register.
  */
 function registerEvent<T>(instance: T, functionName: keyof T) {
-  if (typeof functionName !== 'string' || functionName === 'constructor')
-    return;
+  if (typeof functionName !== 'string' || functionName === 'constructor') return;
 
   const method = instance[functionName];
   if (typeof method === 'function') {
     console.debug(`Registering event function "${functionName}()" on backend`);
     ipcMain.handle(functionName as string, (_event, ...args) =>
-      wrapWithErrorHandler(method as unknown as AsyncFunction<unknown>)(...args),
+      wrapWithErrorHandler(method as unknown as AsyncFunction<unknown>)(...args)
     );
   }
 }
@@ -84,7 +83,7 @@ export class MainEventService implements IEventService {
       offset,
       'and length limited to',
       length ?? 'unlimited',
-      'bytes',
+      'bytes'
     );
 
     let file: FileHandle | null = null;
@@ -105,10 +104,7 @@ export class MainEventService implements IEventService {
     }
   }
 
-  async saveRequest(
-    request: RufusRequest,
-    textBody?: string,
-  ) {
+  async saveRequest(request: RufusRequest, textBody?: string) {
     await persistenceService.saveRequest(request, textBody);
   }
 

src/main/filesystem/filesystem-service.ts

@@ -6,13 +6,10 @@ import fs from 'node:fs';
  * Singleton service for file system operations
  */
 export class FileSystemService {
-
   private static readonly _instance: FileSystemService = new FileSystemService();
   private static readonly _tempDir = app?.getPath('temp') ?? '';
 
-  constructor() {
-
-  }
+  constructor() {}
 
   public static get instance() {
     return this._instance;
@@ -36,5 +33,4 @@ export class FileSystemService {
     // how does this even work...
     return fs.createReadStream(filePath);
   }
-
 }