chore: Add Code Formatter.

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx pretty-quick --staged

.kktrc.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import webpack, {Configuration} from 'webpack';
+import webpack, { Configuration } from 'webpack';
 import { LoaderConfOptions } from 'kkt';
 import lessModules from '@kkt/less-modules';
 import rawModules from '@kkt/raw-modules';
@@ -11,14 +11,14 @@ export default (conf: Configuration, env: string, options: LoaderConfOptions) =>
   conf = lessModules(conf, env, options);
   conf = scopePluginOptions(conf, env, {
     ...options,
-    allowedFiles: [
-      path.resolve(process.cwd(), 'README.md'),
-    ]
+    allowedFiles: [path.resolve(process.cwd(), 'README.md')],
   });
   // Get the project version.
-  conf.plugins!.push(new webpack.DefinePlugin({
-    VERSION: JSON.stringify(pkg.version),
-  }));
+  conf.plugins!.push(
+    new webpack.DefinePlugin({
+      VERSION: JSON.stringify(pkg.version),
+    }),
+  );
 
   conf.optimization = {
     ...conf.optimization,
@@ -34,10 +34,9 @@ export default (conf: Configuration, env: string, options: LoaderConfOptions) =>
           name: 'prismjs-vendor',
           chunks: 'async',
         },
-      }
-    }
-  }
+      },
+    },
+  };
 
   return conf;
-}
-
+};

.prettierignore

