Standards
Contributing Code
- If you want to contribute code to the project, please ensure your code complies with the project's coding standards.
- If you are using
vscode, you need to install the following plugins:- ESLint - Script code checking
- Oxc - Oxlint / Oxfmt integration
- Code Spell Checker - Word syntax checking
- Stylelint - CSS formatting
Purpose
Students with basic engineering literacy always pay attention to coding standards, and code style checking (Code Linting, simply called Lint) is an important means to ensure the consistency of coding standards.
Following the corresponding coding standards has the following benefits:
- Lower bug error rate
- Efficient development efficiency
- Higher readability
Tools
The project's configuration files are located in internal/lint-configs, where you can modify various lint configurations.
The project integrates the following code verification tools:
- Oxfmt for code formatting
- Oxlint for JavaScript / TypeScript linting
- ESLint for Vue, JSONC, YAML, and related rules
- Stylelint for CSS style checking
- Commitlint for checking the standard of git commit messages
- Publint for checking the standard of npm packages
- Cspell for checking spelling errors
- lefthook for managing Git hooks, automatically running code checks and formatting before commits
Oxfmt
Oxfmt is used to keep code formatting consistent across the repository.
Command
pnpm oxfmt
pnpm oxfmt --checkConfiguration
The root Oxfmt entry file is oxfmt.config.ts, and its core configuration is located in internal/lint-configs/oxfmt-config.
Oxlint
Oxlint is the primary script linting tool for the repository.
Command
pnpm oxlint
pnpm oxlint --fixConfiguration
The core Oxlint configuration is located in internal/lint-configs/oxlint-config, and the root entry file is oxlint.config.ts.
ESLint
ESLint is used to complement Vue, JSONC, YAML, and related rules.
Command
pnpm eslint . --cacheConfiguration
The ESLint configuration file is eslint.config.mjs, with its core configuration located in the internal/lint-configs/eslint-config directory, which can be modified according to project needs.
Stylelint
Stylelint is used to check the style of CSS within the project. Coupled with the editor's auto-fix feature, it can effectively unify the CSS style within the project.
Command
pnpm stylelint "**/*.{vue,css,less,scss}" --cacheConfiguration
The Stylelint configuration file is stylelint.config.mjs, with its core configuration located in the internal/lint-configs/stylelint-config directory, which can be modified according to project needs.
CommitLint
In a team, everyone's git commit messages can vary widely, making it difficult to ensure standardization without a mechanism. You might think of using git's hook mechanism to write shell scripts to implement this. Of course, this is possible, but JavaScript has a good tool for this template: commitlint.
Configuration
The CommitLint configuration file is .commitlintrc.js, with its core configuration located in the internal/lint-configs/commitlint-config directory, which can be modified according to project needs.
Git Commit Standards
Refer to Angular
featAdd new featuresfixFix problems / BUGsstyleCode style changes that do not affect the outcomeperfOptimization / performance improvementrefactorRefactoringrevertRevert changestestRelated to testsdocsDocumentation / commentschoreDependency updates / scaffold configuration changesworkflowWorkflow improvementsciContinuous integrationtypesType modifications
Disabling Git Commit Standard Checks
If you want to disable Git commit standard checks, there are two ways:
git commit -m 'feat: add home page' --no-verifycommit-msg:
commands:
# commitlint:
# run: pnpm exec commitlint --edit $1If you changed lefthook.yml, reinstall hooks with:
pnpm exec lefthook installPublint
Publint is a tool for checking npm package standards, including package versioning, exports, and ESM package structure.
Command
pnpm publintCspell
Cspell is a tool for checking spelling errors in the code, avoiding bugs caused by spelling mistakes.
Command
pnpm check:cspellConfiguration
The cspell configuration file is cspell.json, which can be modified according to project needs.
Git Hook
Git hooks are generally combined with various lints to check code style during git commits. If the check fails, the commit will not proceed. Developers need to modify and resubmit.
lefthook
One issue is that the check would verify all code, but in practice we usually only want to check the code being committed. This is where lefthook comes in.
The most effective solution is to perform lint checks locally before committing. A common practice is to use lefthook to perform checks before local submission.
The project defines corresponding hooks inside lefthook.yml:
pre-commit: Runs before commit, used for code formatting and checkingcode-workspace: Updates VSCode workspace configurationlint-md: Formats Markdown fileslint-vue: Formats and checks Vue fileslint-js: Formats and checks JavaScript / TypeScript fileslint-style: Formats and checks style fileslint-package: Formatspackage.jsonlint-json: Formats other JSON files
post-merge: Runs after merge, used for automatic dependency installationinstall: Runspnpm installto install new dependencies
commit-msg: Runs during commit, used for checking commit message formatcommitlint: Uses commitlint to check commit messages
Current hooks can be installed with:
pnpm exec lefthook installHow to Disable lefthook
If you want to temporarily disable lefthook, use:
git commit -m 'feat: add home page' --no-verifyHow to Modify lefthook Configuration
If you want to modify lefthook's configuration, you can edit the lefthook.yml file. For example:
pre-commit:
parallel: true
commands:
lint-js:
run: pnpm oxfmt {staged_files} && pnpm oxlint --fix {staged_files} && pnpm eslint --cache --fix {staged_files}
glob: '*.{js,jsx,ts,tsx}'Where:
parallel: Whether to execute tasks in parallelcommands: Defines the list of tasks to executerun: Command to executeglob: File pattern to match{staged_files}: Represents the list of staged files
xingyu4j
Netfan
vben
invalid w
Li Kui