prettier · kaicataldo · Oct 29, 2019 · Oct 17, 2019 · Oct 17, 2019 · Oct 17, 2019
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -2,14 +2,11 @@
   "env": {
     "node": true
   },
-  "plugins": ["prettier"],
-  "extends": ["prettier"],
+  "plugins": ["prettier", "react-hooks"],
+  "extends": ["plugin:react/recommended", "prettier"],
   "parserOptions": {
     "ecmaVersion": 2020,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
-    }
+    "sourceType": "module"
   },
   "rules": {
     "curly": "error",
@@ -52,7 +49,9 @@
       }
     ],
     "sort-vars": "error",
-    "strict": ["error", "global"]
+    "strict": ["error", "global"],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
   },
   "overrides": [
     {
@@ -61,5 +60,10 @@
         "browser": true
       }
     }
-  ]
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
 }
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -9,7 +9,8 @@
     "48": "icons/icon48.png",
     "128": "icons/icon128.png"
   },
-  "options_page": "options.html",
+  "options_page": "options/public/index.html",
+  "permissions": ["storage"],
   "content_scripts": [
     {
       "matches": ["https://stackoverflow.com/*", "https://github.com/*"],

diff --git a/extension/options.html b/extension/options.html
diff --git a/extension/options/public/index.html b/extension/options/public/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Prettier Options</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script src="../../dist/options.js"></script>
+  </body>
+</html>
diff --git a/extension/options/src/App.js b/extension/options/src/App.js
@@ -0,0 +1,140 @@
+import React, { useEffect, useState } from "react";
+
+const defaultOptions = {
+  arrowParens: "avoid",
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  printWidth: 80,
+  semi: true,
+  singleQuote: false,
+  tabWidth: 2,
+  trailingComma: "none",
+  useTabs: false
+};
+
+function App() {
+  const [options, setOptions] = useState();
+
+  useEffect(() => {
+    window.chrome.storage.sync.get(defaultOptions, setOptions);
+  }, []);
+
+  useEffect(() => {
+    if (options) {
+      window.chrome.storage.sync.set(options);
+    }
+  }, [options]);
+
+  function handleChange({ target: { checked, name, type, value } }) {
+    setOptions({
+      ...options,
+      [name]:
+        type === "checkbox"
+          ? checked
+          : type === "number"
+          ? parseInt(value)
+          : value
+    });
+  }
+
+  return options ? (
+    <>
+      <h1>
+        <a href="https://prettier.io/docs/en/options.html">Prettier Options</a>
+      </h1>
+      <hr />
+      <label>Print width</label>
+      <input
+        type="number"
+        name="printWidth"
+        value={options.printWidth}
+        onChange={handleChange}
+      />
+      <p>Specify the line length that the printer will wrap on.</p>
+      <hr />
+      <label>Tab width</label>
+      <input
+        type="number"
+        name="tabWidth"
+        value={options.tabWidth}
+        onChange={handleChange}
+      />
+      <p>Specify the number of spaces per indentation-level.</p>
+      <hr />
+      <label>Use tabs</label>
+      <input
+        type="checkbox"
+        name="useTabs"
+        checked={options.useTabs}
+        onChange={handleChange}
+      />
+      <p>Indent lines with tabs instead of spaces.</p>
+      <hr />
+      <label>Semicolons</label>
+      <input
+        type="checkbox"
+        name="semi"
+        checked={options.semi}
+        onChange={handleChange}
+      />
+      <p>Print semicolons at the ends of statements.</p>
+      <hr />
+      <label>Use single quotes</label>
+      <input
+        type="checkbox"
+        name="singleQuote"
+        checked={options.singleQuote}
+        onChange={handleChange}
+      />
+      <p>
+        Use {"'"}single{"'"} quotes instead of {'"'}double{'"'} quotes.
+      </p>
+      <hr />
+      <label>Trailing commas</label>
+      <select
+        name="trailingComma"
+        value={options.trailingComma}
+        onChange={handleChange}
+      >
+        <option>none</option>
+        <option>es5</option>
+        <option>all</option>
+      </select>
+      <p>Print trailing commas wherever possible.</p>
+      <hr />
+      <label>Bracket spacing</label>
+      <input
+        type="checkbox"
+        name="bracketSpacing"
+        checked={options.bracketSpacing}
+        onChange={handleChange}
+      />
+      <p>Print spaces between brackets in object literals.</p>
+      <hr />
+      <label>JSX Brackets</label>
+      <input
+        type="checkbox"
+        name="jsxBracketSameLine"
+        checked={options.jsxBracketSameLine}
+        onChange={handleChange}
+      />
+      <p>
+        Put the `{">"}` of a multi-line JSX element at the end of the last line
+        instead of being alone on the next line.
+      </p>
+      <hr />
+      <label>Arrow Function Parentheses</label>
+      <select
+        name="arrowParens"
+        value={options.arrowParens}
+        onChange={handleChange}
+      >
+        <option>avoid</option>
+        <option>always</option>
+      </select>
+      <p>Include parentheses around a sole arrow function parameter.</p>
+    </>
+  ) : null;
+}
+
+export default App;
diff --git a/extension/options/src/index.css b/extension/options/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
diff --git a/extension/options/src/index.js b/extension/options/src/index.js
@@ -0,0 +1,6 @@
+import "./index.css";
+import App from "./App";
+import React from "react";
+import ReactDOM from "react-dom";
+
+ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/extension/src/content/index.js b/extension/src/content/index.js
@@ -10,7 +10,7 @@ import parserTypescript from "prettier/parser-typescript";
 import parserYaml from "prettier/parser-yaml";
 import prettier from "prettier/standalone";
 
-function init() {
+function init(options) {
   const prettierPlugins = [
     parserAngular,
     parserBabylon,
@@ -136,7 +136,8 @@ function init() {
         event.preventDefault();
         const formattedText = prettier.format(textArea.value, {
           parser: "markdown",
-          plugins: prettierPlugins
+          plugins: prettierPlugins,
+          ...options
         });
         textArea.focus();
         textArea.select();
@@ -390,7 +391,8 @@ function init() {
                 try {
                   formattedSnippet = prettier.format(snippet, {
                     parser: PARSERS_LANG_MAP[lang],
-                    plugins: prettierPlugins
+                    plugins: prettierPlugins,
+                    ...options
                   });
                 } catch {}
 
@@ -418,7 +420,8 @@ function init() {
             try {
               formattedText = prettier.format(codeLines.join("\n"), {
                 parser: PARSERS_LANG_MAP[lang],
-                plugins: prettierPlugins
+                plugins: prettierPlugins,
+                ...options
               });
             } catch {
               return;
@@ -449,7 +452,8 @@ function init() {
 
       inputEl.value = prettier.format(inputEl.value, {
         parser: "markdown",
-        plugins: prettierPlugins
+        plugins: prettierPlugins,
+        ...options
       });
       inputEl.focus();
     });
@@ -482,4 +486,4 @@ function init() {
   }
 }
 
-init();
+chrome.storage.sync.get(init);
diff --git a/package.json b/package.json
@@ -18,15 +18,24 @@
     "zip": "cd extension && jszip-cli add . -i .DS_Store -o ../extension.zip -f"
   },
   "dependencies": {
-    "prettier": "1.18.2"
+    "prettier": "1.18.2",
+    "react": "16.11.0",
+    "react-dom": "16.11.0"
   },
   "devDependencies": {
+    "@babel/core": "7.6.4",
+    "@babel/preset-react": "7.6.3",
     "@ffflorian/jszip-cli": "3.0.2",
+    "babel-loader": "8.0.6",
+    "css-loader": "3.2.0",
     "eslint": "6.5.1",
     "eslint-config-prettier": "6.4.0",
     "eslint-plugin-prettier": "3.1.1",
+    "eslint-plugin-react": "7.16.0",
+    "eslint-plugin-react-hooks": "2.2.0",
     "husky": "3.0.9",
     "lint-staged": "9.4.2",
+    "style-loader": "1.0.0",
     "webpack": "4.41.2",
     "webpack-cli": "3.3.9"
   },

diff --git a/webpack.config.js b/webpack.config.js
@@ -2,8 +2,29 @@ const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin"); // included as a dependency of webpack
 
 module.exports = {
-  entry: "./extension/src/content/index.js",
+  entry: {
+    main: "./extension/src/content/index.js",
+    options: "./extension/options/src/index.js"
+  },
   mode: "production",
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"]
+      },
+      {
+        exclude: /node_modules/,
+        test: /\.js$/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ["@babel/preset-react"]
+          }
+        }
+      }
+    ]
+  },
   optimization: {
     minimize: true,
     minimizer: [
@@ -18,7 +39,6 @@ module.exports = {
     ]
   },
   output: {
-    filename: "main.js",
     path: path.resolve(__dirname, "extension/dist")
   },
   performance: {