/front-end-engineering

前端工程化，包括 husky, eslint, stylelint, commitlint, lint-staged, prettier, editorconfig

Primary LanguageVue

Frontend-Engineering

🎉 Front-End-Engineering System

Table of Contents

Tech Stack

Vue Vite Vitest Pinia Typescript ESLint Stylelint Commitlint Prettier

Prerequisites

Before getting started, please ensure that you have installed the following dependencies:

  • Node.js >= 15.14.0
  • Git

Installation

You can install using Yarn

yarn install

Running Server

yarn run dev

Running Tests

Perform a single run for all tests without watch mode

yarn run test

or run only the test file without watch mode

yarn run test src/components/__test__/Hello.vue

Enter the watch mode in development environment and run mode in CI automatically

yarn run test:watch

or run only the test file with watch mode

yarn run test:watch src/components/__test__/Hello.vue

Enable coverage report

yarn run test:coverage

Silent console output from tests

yarn run test:silent

Lint 🛠

Eslint

Perform JavaScript syntax check on files of the following types: .vue, .js, .jsx, .cjs, .mjs, .ts, .tsx, .cts, .mts.

Check specified file, for example:

yarn run lint:eslint src/components/Hello.vue

Check & Automatically fix problems, for example:

yarn run lint:eslint:fix src/components/Hello.vue

Check all matching files

yarn run lint:eslint:all

Check all matching files & Automatically fix problems

yarn run lint:eslint:all:fix

Type

Type check

yarn run lint:type

Staged

Run configured linter tasks (or other tasks) on files that are staged in git

yarn run lint:staged

Prettier

Code formatter

Checks that files are already formatted, rather than overwriting them, for example:

yarn run lint:prettier src/components/Hello.vue # check a certain file
yarn run lint:prettier src/components/ # check a certain directory
yarn run lint:prettier src/components/*.ts # check all matching files in a directory

or you can check everything (supported files)

yarn run lint:prettier:all # check everything

Format that files using the parameters mentioned above, for example

yarn run lint:prettier:fix src/components/Hello.vue # format a certain file
yarn run lint:prettier:all:fix # format everything

Stylelint

Avoid style errors and enforce conventions

Checks stylesheets, for example:

yarn run lint:style src/assets/index.scss # check a certain file
yarn run lint:style src/assets/*.scss # check all matching files in a directory

or you can check everything (supported files)

yarn run lint:style:all # check everything

Automatically fix, where possible, problems reported by rules.

Format that files using the parameters mentioned above, for example

yarn run lint:style:fix src/index.scss # format a certain file
yarn run lint:style:all:fix # format everything

Building

Production build: it will load the env variables from .env.production

yarn run build # Type checking will be performed simultaneously
yarn run build-only # only build

Development build: run a development build by using a different mode and .env file configuration:

  • Current mode: load the env variables from .env.current

    yarn run build:local # Type checking will be performed simultaneously
    yarn run build-only:local # only build

  • Test mode: load the env variables from .env.test

    yarn run build:test # Type checking will be performed simultaneously
    yarn run build-only:test # only build

Preview

Locally preview the production build. Do not use this as a production server as it's not designed for it. For more information, please refer to vite preivw

Before preview, make sure you have the build artifacts. If not, please execute the command yarn run build

yarn run preview

Commit

You should adhere to a commit convention, such as feat(FE-1000): description

You have twe options:

  • Recommended: Enter the interactive mode and fill in the required information following the prompts.

    yarn run commit

  • Manual:

    git commit -m "feat(FE-1000): description"

If you want to bypass the prompted conventions, make sure you know what you are doing.

git commit -m "feat(FE-1000): description" --no-verify

Console Hacks 🥷

Run the following command will clean the yarn cache, node_modules folder, build artifacts, as well as the cache for eslint, prettier, and stylelint.

yarn run clean

clean the build artifacts

yarn run clean:build

clean cache for eslint

yarn run clean:eslint

clean cache for prettier

yarn run clean:prettier

clean cache for stylelint

yarn run clean:stylelint

Happy Code 😀

For the best development experience, please proceed with the relevant configurations.

IDE Settings

Editor

FAQ❓

How should I correctly write a TODO?

Click to expand

We have defined conventions, and ESLint will assist you in standardizing the comments.

The todo comment consists of three parts. keyword + [jiraId] | (username) + summary

For example:

  • TODO [FE-1000] Block by the back end.
  • TODO (360-jk) Will fix this soon.

Refer to eslint-plugin-yushu for more information.

Stylelint: Cannot resolve custom syntax module "postcss-html". Check that module "postcss-html" is available and spelled correctly.

Click to expand

yarn run clean & yarn

Stylelint: TypeError: node.rangeBy is not a function

Click to expand

It seems to occur only in WebStorm when the project root path is set to "dam".

It is recommended to open the project with "cost-h5" as the project root path.

Why is this specific Node version?

Click to expand

  • jsdom@22.1.0: Expected version ">=16"

  • execa@7.2.0: Expected version "^14.18.0 || ^16.14.0 || >=18.0.0".

How to view the configs?

Click to expand
  • eslint config npx eslint --print-config .eslintrc.cjs
  • stylelint config npx stylelint --print-config .stylelintrc

Why is 'eslint:recommended' not recommended?

Click to expand

Because 'eslint:recommended' includes a limited set of rules. We opted for the more comprehensive 'eslint-config-airbnb-base', which encompasses all the rules from 'eslint:recommended' and additionally provides numerous useful rules.