Setup prettier (#257)

.github/ISSUE_TEMPLATE/config.yml

@@ -1,9 +1,9 @@
 ---
 blank_issues_enabled: false
 contact_links:
-  - name: Question
-    url: https://stackoverflow.com/questions/tagged/fluid-framework
-    about: Please ask and answer usage questions on Stack Overflow.
-  - name: Issue
-    url: https://github.com/microsoft/FluidFramework/issues
-    about: Please file an issue in the Fluid Framework repo.
+    - name: Question
+      url: https://stackoverflow.com/questions/tagged/fluid-framework
+      about: Please ask and answer usage questions on Stack Overflow.
+    - name: Issue
+      url: https://github.com/microsoft/FluidFramework/issues
+      about: Please file an issue in the Fluid Framework repo.

.github/dependabot.yml

@@ -1,11 +1,11 @@
 version: 2
 updates:
-  # Enable version updates for npm
-  - package-ecosystem: "npm"
-    # Look for `package.json` and `lock` files in the `root` directory
-    directory: "/"
-    schedule:
-      interval: "daily"
-    allow:
-      - dependency-name: "fluid-framework"
-      - dependency-name: "@fluidframework/*"
+    # Enable version updates for npm
+    - package-ecosystem: "npm"
+      # Look for `package.json` and `lock` files in the `root` directory
+      directory: "/"
+      schedule:
+          interval: "daily"
+      allow:
+          - dependency-name: "fluid-framework"
+          - dependency-name: "@fluidframework/*"

.prettierignore

@@ -0,0 +1,8 @@
+# Generated by npm / Lerna
+package-lock.json
+
+# Dependencies
+node_modules
+
+# Build output
+dist

.vscode/settings.json

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

CODE_OF_CONDUCT.md

@@ -4,6 +4,6 @@ This project has adopted the [Microsoft Open Source Code of Conduct](https://ope
 
 Resources:
 
-- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
-- [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)
-- Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns
+-   [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
+-   [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)
+-   Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns

README.md

@@ -14,4 +14,4 @@ After cloning the repository, install dependencies and start the application
 ```bash
 npm install
 npm start
-```
+```

SECURITY.md

@@ -4,7 +4,7 @@
 
 Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
 
-If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)), please report it to us as described below.
+If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](<https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)>), please report it to us as described below.
 
 ## Reporting Security Issues
 
@@ -12,19 +12,19 @@ If you believe you have found a security vulnerability in any Microsoft-owned re
 
 Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report).
 
-If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com).  If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/en-us/msrc/pgp-key-msrc).
+If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/en-us/msrc/pgp-key-msrc).
 
-You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc). 
+You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc).
 
 Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
 
-  * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
-  * Full paths of source file(s) related to the manifestation of the issue
-  * The location of the affected source code (tag/branch/commit or direct URL)
-  * Any special configuration required to reproduce the issue
-  * Step-by-step instructions to reproduce the issue
-  * Proof-of-concept or exploit code (if possible)
-  * Impact of the issue, including how an attacker might exploit the issue
+-   Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
+-   Full paths of source file(s) related to the manifestation of the issue
+-   The location of the affected source code (tag/branch/commit or direct URL)
+-   Any special configuration required to reproduce the issue
+-   Step-by-step instructions to reproduce the issue
+-   Proof-of-concept or exploit code (if possible)
+-   Impact of the issue, including how an attacker might exploit the issue
 
 This information will help us triage your report more quickly.
 
@@ -38,4 +38,4 @@ We prefer all communications to be in English.
 
 Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/en-us/msrc/cvd).
 
-<!-- END MICROSOFT SECURITY.MD BLOCK -->
+<!-- END MICROSOFT SECURITY.MD BLOCK -->

azure-pipelines.yml

@@ -4,28 +4,33 @@
 # FluidHelloWorld build for CI
 
 pr:
-- main
-- main-azure
+    - main
+    - main-azure
 
-pool: 'Small'
+pool: "Small"
 
 steps:
-- task: ComponentGovernanceComponentDetection@0
-  inputs:
-    scanType: 'Register'
-    verbosity: 'Verbose'
-    alertWarningLevel: 'High'
-- task: UseNode@1
-  displayName: Use Node 12.x
-  inputs: 
-    version: 12.x
-- task: Npm@1
-  displayName: Install
-  inputs:
-    command: 'custom'
-    customCommand: 'install'
-- task: Npm@1
-  displayName: Build
-  inputs:
-    command: 'custom'
-    customCommand: 'run build'
+    - task: ComponentGovernanceComponentDetection@0
+      inputs:
+          scanType: "Register"
+          verbosity: "Verbose"
+          alertWarningLevel: "High"
+    - task: UseNode@1
+      displayName: Use Node 12.x
+      inputs:
+          version: 12.x
+    - task: Npm@1
+      displayName: Install
+      inputs:
+          command: "custom"
+          customCommand: "install"
+    - task: Npm@1
+      displayName: Build
+      inputs:
+          command: "custom"
+          customCommand: "run build"
+    - task: Npm@1
+      displayName: Lint
+      inputs:
+          command: "custom"
+          customCommand: "run lint"

package.json

@@ -1,35 +1,35 @@
 {
-    "name": "@fluid-example/hello-world",
-    "version": "0.1.0",
-    "description": "Minimal Fluid Container & Data Object sample to implement a collaborative dice roller as a standalone app.",
-    "repository": "microsoft/FluidHelloWorld",
-    "license": "MIT",
-    "author": "Microsoft",
-    "scripts": {
-        "build": "webpack --env prod --env clean",
-        "build:dev": "webpack --env clean",
-        "start": "start-server-and-test start:server 7070 start:client",
-        "start:client": "webpack serve",
-        "start:server": "npx tinylicious@latest"
-    },
-    "dependencies": {
-        "@fluidframework/tinylicious-client": "^1.2.5",
-        "fluid-framework": "^1.2.5"
-    },
-    "devDependencies": {
-        "clean-webpack-plugin": "^3.0.0",
-        "concurrently": "^5.3.0",
-        "html-webpack-plugin": "^4.3.0",
-        "start-server-and-test": "^1.11.6",
-        "webpack": "^4.46.0",
-        "webpack-cli": "^4.8.0",
-        "webpack-dev-server": "^3.11.0"
-    },
-    "prettier": {
-        "trailingComma": "es5",
-        "tabWidth": 4,
-        "semi": true,
-        "singleQuote": false,
-        "printWidth": 100
-    }
+  "name": "@fluid-example/hello-world",
+  "version": "0.1.0",
+  "description": "Minimal Fluid Container & Data Object sample to implement a collaborative dice roller as a standalone app.",
+  "repository": "microsoft/FluidHelloWorld",
+  "license": "MIT",
+  "author": "Microsoft",
+  "scripts": {
+    "build": "webpack --env prod --env clean",
+    "build:dev": "webpack --env clean",
+    "start": "start-server-and-test start:server 7070 start:client",
+    "start:client": "webpack serve",
+    "start:server": "npx tinylicious@latest",
+    "format": "npm run prettier:fix",
+    "lint": "npm run prettier",
+    "lint:fix": "npm run prettier:fix",
+    "prettier": "prettier --check . --ignore-path ./.prettierignore",
+    "prettier:fix": "prettier --write . --ignore-path ./.prettierignore"
+  },
+  "dependencies": {
+    "@fluidframework/tinylicious-client": "^1.2.5",
+    "fluid-framework": "^1.2.5"
+  },
+  "devDependencies": {
+    "@fluidframework/build-common": "^1.0.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "concurrently": "^5.3.0",
+    "html-webpack-plugin": "^4.3.0",
+    "prettier": "^2.7.1",
+    "start-server-and-test": "^1.11.6",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^3.11.0"
+  }
 }

prettier.config.cjs

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+module.exports = {
+    ...require("@fluidframework/build-common/prettier.config.cjs"),
+};

src/app.js

@@ -7,13 +7,13 @@ import { SharedMap } from "fluid-framework";
 import { TinyliciousClient } from "@fluidframework/tinylicious-client";
 
 export const diceValueKey = "dice-value-key";
-
 // Load container and render the app
 
 const client = new TinyliciousClient();
 const containerSchema = {
-    initialObjects: { diceMap: SharedMap }
+    initialObjects: { diceMap: SharedMap },
 };
+
 const root = document.getElementById("content");
 
 const createNewDice = async () => {
@@ -22,16 +22,16 @@ const createNewDice = async () => {
     const id = await container.attach();
     renderDiceRoller(container.initialObjects.diceMap, root);
     return id;
-}
+};
 
 const loadExistingDice = async (id) => {
     const { container } = await client.getContainer(id, containerSchema);
     renderDiceRoller(container.initialObjects.diceMap, root);
-}
+};
 
 async function start() {
     if (location.hash) {
-        await loadExistingDice(location.hash.substring(1))
+        await loadExistingDice(location.hash.substring(1));
     } else {
         const id = await createNewDice();
         location.hash = id;
@@ -40,9 +40,7 @@ async function start() {
 
 start().catch((error) => console.error(error));
 
-
 // Define the view
-
 const template = document.createElement("template");
 
 template.innerHTML = `
@@ -55,7 +53,7 @@ template.innerHTML = `
     <div class="dice"></div>
     <button class="roll"> Roll </button>
   </div>
-`
+`;
 
 const renderDiceRoller = (diceMap, elem) => {
     elem.appendChild(template.content.cloneNode(true));
@@ -77,4 +75,4 @@ const renderDiceRoller = (diceMap, elem) => {
 
     // Use the changed event to trigger the rerender whenever the value changes.
     diceMap.on("valueChanged", updateDice);
-}
+};

webpack.config.js

@@ -6,15 +6,14 @@
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
-module.exports = env => {
+module.exports = (env) => {
     const htmlTemplate = "./src/index.html";
-    const plugins = env && env.clean
-        ? [new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: htmlTemplate })]
-        : [new HtmlWebpackPlugin({ template: htmlTemplate })];
+    const plugins =
+        env && env.clean
+            ? [new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: htmlTemplate })]
+            : [new HtmlWebpackPlugin({ template: htmlTemplate })];
 
-    const mode = env && env.prod
-        ? "production"
-        : "development";
+    const mode = env && env.prod ? "production" : "development";
 
     return {
         devtool: "inline-source-map",
@@ -27,7 +26,7 @@ module.exports = env => {
         },
         plugins,
         devServer: {
-            open: true
-        }
+            open: true,
+        },
     };
 };