From df223b6fcf446f08c431b4a3e0be6669649d3b7b Mon Sep 17 00:00:00 2001
From: Josh <8007967+jjspace@users.noreply.github.com>
Date: Wed, 3 Jan 2024 13:57:43 -0500
Subject: [PATCH 1/4] run prettier and eslint

---
 .eslintignore              |   2 +
 .eslintrc.json             |   8 +
 .github/workflows/main.yml |   9 +-
 .gitignore                 |   3 +-
 .prettierignore            |  15 +
 .prettierrc                |   1 +
 README.md                  |  56 ++--
 TUTORIAL.md                | 635 +++++++++++++++++++------------------
 package.json               |  10 +-
 src/css/main.css           |  16 +-
 src/index.html             |  16 +-
 src/index.js               |  32 +-
 webpack.config.js          |  97 +++---
 13 files changed, 495 insertions(+), 405 deletions(-)
 create mode 100644 .eslintignore
 create mode 100644 .eslintrc.json
 create mode 100644 .prettierignore
 create mode 100644 .prettierrc

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 00000000..9a530cb2
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,2 @@
+dist/**
+webpack.config.js
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 00000000..78bf21bc
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,8 @@
+{
+  "root": true,
+  "extends": ["cesium/browser"],
+  "plugins": ["html", "es"],
+  "rules": {
+    "no-unused-vars": ["error", { "vars": "all", "args": "none" }]
+  }
+}
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 2b758cdf..35b397b3 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -5,16 +5,19 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [ 16, 18 ]
+        node: [18, 20]
     name: Node ${{ matrix.node }}
     steps:
       - uses: actions/checkout@v3
       - name: install node ${{ matrix.node }}
         uses: actions/setup-node@v3
         with:
-           node-version: ${{ matrix.node }}
+          node-version: ${{ matrix.node }}
       - name: install
         run: npm install
+      - name: lint *.js
+        run: npm run eslint
+      - name: format code
+        run: npm run prettier-check
       - name: build
         run: npm run build
-
diff --git a/.gitignore b/.gitignore
index 6578bbf5..2f72fe4f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 /dist/
 /node_modules/
 package-lock.json
-.DS_Store
\ No newline at end of file
+.DS_Store
+.eslintcache
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..eab7d5e8
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,15 @@
+
+# Ignore everything
+*
+
+# Unignore directories (to all depths) and unignore code and style files in these directories
+!.github/**/
+!.vscode/**/
+!src/**/
+!doc/**/
+
+!**/*.js
+!**/*.css
+!**/*.html
+!**/*.md
+!**/*.json
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..0967ef42
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/README.md b/README.md
index 4c57c2ff..f2a6d206 100644
--- a/README.md
+++ b/README.md
@@ -6,17 +6,17 @@ A minimal recommended setup for an applications using [Cesium](https://cesium.co
 
 ## Running this application
 
-````sh
+```sh
 npm install
 npm start
-````
+```
 
 Navigate to `localhost:8080`.
 
 ### Available scripts
 
-* `npm start` - Runs a webpack build with `webpack.config.js` and starts a development server
-* `npm run build` - Runs a webpack build with `webpack.config.js`
+- `npm start` - Runs a webpack build with `webpack.config.js` and starts a development server
+- `npm run build` - Runs a webpack build with `webpack.config.js`
 
 ## Requiring Cesium in your application
 
@@ -24,16 +24,16 @@ We recommend [importing named exports](https://developer.mozilla.org/en-US/docs/
 
 ### Import named modules from Cesium
 
-````js
-import { Color } from 'cesium';
+```js
+import { Color } from "cesium";
 var c = Color.fromRandom();
-````
+```
 
 ### Import Cesium static asset files
 
-````js
+```js
 import "cesium/Build/Cesium/Widgets/widgets.css";
-````
+```
 
 ## Removing pragmas
 
@@ -41,27 +41,31 @@ To remove pragmas such as a traditional Cesium release build, use the [`strip-pr
 
 Install the plugin with npm,
 
-````sh
+```sh
 npm install strip-pragma-loader --save-dev
-````
+```
 
 and include the loader in `module.rules` with `debug` set to `false`.
 
-````js
-rules: [{
-	test: /\.js$/,
-	enforce: 'pre',
-	include: path.resolve(__dirname, cesiumSource),
-	use: [{
-		loader: 'strip-pragma-loader',
-		options: {
-		    pragmas: {
-				debug: false
-			}
-		}
-	}]
-}]
-````
+```js
+rules: [
+  {
+    test: /\.js$/,
+    enforce: "pre",
+    include: path.resolve(__dirname, cesiumSource),
+    use: [
+      {
+        loader: "strip-pragma-loader",
+        options: {
+          pragmas: {
+            debug: false,
+          },
+        },
+      },
+    ],
+  },
+];
+```
 
 ## Contributions
 
diff --git a/TUTORIAL.md b/TUTORIAL.md
index 5e8e3728..89b6bbb7 100644
--- a/TUTORIAL.md
+++ b/TUTORIAL.md
@@ -3,6 +3,7 @@
 [Webpack](https://webpack.js.org/) is a popular and powerful tool for bundling JavaScript modules. It allows developers to structure their code and assets in an intuitive way and to load different kinds of files as needed with simple require statements. When building, it will trace code dependencies and pack these modules into one or more bundles that are loaded by the web browser. This tutorial is a good place to start if you’d like to use CesiumJS to develop a more advanced web application. If you’re new to Cesium and are looking to learn to build your first sample app, take a look at our [Getting Started Tutorial](https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/).
 
 You'll learn how to:
+
 - Build a simple web app from the ground up using webpack
 - Integrate the [Cesium npm package](https://www.npmjs.com/package/cesium) into your web app
 
@@ -22,191 +23,207 @@ You'll learn how to:
 1. Create a `src` directory for your app code. When you build the app, webpack will automatically produce distribution files in a directory named `dist`.
 2. Create the files `index.html` and `index.js` in the `src` directory added in step 1.
 3. Add the following code to `src/index.html`. This will serve as a boilerplate HTML page to get us started.
-    ```html
-    <!DOCTYPE html>
-    <html>
-    <head>
-        <meta charset="utf-8">
-    </head>
-    <body>
-        <p>Hello World!</p>
-    </body>
-    </html>
-    ```
+   ```html
+   <!doctype html>
+   <html>
+     <head>
+       <meta charset="utf-8" />
+     </head>
+     <body>
+       <p>Hello World!</p>
+     </body>
+   </html>
+   ```
 4. Add the following code to `src/index.js`. This will serve as our boilerplate JavaScript code.
-    ```js
-    console.log('Hello World!');
-    ```
+   ```js
+   console.log("Hello World!");
+   ```
 5. Create the file `src/css/main.css` and add the following css code
-    ```css
-    html, body, #cesiumContainer {	
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-    }
-    ```
+   ```css
+   html,
+   body,
+   #cesiumContainer {
+     width: 100%;
+     height: 100%;
+     margin: 0;
+     padding: 0;
+     overflow: hidden;
+   }
+   ```
 
 ## Install and Configure Webpack
+
 1. Install webpack by running `npm install --save-dev webpack`. The files `package-lock.json` and `package.json` should appear in your main directory. You should also see a new folder in your main directory named `node_modules`.
-2. Create the file `webpack.config.js` in your main directory. 
+2. Create the file `webpack.config.js` in your main directory.
 3. Define our webpack [configuration](https://webpack.js.org/concepts/configuration/) object by adding the following code to `webpack.config.js`
-    ```js
-    const path = require('path');
-
-    const webpack = require('webpack');
-
-    module.exports = {
-        context: __dirname,
-        entry: {
-            app: './src/index.js'
-        },
-        output: {
-            filename: 'app.js',
-            path: path.resolve(__dirname, 'dist'),
-        }
-    };
-    ```
-    In this code, `context` specifies the base path for your files. `entry` is used to specify bundles and `src/index.js` is our entry point. Webpack will output the bundel `app.js` to the folder `dist`, that webpack will create at runtime.
+
+   ```js
+   const path = require("path");
+
+   const webpack = require("webpack");
+
+   module.exports = {
+     context: __dirname,
+     entry: {
+       app: "./src/index.js",
+     },
+     output: {
+       filename: "app.js",
+       path: path.resolve(__dirname, "dist"),
+     },
+   };
+   ```
+
+   In this code, `context` specifies the base path for your files. `entry` is used to specify bundles and `src/index.js` is our entry point. Webpack will output the bundel `app.js` to the folder `dist`, that webpack will create at runtime.
+
 4. Webpack loads everything like a module. [loaders](https://webpack.js.org/concepts/#loaders) are used to load CSS and other asset files. Install the [style-loader](https://webpack.js.org/loaders/style-loader/#src/components/Sidebar/Sidebar.jsx), [css-loader](https://webpack.js.org/loaders/css-loader/), and [url-loader](https://webpack.js.org/loaders/url-loader/) using `npm install --save-dev style-loader css-loader url-loader`. Feel free to install any other loaders you may need in the future. Loaders can be installed at any point during this process.
 5. Update `webpack.config.js` by adding two `module.rules`. The first rule should support CSS files and the second rule should support other static files. For each rule, define `test` for the types of files to load and `use` to specify the list of loaders. `webpack.config.js` should look something like this.
-    ```js
-    const path = require('path');
-    const webpack = require('webpack');
-    module.exports = {
-        context: __dirname,
-        entry: {
-            app: './src/index.js'
-        },
-        output: {
-            filename: 'app.js',
-            path: path.resolve(__dirname, 'dist'),
-        },
-        module: {
-            rules: [{
-                test: /\.css$/,
-                use: [ 'style-loader', 'css-loader' ]
-            }, {
-                test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
-                use: [ 'url-loader' ]
-            }]
-        }
-    };
-    ```
+   ```js
+   const path = require("path");
+   const webpack = require("webpack");
+   module.exports = {
+     context: __dirname,
+     entry: {
+       app: "./src/index.js",
+     },
+     output: {
+       filename: "app.js",
+       path: path.resolve(__dirname, "dist"),
+     },
+     module: {
+       rules: [
+         {
+           test: /\.css$/,
+           use: ["style-loader", "css-loader"],
+         },
+         {
+           test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
+           use: ["url-loader"],
+         },
+       ],
+     },
+   };
+   ```
 6. To define `index.html` and inject our bundle into that page you will be using a webpack [plugin](https://webpack.js.org/concepts/#plugins) called [html-webpack-plugin](https://webpack.js.org/concepts/#plugins). Use the command `npm install --save-dev html-webpack-plugin` to install the necessary plugin.
 7. Require html-webpack-plugin in `webpack.config.js` by adding it to the `plugins` section. Next, pass `src/index.html` as our `template`. Finally, specify the mode option for webpack by adding `mode: 'development'` to `webpack.config.js`.`webpack.config.js` should now look something like
-    ```js
-    const path = require('path');
-    const webpack = require('webpack');
-    const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-    module.exports = {
-        context: __dirname,
-        entry: {
-            app: './src/index.js'
-        },
-        output: {
-            filename: 'app.js',
-            path: path.resolve(__dirname, 'dist'),
-        },
-        module: {
-            rules: [{
-                test: /\.css$/,
-                use: [ 'style-loader', 'css-loader' ]
-            }, {
-                test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
-                use: [ 'url-loader' ]
-            }]
-        },
-        plugins: [
-            new HtmlWebpackPlugin({
-                template: 'src/index.html'
-            })
-        ],
-        mode: 'development'
-    };
-    ```
+
+   ```js
+   const path = require("path");
+   const webpack = require("webpack");
+   const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+   module.exports = {
+     context: __dirname,
+     entry: {
+       app: "./src/index.js",
+     },
+     output: {
+       filename: "app.js",
+       path: path.resolve(__dirname, "dist"),
+     },
+     module: {
+       rules: [
+         {
+           test: /\.css$/,
+           use: ["style-loader", "css-loader"],
+         },
+         {
+           test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
+           use: ["url-loader"],
+         },
+       ],
+     },
+     plugins: [
+       new HtmlWebpackPlugin({
+         template: "src/index.html",
+       }),
+     ],
+     mode: "development",
+   };
+   ```
 
 ## Bundle the App
 
 1. In `package.json`, define the scripts that we can call with `npm`. Add the `build` command.
-    ```json
-    "scripts": {
-        "build": "node_modules/.bin/webpack --config webpack.config.js"
-    }
-    ```
-    If done correctly, `package.json` should look something like this.  
-    ```json
-    {
-    "name": "cesiumjs-webpack-tutorial",
-    "version": "1.0.0",
-    "description": "",
-    "main": "index.js",
-    "scripts": {
-        "build": "node_modules/.bin/webpack --config webpack.config.js"
-    },
-    "author": "",
-    "license": "ISC",
-    "devDependencies": {
-        "css-loader": "^6.2.0",
-        "html-webpack-plugin": "^5.3.2",
-        "style-loader": "^3.2.1",
-        "url-loader": "^4.1.1",
-        "webpack": "^5.50.0"
-    }
-    }
-    ```
+   ```json
+   "scripts": {
+       "build": "node_modules/.bin/webpack --config webpack.config.js"
+   }
+   ```
+   If done correctly, `package.json` should look something like this.
+   ```json
+   {
+     "name": "cesiumjs-webpack-tutorial",
+     "version": "1.0.0",
+     "description": "",
+     "main": "index.js",
+     "scripts": {
+       "build": "node_modules/.bin/webpack --config webpack.config.js"
+     },
+     "author": "",
+     "license": "ISC",
+     "devDependencies": {
+       "css-loader": "^6.2.0",
+       "html-webpack-plugin": "^5.3.2",
+       "style-loader": "^3.2.1",
+       "url-loader": "^4.1.1",
+       "webpack": "^5.50.0"
+     }
+   }
+   ```
 
 Please note that details of this json file will vary based on your selections in [step 3](#initialize-an-app-with-npm) of **Initialize an App with npm**.
 
 2. Run the command `npm run build`. Install CLI for webpack if necessary. Webpack CLI can be installed using the command `npm install --save-dev webpack-cli`.
 
 3. Ensure that there are no errors and your output looks similar to
-    ```
-    $ npm run build
 
-    > cesiumjs-webpack-tutorial@1.0.0 build
-    > node_modules/.bin/webpack --config webpack.config.js
+   ```
+   $ npm run build
+
+      > cesiumjs-webpack-tutorial@1.0.0 build
+      > node_modules/.bin/webpack --config webpack.config.js
+
+      asset app.js 1.22 KiB [emitted] (name: app)
+      asset index.html 376 bytes [emitted]
+      ./src/index.js 28 bytes [built] [code generated]
+      webpack 5.50.0 compiled successfully in 86 ms
+
+   ```
 
-    asset app.js 1.22 KiB [emitted] (name: app)
-    asset index.html 376 bytes [emitted]
-    ./src/index.js 28 bytes [built] [code generated]
-    webpack 5.50.0 compiled successfully in 86 ms
-    ```
 Please verify that the `app.js` bundle and `index.html` file are added to the `dist` folder.
 
 ## Run the Development Server
 
 1. You will be using a [webpack-dev-server](https://webpack.js.org/configuration/dev-server/) to serve a development build and see our application in action. Run `npm install --save-dev webpack-dev-server`.
 2. Add a `start` script to `package.json`. This script should run the development server. Be sure to set the config file via the `--config` flag and use the `--open` flag to open the application in a a browser upon execution of the command. `package.json` should look something like
-    ```json
-    {
-    "name": "cesiumjs-webpack-tutorial",
-    "version": "1.0.0",
-    "description": "",
-    "main": "index.js",
-    "scripts": {
-        "build": "node_modules/.bin/webpack --config webpack.config.js",
-        "start": "node_modules/.bin/webpack serve --config webpack.config.js --open"
-    },
-    "author": "",
-    "license": "ISC",
-    "devDependencies": {
-        "css-loader": "^6.2.0",
-        "html-webpack-plugin": "^5.3.2",
-        "style-loader": "^3.2.1",
-        "url-loader": "^4.1.1",
-        "webpack": "^5.50.0",
-        "webpack-cli": "^4.7.2",
-        "webpack-dev-server": "^3.11.2"
-    }
-    }
-    ```
+   ```json
+   {
+     "name": "cesiumjs-webpack-tutorial",
+     "version": "1.0.0",
+     "description": "",
+     "main": "index.js",
+     "scripts": {
+       "build": "node_modules/.bin/webpack --config webpack.config.js",
+       "start": "node_modules/.bin/webpack serve --config webpack.config.js --open"
+     },
+     "author": "",
+     "license": "ISC",
+     "devDependencies": {
+       "css-loader": "^6.2.0",
+       "html-webpack-plugin": "^5.3.2",
+       "style-loader": "^3.2.1",
+       "url-loader": "^4.1.1",
+       "webpack": "^5.50.0",
+       "webpack-cli": "^4.7.2",
+       "webpack-dev-server": "^3.11.2"
+     }
+   }
+   ```
 3. Run `npm start` and open http://localhost:8080/ in a web browser.
 4. Verify that you see Hello World!
 
-    ![Overview of South San Francisco](./screenshots/helloworld.png)
+   ![Overview of South San Francisco](./screenshots/helloworld.png)
 
 ## Add CesiumJS to a Webpack App
 
@@ -218,158 +235,176 @@ First, define where CesiumJS is. This tutorial uses the source code, so webpack
 
 1. Install the [Cesium](https://www.npmjs.com/package/cesium) module from npm using the command `npm install --save-dev cesium`.
 2. Update `sourcePrefix` to tell CesiumJS that the version of AMD webpack uses to evaluate `require` statements is not compliant with the standard `toUrl` function. In addition, add a `cesium` alias so we can reference it in our app code. After adding these changes, `webpack.config.js` should look like
-    ```js
-    // The path to the CesiumJS source code
-    const cesiumSource = 'node_modules/cesium/Source';
-    const cesiumWorkers = '../Build/Cesium/Workers';
-    const path = require('path');
-    const webpack = require('webpack');
-    const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-    module.exports = {
-        context: __dirname,
-        entry: {
-            app: './src/index.js'
-        },
-        output: {
-            filename: 'app.js',
-            path: path.resolve(__dirname, 'dist'),
-            // Needed to compile multiline strings in Cesium
-            sourcePrefix: ''
-        },
-        amd: {
-            // Enable webpack-friendly use of require in Cesium
-            toUrlUndefined: true
-        },
-        resolve: {
-            alias: {
-                cesium: path.resolve(__dirname, cesiumSource)
-            },
-            mainFiles: ['module', 'main', 'Cesium']
-        },
-        module: {
-            rules: [{
-                test: /\.css$/,
-                use: [ 'style-loader', 'css-loader' ]
-            }, {
-                test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
-                use: [ 'url-loader' ]
-            }]
-        },
-        plugins: [
-            new HtmlWebpackPlugin({
-                template: 'src/index.html'
-            })
-        ],
-        mode: 'development',
-    };
-    ```
+
+   ```js
+   // The path to the CesiumJS source code
+   const cesiumSource = "node_modules/cesium/Source";
+   const cesiumWorkers = "../Build/Cesium/Workers";
+   const path = require("path");
+   const webpack = require("webpack");
+   const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+   module.exports = {
+     context: __dirname,
+     entry: {
+       app: "./src/index.js",
+     },
+     output: {
+       filename: "app.js",
+       path: path.resolve(__dirname, "dist"),
+       // Needed to compile multiline strings in Cesium
+       sourcePrefix: "",
+     },
+     amd: {
+       // Enable webpack-friendly use of require in Cesium
+       toUrlUndefined: true,
+     },
+     resolve: {
+       alias: {
+         cesium: path.resolve(__dirname, cesiumSource),
+       },
+       mainFiles: ["module", "main", "Cesium"],
+     },
+     module: {
+       rules: [
+         {
+           test: /\.css$/,
+           use: ["style-loader", "css-loader"],
+         },
+         {
+           test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
+           use: ["url-loader"],
+         },
+       ],
+     },
+     plugins: [
+       new HtmlWebpackPlugin({
+         template: "src/index.html",
+       }),
+     ],
+     mode: "development",
+   };
+   ```
 
 ## Manage CesiumJS Static Files
 
 1. Now, you must make sure the static CesiumJS asset, widget, and web worker files are served and loaded correctly. Use `copy-webpack-plugin` to copy static files to the `dist` directory as part of the build process. To do this run the command `npm install --save-dev copy-webpack-plugin` and updated the plugins array in `webpack.config.js`. `webpack.config.js` should now look like
-    ```js
-    // The path to the CesiumJS source code
-    const cesiumSource = 'node_modules/cesium/Source';
-    const cesiumWorkers = '../Build/Cesium/Workers';
-    const CopyWebpackPlugin = require('copy-webpack-plugin');
-    const path = require('path');
-    const webpack = require('webpack');
-    const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-    module.exports = {
-        context: __dirname,
-        entry: {
-            app: './src/index.js'
-        },
-        output: {
-            filename: 'app.js',
-            path: path.resolve(__dirname, 'dist'),
-            sourcePrefix: ''
-        },
-        amd: {
-            // Enable webpack-friendly use of require in Cesium
-            toUrlUndefined: true
-        },
-        resolve: {
-            alias: {
-                cesium: path.resolve(__dirname, cesiumSource)
-            },
-            mainFiles: ['module', 'main', 'Cesium']
-        },
-        module: {
-            rules: [{
-                test: /\.css$/,
-                use: [ 'style-loader', 'css-loader' ]
-            }, {
-                test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
-                use: [ 'url-loader' ]
-            }]
-        },
-        plugins: [
-            new HtmlWebpackPlugin({
-                template: 'src/index.html'
-            }),
-            // Copy Cesium Assets, Widgets, and Workers to a static directory
-            new CopyWebpackPlugin({ 
-                patterns: [
-                    { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
-                    { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
-                    { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }
-                ]
-            }),
-            new webpack.DefinePlugin({
-                // Define relative base path in cesium for loading assets
-                CESIUM_BASE_URL: JSON.stringify('')
-            })
-        ],
-        mode: 'development',
-    };
-    ```
-
-## Incorporate CesiumJS Into Your Application 
+
+   ```js
+   // The path to the CesiumJS source code
+   const cesiumSource = "node_modules/cesium/Source";
+   const cesiumWorkers = "../Build/Cesium/Workers";
+   const CopyWebpackPlugin = require("copy-webpack-plugin");
+   const path = require("path");
+   const webpack = require("webpack");
+   const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+   module.exports = {
+     context: __dirname,
+     entry: {
+       app: "./src/index.js",
+     },
+     output: {
+       filename: "app.js",
+       path: path.resolve(__dirname, "dist"),
+       sourcePrefix: "",
+     },
+     amd: {
+       // Enable webpack-friendly use of require in Cesium
+       toUrlUndefined: true,
+     },
+     resolve: {
+       alias: {
+         cesium: path.resolve(__dirname, cesiumSource),
+       },
+       mainFiles: ["module", "main", "Cesium"],
+     },
+     module: {
+       rules: [
+         {
+           test: /\.css$/,
+           use: ["style-loader", "css-loader"],
+         },
+         {
+           test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
+           use: ["url-loader"],
+         },
+       ],
+     },
+     plugins: [
+       new HtmlWebpackPlugin({
+         template: "src/index.html",
+       }),
+       // Copy Cesium Assets, Widgets, and Workers to a static directory
+       new CopyWebpackPlugin({
+         patterns: [
+           { from: path.join(cesiumSource, cesiumWorkers), to: "Workers" },
+           { from: path.join(cesiumSource, "Assets"), to: "Assets" },
+           { from: path.join(cesiumSource, "Widgets"), to: "Widgets" },
+         ],
+       }),
+       new webpack.DefinePlugin({
+         // Define relative base path in cesium for loading assets
+         CESIUM_BASE_URL: JSON.stringify(""),
+       }),
+     ],
+     mode: "development",
+   };
+   ```
+
+## Incorporate CesiumJS Into Your Application
 
 1. Updated `index.js` with CesiumJS starter code:
 
-    ```js
-    import { Ion, Viewer, createWorldTerrain, createOsmBuildings, Cartesian3, Math } from "cesium";
-    import "cesium/Widgets/widgets.css";
-    import "../src/css/main.css"
-
-    // Your access token can be found at: https://cesium.com/ion/tokens.
-    // This is the default access token
-    Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYWE1OWUxNy1mMWZiLTQzYjYtYTQ0OS1kMWFjYmFkNjc5YzciLCJpZCI6NTc3MzMsImlhdCI6MTYyNzg0NTE4Mn0.XcKpgANiY19MC4bdFUXMVEBToBmqS8kuYpUlxJHYZxk';
-
-    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
-    const viewer = new Viewer('cesiumContainer', {
-    terrainProvider: createWorldTerrain()
-    });
-
-    // Add Cesium OSM Buildings, a global 3D buildings layer.
-    viewer.scene.primitives.add(createOsmBuildings());   
-
-    // Fly the camera to San Francisco at the given longitude, latitude, and height.
-    viewer.camera.flyTo({
-    destination : Cartesian3.fromDegrees(-122.4175, 37.655, 400),
-    orientation : {
-        heading : Math.toRadians(0.0),
-        pitch : Math.toRadians(-15.0),
-    }
-    });
-    ```
-    This code initializes the Cesium Viewer, adds Cesium OSM Buildings to the terrain, and moves the `Camera` to San Francisco. 
+   ```js
+   import {
+     Ion,
+     Viewer,
+     createWorldTerrain,
+     createOsmBuildings,
+     Cartesian3,
+     Math,
+   } from "cesium";
+   import "cesium/Widgets/widgets.css";
+   import "../src/css/main.css";
+
+   // Your access token can be found at: https://cesium.com/ion/tokens.
+   // This is the default access token
+   Ion.defaultAccessToken =
+     "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYWE1OWUxNy1mMWZiLTQzYjYtYTQ0OS1kMWFjYmFkNjc5YzciLCJpZCI6NTc3MzMsImlhdCI6MTYyNzg0NTE4Mn0.XcKpgANiY19MC4bdFUXMVEBToBmqS8kuYpUlxJHYZxk";
+
+   // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
+   const viewer = new Viewer("cesiumContainer", {
+     terrainProvider: createWorldTerrain(),
+   });
+
+   // Add Cesium OSM Buildings, a global 3D buildings layer.
+   viewer.scene.primitives.add(createOsmBuildings());
+
+   // Fly the camera to San Francisco at the given longitude, latitude, and height.
+   viewer.camera.flyTo({
+     destination: Cartesian3.fromDegrees(-122.4175, 37.655, 400),
+     orientation: {
+       heading: Math.toRadians(0.0),
+       pitch: Math.toRadians(-15.0),
+     },
+   });
+   ```
+
+   This code initializes the Cesium Viewer, adds Cesium OSM Buildings to the terrain, and moves the `Camera` to San Francisco.
+
 2. Update `index.html` with the CesiumContainer
-    ```html
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-    <meta charset="utf-8">
-    </head>
-    <body>
-    <div id="cesiumContainer"></div>
-    </body>
-    </html>
-    ```
+   ```html
+   <!doctype html>
+   <html lang="en">
+     <head>
+       <meta charset="utf-8" />
+     </head>
+     <body>
+       <div id="cesiumContainer"></div>
+     </body>
+   </html>
+   ```
 3. Run the command `npm run build`. Ensure that the project is built correctly.
 4. Run `npm start` and open http://localhost:8080/ in a web browser to see the CesiumJS viewer.
 
@@ -385,13 +420,13 @@ Webpack can be leveraged in many more ways to increase performance, decrease you
 
 Source maps allow webpack to trace errors back to the original content. They offer more or less detailed debugging information in exchange for compiling speed. We recommend setting `devtool` to the 'eval' option in `webpack.config.js`
 
-``` devtool: 'eval' ```
+`devtool: 'eval'`
 
 Please note that source maps are not recommended for production code.
 
 ## Additional Resources
 
-The official cesium-webpack-example  repo contains the minimal webpack configuration, the hello world code covered in this tutorial, and instructions for optional code configurations.
+The official cesium-webpack-example repo contains the minimal webpack configuration, the hello world code covered in this tutorial, and instructions for optional code configurations.
 
 Learn CesiumJS with our [CesiumJS tutorial](https://cesium.com/learn/cesiumjs-learn/) and explore [Sandcastle](https://sandcastle.cesium.com/) demos to see CesiumJS in action.
 
diff --git a/package.json b/package.json
index 48ab5605..848cb53d 100644
--- a/package.json
+++ b/package.json
@@ -21,13 +21,21 @@
   "main": "index.js",
   "scripts": {
     "build": "webpack --config webpack.config.js",
-    "start": "webpack serve --config webpack.config.js --open"
+    "start": "webpack serve --config webpack.config.js --open",
+    "eslint": "eslint \"./**/*.js\" \"./**/*.html\" --cache --quiet",
+    "prettier": "prettier --write --no-config \"**/*\"",
+    "prettier-check": "prettier --check --no-config \"**/*\""
   },
   "devDependencies": {
     "cesium": "^1.97.0",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^6.2.0",
+    "eslint": "^8.56.0",
+    "eslint-config-cesium": "^10.0.2",
+    "eslint-plugin-es": "^4.1.0",
+    "eslint-plugin-html": "^7.1.0",
     "html-webpack-plugin": "^5.3.2",
+    "prettier": "^3.1.1",
     "style-loader": "^3.2.1",
     "url-loader": "^4.1.1",
     "webpack": "^5.51.1",
diff --git a/src/css/main.css b/src/css/main.css
index dc4f2e12..f9433f96 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1,7 +1,9 @@
-html, body, #cesiumContainer {
-	width: 100%;
-	height: 100%;
-	margin: 0;
-	padding: 0;
-	overflow: hidden;
-}
\ No newline at end of file
+html,
+body,
+#cesiumContainer {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
diff --git a/src/index.html b/src/index.html
index 99ad7ab0..1f4d96c5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-</head>
-<body>
-  <div id="cesiumContainer"></div>
-</body>
-</html>
\ No newline at end of file
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div id="cesiumContainer"></div>
+  </body>
+</html>
diff --git a/src/index.js b/src/index.js
index 412d4388..6936f0e1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,24 +1,32 @@
-import { Ion, Viewer, createWorldTerrain, createOsmBuildings, Cartesian3, Math } from "cesium";
+import {
+  Ion,
+  Viewer,
+  createWorldTerrain,
+  createOsmBuildings,
+  Cartesian3,
+  Math,
+} from "cesium";
 import "cesium/Build/Cesium/Widgets/widgets.css";
