haoyuying / PP-Label-Frontend

Frontend part for pp-label

Home Page:https://paddlecv-sig.github.io/PP-Label-Frontend/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

PP Label Frontend

This project is initialized with Ant Design Pro. Follow is the quick guide for how to use.

Environment Prepare

Code Format

  • We use ESLint, Prettier and Stylelint to keep an uniform code format.
  • Line-Seperator is LF. Please make sure Git does not automatically transfer to CRLF on Windows:
git config core.autocrlf false

Locale File Key Format

  1. Write long, comma seperated key name, instead of multi-level nested key name.
  2. 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
}

Happy coding with VSCode

Recommanded Plugins in .vscode/extensions.json:

  1. ESLint: Strict syntex check.
  2. Prettier: Code Format.
  3. Sneak Mark: Check non-ascii marks in code.
  4. Stylelint: CSS Format.
  5. Docker: Needed if you dev with docker.

Recommanded Settings in .vscode/settings.json:

  1. Auto Save: No
  2. Default Formatter: Prettier
  3. Format On Paste: Yes
  4. Format On Save: Yes
  5. Format On Save Mode: File

Install node_modules:

npm install -g yarn
yarn

If you're in mainland China, recommand to use tyarn instead.

[Optional] Install node_modules with Docker

  • 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

Tips for Ubuntu or WSL(Windows Subsystem Linux)

  • Switch default shell from dash to bash to prevent [ issue in git hooks:
sudo dpkg-reconfigure dash
# Then select `No`
  • Manage multiple node environments with ease: NVM.

Provided Scripts

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

[Optional] With docker

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

About

Frontend part for pp-label

https://paddlecv-sig.github.io/PP-Label-Frontend/


Languages

Language:TypeScript 86.7%Language:Less 7.5%Language:CSS 3.4%Language:EJS 1.5%Language:JavaScript 0.9%