@@ -0,0 +1,13 @@
+**/*.md
+**/*.svg
+**/*.ejs
+**/*.html
+**/*.yml
+package.json
+node_modules
+dist
+build
+coverage
+lib
+esm
+test

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}

package.json

@@ -6,14 +6,16 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "scripts": {
-    "prepare": "npm run build",
+    "prepare": "npm run build && husky install",
     "doc": "kkt build --app-src ./website",
     "start": "kkt start --app-src ./website",
     "css:build": "compile-less -d src -o esm",
     "css:watch": "compile-less -d src -o esm --watch",
     "css:build:dist": "compile-less -d src --combine markdown.css --rm-global",
     "watch": "tsbb watch & npm run css:watch",
     "build": "tsbb build && npm run css:build && npm run css:build:dist",
+    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
+    "pretty-quick": "pretty-quick --staged",
     "test": "tsbb test --env=jsdom",
     "coverage": "tsbb test --env=jsdom --coverage"
   },
@@ -68,11 +70,14 @@
     "@uiw/reset.css": "1.0.5",
     "compile-less-cli": "1.8.9",
     "kkt": "6.11.0",
+    "prettier": "2.4.1",
+    "pretty-quick": "3.1.1",
     "jest": "27.2.5",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
-    "tsbb": "3.4.1"
+    "tsbb": "3.4.1",
+    "husky": "^7.0.0"
   },
   "eslintConfig": {
     "extends": "react-app"

renovate.json

@@ -1,5 +1,3 @@
 {
-  "extends": [
-    "config:base"
-  ]
+  "extends": ["config:base"]
 }

src/styles/markdown.less

@@ -1,14 +1,16 @@
 .wmde-markdown {
   font-size: 16px;
   line-height: 1.5;
-  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji,
+    Segoe UI Emoji;
   > :first-child {
     margin-top: 0 !important;
   }
   > :last-child {
     margin-bottom: 0 !important;
   }
-  code[class*="language-"], pre[class*="language-"] {
+  code[class*='language-'],
+  pre[class*='language-'] {
     color: black;
     text-align: left;
     white-space: pre;
@@ -39,31 +41,40 @@
     background-color: #f6f8fa;
     border-radius: 3px;
   }
-  code, tt {
-    background-color: rgba(27,31,35,.05);
+  code,
+  tt {
+    background-color: rgba(27, 31, 35, 0.05);
     border-radius: 3px;
     font-size: 85%;
     margin: 0;
-    padding: .2em .4em;
+    padding: 0.2em 0.4em;
   }
-  pre, code, tt {
-    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+  pre,
+  code,
+  tt {
+    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
   }
   img {
     max-width: 100%;
   }
   input {
     vertical-align: middle;
-    margin: 0 .2em .25em -1.6em;
+    margin: 0 0.2em 0.25em -1.6em;
     & + p {
       display: inline;
     }
   }
-  h1, h2 {
+  h1,
+  h2 {
     border-bottom: 1px solid #eaecef;
-    padding-bottom: .3em;
+    padding-bottom: 0.3em;
   }
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     font-weight: 600;
     line-height: 1.25;
     margin-bottom: 16px;
@@ -95,12 +106,13 @@
     font-size: 1em;
   }
   h5 {
-    font-size: .875em;
+    font-size: 0.875em;
   }
   h6 {
-    font-size: .85em;
+    font-size: 0.85em;
   }
-  ol, ul {
+  ol,
+  ul {
     padding-left: 2em;
     & > p {
       margin-bottom: 0;
@@ -111,9 +123,10 @@
     margin-top: 0;
     list-style: initial;
   }
-  > blockquote, > blockquote blockquote {
+  > blockquote,
+  > blockquote blockquote {
     margin: 0;
-    border-left: .25em solid #dfe2e5;
+    border-left: 0.25em solid #dfe2e5;
     color: #6a737d;
     padding: 0 1em;
     > :last-child {
@@ -131,7 +144,8 @@
     height: 1px;
   }
 
-  > table, > blockquote table {
+  > table,
+  > blockquote table {
     display: block;
     overflow: auto;
     width: 100%;
@@ -142,12 +156,20 @@
       background-color: #fff;
       border-top: 1px solid #c6cbd1;
     }
-    td, th {
+    td,
+    th {
       border: 1px solid #dfe2e5;
       padding: 6px 13px;
     }
   }
-  blockquote, details, dl, ol, p, pre, table, ul {
+  blockquote,
+  details,
+  dl,
+  ol,
+  p,
+  pre,
+  table,
+  ul {
     margin-bottom: 16px;
     margin-top: 0;
   }
@@ -161,7 +183,7 @@
   }
 
   .namespace {
-    opacity: .7;
+    opacity: 0.7;
   }
   .token.important {
     font-weight: normal;
@@ -187,9 +209,9 @@
     color: #56595d;
     display: inline-block;
     font-size: 10px;
-    font-family: ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace;
+    font-family: ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo, monospace;
     line-height: 10px;
     padding: 2px 4px;
     vertical-align: middle;
   }
-}
+}

src/styles/markdowncolor.less

@@ -1,4 +1,3 @@
-
 .wmde-markdown-color {
   .token.tag .attr-value {
     color: #032f62;
@@ -18,7 +17,7 @@
     color: #a0a0a0;
   }
 }
-.wmde-markdown-color code[class*="language-"] {
+.wmde-markdown-color code[class*='language-'] {
   color: black;
   .token.selector,
   .token.attr-name,
@@ -50,7 +49,7 @@
   .token.prolog,
   .token.doctype,
   .token.cdata {
-    color: #7D8B99;
+    color: #7d8b99;
   }
   .token.punctuation {
     color: #a0a0a0;

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -22,8 +18,5 @@
     "noFallthroughCasesInSwitch": true,
     "noEmit": true
   },
-  "include": [
-    "website",
-    "test"
-  ]
+  "include": ["website", "test"]
 }

website/App.tsx

@@ -21,12 +21,13 @@ const App = () => {
           React Markdown Preview
         </a>
         <p>
-          React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style.
+          React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub
+          Markdown style.
         </p>
       </header>
       <div className="App-editor">
         <button onClick={() => setValue('# Markdown ' + val++)}>set value</button>
-        
+
         <textarea
           placeholder="Please enter the Markdown code!"
           value={value}
@@ -41,10 +42,14 @@ const App = () => {
           <Github.Social type="stars" href="https://github.com/uiwjs/react-markdown-preview/stargazers" />
           <Github.Social type="watchers" href="https://github.com/uiwjs/react-markdown-preview/watchers" />
         </Github>
-        <Npm.Version scope="@uiw" packageName="react-markdown-preview" href="https://www.npmjs.com/package/@uiw/react-markdown-preview" />
+        <Npm.Version
+          scope="@uiw"
+          packageName="react-markdown-preview"
+          href="https://www.npmjs.com/package/@uiw/react-markdown-preview"
+        />
       </div>
     </div>
   );
-}
+};
 
-export default App;
+export default App;

website/index.tsx

@@ -3,4 +3,4 @@ import ReactDOM from 'react-dom';
 import App from './App';
 import '@uiw/reset.css';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'));