-import "../src/css/main.css"
+import "../src/css/main.css";
 
 // Your access token can be found at: https://cesium.com/ion/tokens.
 // This is the default access token
-Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYWE1OWUxNy1mMWZiLTQzYjYtYTQ0OS1kMWFjYmFkNjc5YzciLCJpZCI6NTc3MzMsImlhdCI6MTYyNzg0NTE4Mn0.XcKpgANiY19MC4bdFUXMVEBToBmqS8kuYpUlxJHYZxk';
+Ion.defaultAccessToken =
+  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYWE1OWUxNy1mMWZiLTQzYjYtYTQ0OS1kMWFjYmFkNjc5YzciLCJpZCI6NTc3MzMsImlhdCI6MTYyNzg0NTE4Mn0.XcKpgANiY19MC4bdFUXMVEBToBmqS8kuYpUlxJHYZxk";
 
 // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
-const viewer = new Viewer('cesiumContainer', {
-  terrainProvider: createWorldTerrain()
+const viewer = new Viewer("cesiumContainer", {
+  terrainProvider: createWorldTerrain(),
 });
 
 // Add Cesium OSM Buildings, a global 3D buildings layer.
-viewer.scene.primitives.add(createOsmBuildings());   
+viewer.scene.primitives.add(createOsmBuildings());
 
 // Fly the camera to San Francisco at the given longitude, latitude, and height.
 viewer.camera.flyTo({
-  destination : Cartesian3.fromDegrees(-122.4175, 37.655, 400),
-  orientation : {
-    heading : Math.toRadians(0.0),
-    pitch : Math.toRadians(-15.0),
-  }
-});
\ No newline at end of file
+  destination: Cartesian3.fromDegrees(-122.4175, 37.655, 400),
+  orientation: {
+    heading: Math.toRadians(0.0),
+    pitch: Math.toRadians(-15.0),
+  },
+});
diff --git a/webpack.config.js b/webpack.config.js
index 05479a92..0b134178 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,52 +1,55 @@
 // The path to the CesiumJS source code
