This project is initialized with Ant Design Pro. Follow is the quick guide for how to use.
- We use ESLint, Prettier and Stylelint to keep an uniform code format.
- Line-Seperator is
LF
. Please make sure Git does not automatically transfer toCRLF
on Windows:
git config core.autocrlf false
- Write long, comma seperated key name, instead of multi-level nested key name.
- Arrange content that belongs to the same block together, instead of always add at the buttom.
Good Example:
{
"app.welcome.link.fetch-blocks": "Fetch all blocks",
"app.welcome.link.remove-blocks": "Remove all blocks"
}
Bad Example(Violates #1):
{
"app": {
"welcome": {
"link": {
"fetch-blocks": "Fetch all blocks",
"remove-blocks": "Remove all blocks"
}
}
}
}
Bad Example3(Violates #2):
{
"app.welcome.link.fetch-blocks": "Fetch all blocks",
"app.welcome.other-function.other-wording": "Anything",
//...
"app.welcome.link.remove-locks": "Remove all blocks" // Newly added
}
Recommanded Plugins in .vscode/extensions.json
:
- ESLint: Strict syntex check.
- Prettier: Code Format.
- Sneak Mark: Check non-ascii marks in code.
- Stylelint: CSS Format.
- Docker: Needed if you dev with docker.
Recommanded Settings in .vscode/settings.json
:
- Auto Save: No
- Default Formatter: Prettier
- Format On Paste: Yes
- Format On Save: Yes
- Format On Save Mode: File
npm install -g yarn
yarn
If you're in mainland China, recommand to use tyarn
instead.
- Build Image
docker build -t pp-label-frontend -f Dockerfile.dev .
- Install node_modules
docker run -ti -v ~/gitroot/PP-Label-Frontend:/usr/app pp-label-frontend yarn
- Start APP
docker run -ti -p 8000:8000 -p 3000:3000 -v ~/gitroot/PP-Label-Frontend:/usr/app pp-label-frontend --name pp-label-frontend
- Switch default shell from
dash
tobash
to prevent[
issue in git hooks:
sudo dpkg-reconfigure dash
# Then select `No`
- Manage multiple node environments with ease: NVM.
There're some useful script to help you quick start and build with web project, code style check and test.
Scripts provided in package.json
. It's safe to modify or add additional script:
- Start project
npm start
- Build project
npm run build
- Check code style
npm run lint
You can also use script to auto fix some lint error:
npm run lint:fix
- Test code
npm test
Add docker run -ti pp-label-frontend
in front of above commands.
For example, before:
npm test
After:
docker run -ti pp-label-frontend npm test