Last update: 2024-1-30
Main Stack: pnpm, eslint, prettier, husky, commitlint
Secondary Stack: Typescript, git, lint-staged, standard-version
Initialize project:
mkdir standard-dev-demo
cd ./standard-dev-demo
npm init -yFor Vue, React ,NestJs and other projecst: use their own cli tools Such as
Vue-cli(Vue-cli-ui),Vite...
Open it(Vscode):
code .Use pnpm:
npm install pnpm -g- Fast speed - It's fast than
npmandyarn - Small footprint - Using
hard linkingto link nodes_ modules resource - Compatible with NPM - PNPM is fully compatible with the ecosystem of NPM and can be easily migrated.
Install Typescript:
npm install typescript -g
tsc --initExample tsconfig.json
{
"extends": "./tsconfig.node.json",
"compilerOptions": {
"outDir": "dist"
},
"include": ["src/**/*.ts"]
}{
"compilerOptions": {
"module": "NodeNext",
"moduleResolution": "NodeNext",
"target": "ESNext",
"strict": true,
"declaration": true,
"experimentalDecorators": true,
"composite": true,
"incremental": true
}
}Initialize Git:
Create a Github repository: https://github.com/new
git init
git remote add origin git@github.com:BIYUEHU/standard-dev-demo.git
git push -u origin masterCreate
.gitignore
node_modules
dist
lib
.husky/_
.vscode/*
.vs/*
!.vscode/extensions.json
*.tgz
tsconfig.tsbuildinfo
*.logESLint: Check syntax and find problems By
npm packagesPrettier: A code-format tool and unified code style ByEditor Plugins
pnpm install eslint-config-prettier eslint-config-airbnb-base eslint-config-typescript eslint prettier -DInstall their editor plugins(Vscode):
Search in the expand store:
ESLintPrettier - Code formatterOptional plugins:ESLint Chinese Rules(For Chinese)Prettier ESLint
Change save setting: Settings(
ctrl + .) -> Search: save -> √ Editor: Format On Save
Right click in the editing area -> Using Format Document -> Configure default formatted documents
Auto fix problems that is can by ESLint on save:
/*
* VSCode Settings JSON File
*/
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}.eslintrc
{
"root": true,
"env": {
"es2024": true
},
"extends": ["airbnb-base", "prettier", "typescript"],
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"rules": {
"import/no-extraneous-dependencies": 0,
"import/no-unresolved": 0,
"import/extensions": 0,
"no-use-before-define": 0,
"no-unused-vars": 0,
"no-shadow": 0,
"no-redeclare": 0
},
"ignorePatterns": ["*.js", "*.d.ts"]
}.prettier
{
"singleQuote": true,
"printWidth": 120,
"trailingComma": "none"
}package.json
{
// ...
"scripts": {
// ...
"lint": "eslint \"src/*.{ts,tsx}\" --fix",
"format": "prettier --config .prettierrc \"src/*.ts\" --write"
}
}Husky: A tool for adding hooks to Git clients, which automatically triggers functions before some Git operations
Commitlint: A tool for verifying comments submitted by git commit
Lint-staged: filter out Git code temporary storage areas (by
git add), passing a list of all temporary files to the task
Install Husky:
pnpm install husky -Dpackage.json
{
// ...
"scripts": {
// ...
"prepare": "husky install"
}
}pnpm prepare
pnpx husky installInstall Commitlint:
pnpm install @commitlint/config-conventional @commitlint/cli -D
pnpx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'.commitlintrc
{
"extends": ["@commitlint/config-conventional"],
"rules": {
"type-enum": [
2,
"always",
["feat", "fix", "docs", "style", "refactor", "perf", "test", "build", "ci", "chore", "revert"]
],
"subject-case": [0]
}
}| Type | Description |
|---|---|
| feat | A new feature |
| fix | A bug fix |
| docs | Documentation only changes |
| style | Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) |
| refactor | A code change that neither fixes a bug nor adds a feature |
| perf | A code change that improves performance |
| test | Adding missing tests or correcting existing tests |
| build | Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm) |
| ci | Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs) |
| chore | Other changes that don't modify src or test files |
| revert | Reverts a previous commit |
Use lint-staged:
pnpm install lint-staged -Dpackage.json
{
// ...
"lint-staged": {
"*.{js,jsx,vue,ts}": ["pnpm lint", "pnpm format", "git add ."]
}
}pnpx husky add .husky/pre-commit "npx lint-staged"Install standard-version
pnpm install standard-version -Dpackage.json
{
// ...
"scripts": {
// ...
"release": "pnpm release:changelog && standard-version",
"release:changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
}
}Try a few!
pnpm releaseMange npm's sources:
npm install nrm -g
nrm ls
nrm use npm
npm loginpackage.json
Added some information for your package.json
{
// ...
"bugs": {
"url": "https://github.com/biyuehu/standard-dev-demo/issues"
},
"repository": {
"type": "git",
"url": "git+https://github.com/biyuehu/standard-dev-demo.git"
},
"homepage": "https://github.com/biyuehu/standard-dev-demo"
}When Everything is ready:
git add .
git commit -m 'chore: update'
pnpm release
git push
pnpm publishView your package: https://www.npmjs.com/package/standard-dev-demo
Good!You can develop to a standard project,Now!