-const cesiumSource = 'node_modules/cesium/Source';
-const cesiumWorkers = '../Build/Cesium/Workers';
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const path = require('path');
-const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+const cesiumSource = "node_modules/cesium/Source";
+const cesiumWorkers = "../Build/Cesium/Workers";
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const path = require("path");
+const webpack = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = {
-    context: __dirname,
-    entry: {
-        app: './src/index.js'
-    },
-    output: {
-        filename: 'app.js',
-        path: path.resolve(__dirname, 'dist'),
-        sourcePrefix: ''
-    },
-    resolve: {
-        fallback: { "https": false, "zlib": false, "http": false, "url": false },
-        mainFiles: ['index', 'Cesium']
-    },
-    module: {
-        rules: [{
-            test: /\.css$/,
-            use: [ 'style-loader', 'css-loader' ]
-        }, {
-            test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
-            use: [ 'url-loader' ]
-        }]
-    },
-    plugins: [
-        new HtmlWebpackPlugin({
-            template: 'src/index.html'
-        }),
-        // Copy Cesium Assets, Widgets, and Workers to a static directory
-        new CopyWebpackPlugin({
-            patterns: [
-                { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
-                { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
-                { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
-		{ from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' }
-            ]
-        }),
-        new webpack.DefinePlugin({
-            // Define relative base path in cesium for loading assets
-            CESIUM_BASE_URL: JSON.stringify('')
-        })
+  context: __dirname,
+  entry: {
+    app: "./src/index.js",
+  },
+  output: {
+    filename: "app.js",
+    path: path.resolve(__dirname, "dist"),
+    sourcePrefix: "",
+  },
+  resolve: {
+    fallback: { https: false, zlib: false, http: false, url: false },
+    mainFiles: ["index", "Cesium"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
+        use: ["url-loader"],
+      },
     ],
-    mode: 'development',
-    devtool: 'eval',
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: "src/index.html",
+    }),
+    // Copy Cesium Assets, Widgets, and Workers to a static directory
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: path.join(cesiumSource, cesiumWorkers), to: "Workers" },
+        { from: path.join(cesiumSource, "Assets"), to: "Assets" },
+        { from: path.join(cesiumSource, "Widgets"), to: "Widgets" },
+        { from: path.join(cesiumSource, "ThirdParty"), to: "ThirdParty" },
+      ],
+    }),
+    new webpack.DefinePlugin({
+      // Define relative base path in cesium for loading assets
+      CESIUM_BASE_URL: JSON.stringify(""),
+    }),
+  ],
+  mode: "development",
+  devtool: "eval",
 };

