Merge pull request #621 from KhronosGroup/maintenance/formatting

added prettier formatting

Author: UX3D-haertl

.prettierignore

@@ -0,0 +1 @@
+glTF-Sample-Renderer/source/libs

.prettierrc

@@ -0,0 +1,7 @@
+{
+    "semi": true,
+    "trailingComma": "none",
+    "tabWidth": 4,
+    "bracketSpacing": true,
+    "printWidth": 100
+}

README.md

@@ -1,20 +1,17 @@
-glTF Sample Viewer Web App
-==============================
+# glTF Sample Viewer Web App
 
 [![](../assets/images/BoomBox.jpg)](https://github.khronos.org/glTF-Sample-Viewer-Release/)
 
 This is the official [Khronos glTF 2.0](https://www.khronos.org/gltf/) Sample Viewer using [WebGL 2.0](https://www.khronos.org/webgl/):
 
-
-Viewer
-======
+# Viewer
 
 Link to the live [glTF 2.0 Sample Viewer](https://github.khronos.org/glTF-Sample-Viewer-Release/).
 
-Features
---------
+## Features
 
 ### glTF
+
 - [x] glTF 2.0
 - [x] [KHR_animation_pointer](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_animation_pointer)
 - [x] [KHR_draco_mesh_compression](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_draco_mesh_compression)
@@ -34,8 +31,8 @@ Features
 - [x] [KHR_materials_variants](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_variants)
 - [x] [KHR_materials_volume](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_volume)
 - [KHR_materials_volume_scatter](https://github.com/KhronosGroup/glTF/blob/e17468db6fd9ae3ce73504a9f317bd853af01a30/extensions/2.0/Khronos/KHR_materials_volume_scatter/README.md)
-  - [x] For dense volumes using KHR_materials_diffuse_transmission
-  - [ ] For sparse volumes using KHR_materials_transmission
+    - [x] For dense volumes using KHR_materials_diffuse_transmission
+    - [ ] For sparse volumes using KHR_materials_transmission
 - [x] [KHR_mesh_quantization](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_mesh_quantization)
 - [x] [KHR_texture_basisu](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_texture_basisu)
 - [x] [KHR_texture_transform](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_texture_transform)
@@ -44,6 +41,7 @@ Features
 - [x] [EXT_texture_webp](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Vendor/EXT_texture_webp)
 
 ### UI
+
 - Select all [glTF-Sample-Assets](https://github.com/KhronosGroup/glTF-Sample-Assets) directly via UI
 - Load your own glTF/glb and HDR files via drag and drop
 - Customize lighting and tone mapping
@@ -55,9 +53,7 @@ Features
 - Show statistics about the currently loaded file
 - Specify URL parameters to modify behavior on load
 
-
-Usage
------
+## Usage
 
 ### Controls
 
@@ -73,50 +69,52 @@ Usage
 
 ### Change glTF model
 
-* Choose one of the glTF models in the selection list
-* Drag and drop glTF files into viewer
+- Choose one of the glTF models in the selection list
+- Drag and drop glTF files into viewer
 
 ### Change the environment map
-* Drag and drop a .hdr panorama file
+
+- Drag and drop a .hdr panorama file
 
 ### URL parameters
+
 URL parameters are added at the end of the sample viewer URL: \
 `?key=value&another_key=another_value`
 
 Possible parameters:
+
 - `model=URL_to_file`: Load glTF/glb from specified URL
-- `noUI`: Disable UI 
+- `noUI`: Disable UI
 - `yaw=90`: Orbit the camera around the model along the Y-axis in degrees. With 90 degrees you look at the model from the left side.
 - `pitch=90`: Orbit the camera around the model along the X-axis in degrees. With 90 degrees you look at the model from the top. Value range: -90 to 90
 - `distance=5`: The models gets smaller with positive and bigger with negative numbers. Relative to the initial camera position.
 
-Setup
------
+## Setup
 
 For local usage and debugging, please follow these instructions:
 
 1. Checkout the [`main`](../../tree/main) branch
 
-2. Pull the submodule for the required [glTF-Sample-Renderer](https://github.com/KhronosGroup/glTF-Sample-Renderer)  `git submodule update  --init --recursive`
+2. Pull the submodule for the required [glTF-Sample-Renderer](https://github.com/KhronosGroup/glTF-Sample-Renderer) `git submodule update  --init --recursive`
 
 3. Build the web app
-	- run `npm install`
-	- start a demo in the browser with `npm run dev`, and open http://localhost:8000.
+    - run `npm install`
+    - start a demo in the browser with `npm run dev`, and open http://localhost:8000.
 
 When making changes, the project is automatically rebuilt and the `./dist` directory is populated with the web app. This directory contains all files necessary for deployment to a webserver.
 
-Debugging
----------
+## Debugging
 
-* Requirements
-  * [Visual Studio Code](https://code.visualstudio.com/) or [vscodium](https://github.com/VSCodium/vscodium)
-  * [Chrome](https://www.google.com/chrome/) or [Firefox](https://www.mozilla.org/en-US/firefox/new/)
-* Install the [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) or [Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug) extension for Visual Studio Code
-* Open the project directory in Visual Studio Code and select `Debug->Add Configuration->Chrome` or `Debug->Add Configuration->Firefox` so the `.vscode/launch.json` file is created.
-* For chrome: Append `/dist` to `${workspaceFolder}` in the `launch.json` file
-* `Debug->Start Debugging` should now launch a Chrome or Firefox window with the sample viewer and VS Code breakpoints should be hit.
+- Requirements
+    - [Visual Studio Code](https://code.visualstudio.com/) or [vscodium](https://github.com/VSCodium/vscodium)
+    - [Chrome](https://www.google.com/chrome/) or [Firefox](https://www.mozilla.org/en-US/firefox/new/)
+- Install the [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) or [Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug) extension for Visual Studio Code
+- Open the project directory in Visual Studio Code and select `Debug->Add Configuration->Chrome` or `Debug->Add Configuration->Firefox` so the `.vscode/launch.json` file is created.
+- For chrome: Append `/dist` to `${workspaceFolder}` in the `launch.json` file
+- `Debug->Start Debugging` should now launch a Chrome or Firefox window with the sample viewer and VS Code breakpoints should be hit.
 
 ### Known Issues
+
 npm install / npm run dev give the following warnings:
 
 The following warning comes from a thirdparty and does not affect sample viewer since the mentioned line 179 is never executed.
@@ -167,4 +165,25 @@ npm WARN deprecated [email protected]: Glob versions prior to v9 are no longer supporte
 npm WARN deprecated [email protected]: Glob versions prior to v9 are no longer supported
 npm WARN deprecated [email protected]: Glob versions prior to v9 are no longer supported
 npm WARN deprecated [email protected]: Glob versions prior to v9 are no longer supported
-```
+```
+
+## Formatting
+
+This repository uses [Prettier](https://prettier.io/) for code formatting and [ESLint](https://eslint.org/) for linting.
+
+To check the formatting and linting of the code run:
+
+```bash
+npm run format
+```
+
+Prettier and ESLint are configured to only run on files in the "source" folder and ignore files in "source/libs".
+
+#### Visual Studio Code
+
+There are extensions for both Prettier and ESLint in Visual Studio Code. They can be found in the marketplace:
+
+- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+
+You are encouraged to run Prettier and ESLint on your code before committing.

eslint.config.js

@@ -1,12 +1,13 @@
-
+import eslint from '@eslint/js';
 import js from "@eslint/js";
 import globals from 'globals';
 
 export default [
+    eslint.configs.recommended,
     js.configs.recommended,
     {
         languageOptions: {
-            ecmaVersion: 2020,
+            ecmaVersion: 2022,
             sourceType: "module",
             globals: {
                 ...globals.browser,
@@ -38,6 +39,6 @@ export default [
         }
     },
     {
-        ignores: ["/**/dist/*", "/**/libs/*"]
+        ignores: ["/**/dist/*", "**/libs/*"]
     }
 ];

glTF-Sample-Renderer

@@ -1,3 +1,3 @@
-import main from './GltfSVApp.js';
+import main from "./GltfSVApp.js";
 
 main();

main.js

@@ -13,6 +13,9 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint src/**/*.js main.js rollup.config.js glTF-Sample-Renderer/source/**/*.js",
     "lint:fix": "eslint --fix src/**/*.js main.js rollup.config.js glTF-Sample-Renderer/source/**/*.js",
+    "prettier": "npx prettier src/**/*.js main.js glTF-Sample-Renderer/source/**/*.js --check",
+    "prettier:fix": "npm run prettier -- --write",
+    "format": "npm run prettier:fix && npm run lint:fix",
     "postversion": "git push && git push --tags"
   },
   "watch": {
@@ -66,8 +69,10 @@
     "@rollup/plugin-wasm": "^6.2.2",
     "concurrently": "^8.2.2",
     "eslint": "^9.5.0",
+    "eslint-config-prettier": "^10.1.8",
     "http-server": "^14.1.1",
     "npm-watch": "^0.13.0",
+    "prettier": "^3.6.2",
     "rollup": "^4.23.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^2.0.0",