• node version >=14.17.6
• tampermonkey have been installed in chrome broswer
• windows os only: windows-build-tools have been installed
• mac os only: Command Line Tools (CLT) for Xcode: xcode-select --install, developer.apple.com/downloads or Xcode 3
• arch linux os only: base-devel have been installed

Clone the repository

git clone [email protected]:I-Want-ToBelieve/color-code.git
# or git clone https://github.com/I-Want-ToBelieve/color-code.git

Switch to the repo folder

cd color-code

Install dependencies (If you are blocked by GFW, please read the QA section)

yarn install

Runs the app in the development mode

yarn start
# or yarn serve
# or yarn dev

Use chrome broswer open the development server link

google-chrome-stable http:https://localhost:8124/dev.user.js # in archlinux
chrome http:https://localhost:8124/dev.user.js # in windows via scoop

how to open the setting page?

the setting page prototype

See the Pen Syntax highlighting Setting Page prototype by doublethink (@FloatingShuYin) on CodePen.

Bundle everything from src/ into dist/bundle.user.js:

yarn build

or

npx rollup --config

yarn serve

This will automatically update dist/bundle.user.js when code changes and serve it on localhost:8124.

It also creates a second userscript dist/dev.user.js, if you install it in Tampermonkey, it will automatically fetch the latest version from http:https://localhost:8124/bundle.user.js once you reload a website with F5.

Bundle for publishing without sourcemapping to dist/release-3.2.1.user.js

yarn build:release

or on Windows

yarn build:release:win32

Note: If you have added these plugins to your editor, you rarely need to manually execute any of the above code specification related commands.

The vscode editor extensions listed below can enhance your development experience, and other editors should have similar plugins.

• eslint
• stylelint
• prettier
• css modules
• vscode-@emotion/styled
• GitLens — Git supercharged
• jest
• dotenv
• npm Dependency Links
• SVG Language Support

There are a lot of link comments in the source code, if you do not understand the code, you might as well click the link in the comments to see!

Q: yarn upgrade does not update package.json

A: ref yarnpkg/yarn#2042

yarn global add npm-check-updates
ncu -u
yarn install --check-files
ncu -u

Q: What to do if the dependencies cannot be downloaded due to network problems

A: ref https://npm.taobao.org/mirrors

First execute the following command to add the mirror, and then use yarn install to download the dependencies

yarn config set registry https://registry.npm.taobao.org -g
yarn config set disturl https://npm.taobao.org/dist -g
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ -g
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g
yarn config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/ -g

if it still does not work, you can try to use yarn --ignore-optional to skip the download of optional dependencies

power by rollup-userscript-template