From 2e566a7e38eaefdfe1741e03dc9a48d67d0047f6 Mon Sep 17 00:00:00 2001
From: Josh <8007967+jjspace@users.noreply.github.com>
Date: Wed, 3 Jan 2024 14:16:56 -0500
Subject: [PATCH 2/4] pre-commit lint checks

---
 .husky/pre-commit | 4 ++++
 package.json      | 7 +++++++
 2 files changed, 11 insertions(+)
 create mode 100755 .husky/pre-commit

diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 00000000..c37466e2
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
\ No newline at end of file
diff --git a/package.json b/package.json
index 848cb53d..3afe06fe 100644
--- a/package.json
+++ b/package.json
@@ -35,11 +35,18 @@
     "eslint-plugin-es": "^4.1.0",
     "eslint-plugin-html": "^7.1.0",
     "html-webpack-plugin": "^5.3.2",
+    "husky": "^8.0.3",
     "prettier": "^3.1.1",
     "style-loader": "^3.2.1",
     "url-loader": "^4.1.1",
     "webpack": "^5.51.1",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.3.1"
+  },
+  "lint-staged": {
+    "*.{js,cjs,html}": [
+      "eslint --cache --quiet",
+      "prettier --write --no-config"
+    ]
   }
 }

From 4d277aacba1d26d7858cd3e2a7d26a2d84c94d07 Mon Sep 17 00:00:00 2001
From: Josh <8007967+jjspace@users.noreply.github.com>
Date: Wed, 3 Jan 2024 15:44:02 -0500
Subject: [PATCH 3/4] lint webpack config too

