Add BiomeJS for Linting and Formatting JavaScript relates to #1295 #1299

2024-10-13T22:59:04+08:00

oxdev03 commented

2024-10-13 22:59:04 +08:00

(Migrated from github.com)

Summary:

Added BiomeJS to lint and format JavaScript code.
Integrated BiomeJS into the devcontainer and CI pipeline to ensure code consistency and quality.
The CI now checks for linting issues in JavaScript files automatically.
relates to #1295

Why BiomeJS:

https://github.com/biomejs/biome
Biome offers a lighter and faster alternative to using ESLint and Prettier combined, providing the same functionality in a single tool.
Simplifies configuration by reducing the need for multiple tools and configurations.

Open Points:

Update the Wiki to include instructions on how to format and lint JS code using Biome.
Check whether the current lint rules are sufficient.

#### Summary: - Added **BiomeJS** to lint and format JavaScript code. - Integrated BiomeJS into the **devcontainer** and CI pipeline to ensure code consistency and quality. - The CI now checks for linting issues in JavaScript files automatically. - relates to #1295 #### Why BiomeJS: - https://github.com/biomejs/biome - Biome offers a lighter and faster alternative to using ESLint and Prettier combined, providing the same functionality in a single tool. - Simplifies configuration by reducing the need for multiple tools and configurations. #### Open Points: - Update the **Wiki** to include instructions on how to format and lint JS code using Biome. - Check whether the current lint rules are sufficient.

zachgoll (Migrated from github.com) reviewed 2024-10-14 22:50:53 +08:00

biome.json

						
				@@ -0,0 +1,34 @@

				{

zachgoll (Migrated from github.com) commented

2024-10-14 22:50:53 +08:00

Currently, our .editorconfig has:

indent_style = space
indent_size = 2

Will this conflict since it's using tabs?

Currently, our `.editorconfig` has: ``` indent_style = space indent_size = 2 ``` Will this conflict since it's using tabs?

zachgoll commented

2024-10-14 22:55:55 +08:00

(Migrated from github.com)

@oxdev03 thanks for the comprehensive integration here! Haven't used Biome yet, but seems like an overall good fit for the project regarding simplicity and performance.

Just jotting down the steps I took to get my local environment setup with VSCode for others:

Install Biome VSC extension
Add Biome as default formatter for JS in settings

{
    "[javascript]": {
      "editor.formatOnSave": true,
      "editor.defaultFormatter": "biomejs.biome",
    }
}

npm install to install dev dependencies
(optional) restart editor

@oxdev03 thanks for the comprehensive integration here! Haven't used Biome yet, but seems like an overall good fit for the project regarding simplicity and performance. Just jotting down the steps I took to get my local environment setup with VSCode for others: 1. Install Biome VSC extension 2. Add Biome as default formatter for JS in settings ```json { "[javascript]": { "editor.formatOnSave": true, "editor.defaultFormatter": "biomejs.biome", } } ``` 3. `npm install` to install dev dependencies 4. (optional) restart editor

zachgoll (Migrated from github.com) reviewed 2024-10-14 22:58:24 +08:00

.github/workflows/ci.yml

						
				@@ -52,6 +52,26 @@ jobs:

				      - name: Lint code for consistent style

zachgoll (Migrated from github.com) commented

2024-10-14 22:58:24 +08:00

To keep this as low-overhead as possible, I think we should just enforce the linting:

run: npm run lint

The formatting is a nice addition that I'll be using locally, but don't want that to be a requirement for new contributors and also for pushing hot fixes directly to main (our internal team does this occasionally to fix tiny bugs)

To keep this as low-overhead as possible, I think we should just enforce the linting: ``` run: npm run lint ``` The formatting is a nice addition that I'll be using locally, but don't want that to be a requirement for new contributors and also for pushing hot fixes directly to `main` (our internal team does this occasionally to fix tiny bugs)

oxdev03 (Migrated from github.com) reviewed 2024-10-15 04:18:08 +08:00

biome.json

						
				@@ -0,0 +1,34 @@

				{

oxdev03 (Migrated from github.com) commented

2024-10-15 04:18:08 +08:00

good point, indentStyle overrides the imported editorconfig. I removed it, so its consistent across all files.

oxdev03 (Migrated from github.com) reviewed 2024-10-15 04:23:08 +08:00

.github/workflows/ci.yml

						
				@@ -52,6 +52,26 @@ jobs:

				      - name: Lint code for consistent style

oxdev03 (Migrated from github.com) commented

2024-10-15 04:23:08 +08:00

changed it, even if its not a best practice.

oxdev03 commented

2024-10-15 04:26:59 +08:00

(Migrated from github.com)

{
    "[javascript]": {
      "editor.formatOnSave": true,
      "editor.defaultFormatter": "biomejs.biome",
    }
}

yes , the contributor would also need to have nodejs installed. I added the autosave to the vscode/settings.json file to the project.

If the DevContainer is used no additional steps are required.

> ```json > { > "[javascript]": { > "editor.formatOnSave": true, > "editor.defaultFormatter": "biomejs.biome", > } > } > ``` yes , the contributor would also need to have nodejs installed. I added the autosave to the vscode/settings.json file to the project. If the DevContainer is used no additional steps are required.

👍 1

zachgoll (Migrated from github.com) reviewed 2024-10-15 05:01:33 +08:00

.github/workflows/ci.yml

						
				@@ -52,6 +52,26 @@ jobs:

				      - name: Lint code for consistent style

zachgoll (Migrated from github.com) commented

2024-10-15 05:01:33 +08:00

@oxdev03 correct, not best practice and that's 100% fine at our stage/size

zachgoll (Migrated from github.com) approved these changes 2024-10-15 05:05:12 +08:00

zachgoll (Migrated from github.com) left a comment

Looks good! Thanks for setting this up!

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: gavin/maybe#1299

				`@@ -52,6 +52,26 @@ jobs:`
				`- name: Lint code for consistent style`