From 18f4883d4f279bb1d8c0c395e6a13a53e4accdcb Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Sat, 9 Oct 2021 15:29:51 +0800 Subject: [PATCH] chore: Add Code Formatter. --- .husky/pre-commit | 4 +++ .kktrc.ts | 23 ++++++------ .prettierignore | 13 +++++++ .prettierrc | 11 ++++++ package.json | 9 +++-- renovate.json | 4 +-- src/styles/markdown.less | 66 +++++++++++++++++++++++------------ src/styles/markdowncolor.less | 5 ++- tsconfig.json | 11 ++---- website/App.tsx | 15 +++++--- website/index.tsx | 2 +- 11 files changed, 106 insertions(+), 57 deletions(-) create mode 100755 .husky/pre-commit create mode 100644 .prettierignore create mode 100644 .prettierrc diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 00000000..35d69187 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +npx pretty-quick --staged diff --git a/.kktrc.ts b/.kktrc.ts index 699c6ede..694fe9cd 100644 --- a/.kktrc.ts +++ b/.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; -} - +}; diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..d6c92aec --- /dev/null +++ b/.prettierignore @@ -0,0 +1,13 @@ +**/*.md +**/*.svg +**/*.ejs +**/*.html +**/*.yml +package.json +node_modules +dist +build +coverage +lib +esm +test \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..764fbde2 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,11 @@ +{ + "singleQuote": true, + "trailingComma": "all", + "printWidth": 120, + "overrides": [ + { + "files": ".prettierrc", + "options": { "parser": "json" } + } + ] +} diff --git a/package.json b/package.json index 35bbbeb3..ab3dd2bc 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "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", @@ -14,6 +14,8 @@ "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" diff --git a/renovate.json b/renovate.json index f45d8f11..4f39080e 100644 --- a/renovate.json +++ b/renovate.json @@ -1,5 +1,3 @@ { - "extends": [ - "config:base" - ] + "extends": ["config:base"] } diff --git a/src/styles/markdown.less b/src/styles/markdown.less index 7c2f4740..5b2fadca 100644 --- a/src/styles/markdown.less +++ b/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; } -} \ No newline at end of file +} diff --git a/src/styles/markdowncolor.less b/src/styles/markdowncolor.less index 10b74430..0a0c42f1 100644 --- a/src/styles/markdowncolor.less +++ b/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; diff --git a/tsconfig.json b/tsconfig.json index 282c181a..8fbc84e7 100644 --- a/tsconfig.json +++ b/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"] } diff --git a/website/App.tsx b/website/App.tsx index dd51972b..4910ec2d 100644 --- a/website/App.tsx +++ b/website/App.tsx @@ -21,12 +21,13 @@ const App = () => { React Markdown Preview

- 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.

- +