---
 .eslintignore     | 1 -
 .eslintrc.json    | 8 +++++++-
 .npmignore        | 1 +
 webpack.config.js | 2 ++
 4 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 .npmignore

diff --git a/.eslintignore b/.eslintignore
index 9a530cb2..06c5e168 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,2 +1 @@
 dist/**
-webpack.config.js
diff --git a/.eslintrc.json b/.eslintrc.json
index 78bf21bc..c6941d84 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -4,5 +4,11 @@
   "plugins": ["html", "es"],
   "rules": {
     "no-unused-vars": ["error", { "vars": "all", "args": "none" }]
-  }
+  },
+  "overrides": [
+    {
+      "files": ["webpack.config.js"],
+      "extends": ["cesium/node"]
+    }
+  ]
 }
diff --git a/.npmignore b/.npmignore
new file mode 100644
index 00000000..f84c843d
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1 @@
+webpack.config.js
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 0b134178..05555e9e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,3 +1,5 @@
+"use strict";
+
 // The path to the CesiumJS source code
 const cesiumSource = "node_modules/cesium/Source";
 const cesiumWorkers = "../Build/Cesium/Workers";

From 0a1f3d51ae2353d3c7ff7afcd237dfa84b075b86 Mon Sep 17 00:00:00 2001
From: Josh <8007967+jjspace@users.noreply.github.com>
Date: Wed, 3 Jan 2024 16:57:54 -0500
Subject: [PATCH 4/4] split eslint config

---
 .eslintrc.json     | 12 +-----------
 src/.eslintrc.json | 11 +++++++++++
 2 files changed, 12 insertions(+), 11 deletions(-)
 create mode 100644 src/.eslintrc.json

diff --git a/.eslintrc.json b/.eslintrc.json
index c6941d84..94b4f970 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,14 +1,4 @@
 {
   "root": true,
-  "extends": ["cesium/browser"],
-  "plugins": ["html", "es"],
-  "rules": {
-    "no-unused-vars": ["error", { "vars": "all", "args": "none" }]
-  },
-  "overrides": [
-    {
-      "files": ["webpack.config.js"],
-      "extends": ["cesium/node"]
-    }
-  ]
+  "extends": ["cesium/node"]
 }
diff --git a/src/.eslintrc.json b/src/.eslintrc.json
new file mode 100644
index 00000000..e5cb154c
--- /dev/null
+++ b/src/.eslintrc.json
@@ -0,0 +1,11 @@
+{
+  "root": true,
+  "extends": ["cesium/browser"],
+  "plugins": ["html", "es"],
+  "parserOptions": {
+    "ecmaVersion": 2023
+  },
+  "rules": {
+    "no-unused-vars": ["error", { "vars": "all", "args": "none" }]
+  }
+}