Use Vite Create a new one Vue3 Project

Because the project needs , So I have to study how to build a project from scratch . The conditions that need to be met are various code checks of multi person cooperation 、commit Check 、CI/CD etc. .

initialization

Use vite To initialize a project .

yarn create @vitejs/app
 Copy code 

Input vue-demo, choice vue, Re selection vue. Just open this item .

formatting code

Use eslint + prettier Formatting .ts / .vue file . The operation is as follows ：

1. install eslint as well as prettier

yarn add eslint prettier -D
 Copy code 

2. Set up eslint： Select the configuration item according to your own situation

yarn run eslint --init
 Copy code 

3. add to .prettierrc.json file

{
  "singleQuote": true,
  "trailingComma": "all",
  "vueIndentScriptAndStyle": true
}

 Copy code 

4. send eslint compatible prettier

yarn add eslint-config-prettier eslint-plugin-prettier -D
 Copy code 

5. change .eslintrc.js In the document extends Field

extends: ['plugin:vue/essential', 'airbnb-base', 'prettier'],
 Copy code 

6. download VSCode plug-in unit ：eslint, prettier
7. Set up VSCode The Default Formatting plug-in is prettier

Use stylelint Formatting .css / .scss file .

1. install stylelint

yarn add stylelint -D
 Copy code 

2. To configure .stylelintrc.json

{
  "extends": "stylelint-config-standard"
}
 Copy code 

Automatically format when submitting code

Use husky + lint-staged To automatically format .

1. git initialization

```git init
2.  install  husky + lint-staged
```bash
yarn add husky lint-staged -D
 Copy code 

3. husky Subsequent installation

npx husky-init && yarn
 Copy code 

4. To configure pre-commit

npx husky add .husky/pre-commit 'npx lint-staged'
 Copy code 

5. To configure lint-staged, stay package.json Add the following information ：

"lint-staged": {
  "*.{js,vue}": [
    "eslint --fix"
  ],
  "*.{css,scss}": [
    "stylelint --fix"
  ]
}
 Copy code 

In this way, you can complete the detection and formatting of the code before submitting the code .

Detect the of submitted code commit Is it in line with the format

Use commitlint To detect git commit Information , To facilitate direct use of the default detection format . If customization is needed , Please have a look at [commitlint] Official website , The above provides some API, Used to customize .

1. install commitlint

yarn add commitlint -D
 Copy code 

2. To configure commitlint, stay package.json Add the following information ：

"commitlint": {
  "extends": [
    "@commitlint/config-conventional"
  ]
}
 Copy code 

3. To configure commit-msg

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
 Copy code 

This allows you to complete the verification of... When you submit the code commit Detection of information .

Set standard submission information

Now we have commit testing , Then there needs to be a way to create an effective commit. We use commitizen . Again , There is a need for customization , You can see [commitizen] Official website , Or write your own script .

1. install commitizen

yarn add commitizen -D
 Copy code 

2. To configure commitizen, stay package.json Add the following information ：

"scripts": {
  "commit": "yarn run cz",
},
"config": {
  "commitizen": {
    "path": "cz-conventional-changelog"
  }
}
 Copy code 

Next , perform yarn commit This command , Then follow the prompts step by step , You can create a that meets the specification commit Information. .

thus , A simple project is created . Not yet CI/CD, If there is another time, add it next time .