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]:backtolife2021/color-code.git
# or git clone https://github.com/backtolife2021/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://localhost:8124/dev.user.js # in archlinux
chrome http://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.
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>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://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-styled-components
- 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