Learn the vuE3 course of Teacher Coderwhy and standardize the project configuration.

When we write the project, we need to standardize our code and standardize the code submission management, so we need to configure these things.

Integrate the EditorConfig configuration

EditorConfig helps maintain a consistent coding style for multiple developers working on the same project on different IDE editors.

# # http://editorconfig.org root = true [*] said all applicable charset = utf-8 # set file for utf-8 character set indent_style = space # indented style (TAB | Space) indent_size = # 2 # end_of_line indentation size = lf control line type (lf | cr | CRLF) trim_trailing_whitespace = true line # remove any white space characters of the first Insert_final_newline = true # Always insert a newline at the end of the file [*.md] # indicates that the following rules apply only to md files max_line_length = off TRIM_trailing_whitespace = falseCopy the code

VSCode requires a plug-in: EditorConfig for VSCode

Use the Prettier tool

Prettier Prettier is a powerful code formatting tool that supports JavaScript, TypeScript, CSS, SCSS, Less, JSX, Angular, Vue, GraphQL, JSON, Markdown, etc. Basically the front end can use the file format it can be done, is the most popular code formatting tool.

1. Install the prettier

npm install prettier -D
Copy the code

2. Configure the. Prettierrc file:

  • UseTabs: Use TAB or space indent, select false;
  • TabWidth: if TAB is a space, select 2 Spaces;
  • PrintWidth: When the line length is 80 characters, some people prefer 100 or 120 characters;
  • SingleQuote: Use single or double quotes, select true, use single quotes;
  • TrailingComma: whether to add the trailingComma entered on multiple lines, set tonone;
  • Semi: Indicates whether to add a semicolon to the end of the statement. The default value is true.
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}
Copy the code

3. Create the. Prettierignore file

/dist/*
.local
.output.js
/node_modules/**
​
**/*.svg
**/*.sh
​
/public/*
Copy the code

4.VSCode needs to install the plug-in for Prettier

5. Test whether Prettier takes effect

  • Test 1: Save code in code;
  • Test 2: Configure the command for one-time modification.

Configure a script in package.json:

    "prettier": "prettier --write ."
Copy the code

Use ESLint to detect

1. We chose ESLint when we created the project earlier, so Vue will help us configure the ESLint environment we need by default.

2.VSCode needs to install the ESLint plugin:

3. Resolving the conflict between ESLint and Prettier:

Install plugins :(if prettier is selected by vue when creating a project, these two plugins are installed automatically)

npm i eslint-plugin-prettier eslint-config-prettier -D
Copy the code

Add the prettier plugin:

  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
    'plugin:prettier/recommended'
  ],
Copy the code

Git Husky and eslint

Although we have already required the project to use ESLint, there is no guarantee that the problems in ESLint will be resolved before team members submit code:

  • That is, we want to ensure that the code in the repository is esLint compliant;
  • So we need to do it in the groupgit commitIf it does not conform to the ESLint specification, it will be automatically fixed by the specification;

So how do you do this? Husky tools are available:

  • Husky is a Git hook that triggers the various stages of git commit: pre-commit, commit-msg, and pre-push

How do you use Husky?

Here we can use the autoconfiguration command:

npx husky-init && npm install
Copy the code

Three things will be done here:

1. Install Husky-related dependencies:

2. Create the.husky folder in the project directory:

npx huksy install
Copy the code

3. Add a script to package.json:

Next, we need to do one operation: on commit, execute the Lint script:

Git commit will automatically validate your code.

Git commit specification

Code submission Style

Git commits are usually committed in a consistent style so that you can quickly locate each commit for later version control.

But if writing these manually every time is a hassle, we can use a tool: Commitizen

  • Commitizen is a tool that helps us write normative Commit messages;

1. Install Commitizen

npm install commitizen -D
Copy the code

2. Install AND initialize THE Z-Xconventional – Changelog:

npx commitizen init cz-conventional-changelog --save-dev --save-exact
Copy the code

This command will help us install CZ-Conventional – Changelog:

And configure it in package.json:

Git commit -m “” :

  • The first step is to select Type, the type of this update
Type role
feat New features
fix Fix the Bug (Bug fix)
docs Modify documentation
style Change code formats (white-space, formatting, missing semi Colons, etc.)
refactor Code Refactor
perf A code change that improves Performance
test When adding Missing tests
build Changing project builds or external dependencies (e.g. scopes: webpack, gulp, NPM, etc.)
ci Change the scripts commands in the continuous integration software configuration files and packages, such as scopes: Travis, Circle, etc
chore Changing the build process or ancillary tools (such as changing the test environment)
revert Code back
  • Step 2 Select the scope of this modification (scope)

  • The third step is to select the information to submit

  • Step 4 Submit detailed description

  • Step 5 is a major change

  • Step 6 Whether to affect an Open issue

We can also build a command in scripts to execute cz:

Code submission validation

What if we standardize the commit style according to CZ, but some colleagues still commit according to non-standard format through Git commit?

  • We can restrict commits via commitlint;

1. Install @commitlint/ config-Conventional and @commitlint/ CLI

npm i @commitlint/config-conventional @commitlint/cli -D
Copy the code

2. Create the commitlint.config.js file in the root directory and configure commitLint

module.exports = {
  extends: ['@commitlint/config-conventional']
}
Copy the code

3. Use husky to generate the commit-msg file and verify the commit information:

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

Git commit -m “”