“This is the first day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

One, foreword

Front End Siege Lion must skill – build the development specification of the front end project.

To put this in context, all of the following configurations are configured in vue3 + TypeScript projects created by @vue/ CLI;

If @vue/cli is not installed, see the @vue/cli V4.x. x user Guide here.

The options for creating the project (vue create myapp on the terminal) are as follows:

  • Select custom configuration options

  • Select some configuration

  • choosevue.jsversion

  • Choose eslint

  • Select some other configuration

Reading this article, you will learn:

1.Learn to integrate within projects`editorconfig`;2.Learn to integrate within projects`prettier`;
3.Learn to integrate within projects`eslint`Code inspection tools;4.Learn to use it in your project`git husky`;5.Learn how to use it`git commit`Specification;Copy the code

Second, code specification

2.1 integrationeditorconfigconfiguration

EditorConfig helps maintain a consistent coding style for different developers working on the same project with different IDE editors. Create a new. Editorconfig file in your project and write the following configuration:

# http://editconfig.org

root = true[*] # indicates that all files apply charset = utf-8Set character set to UTF -8Indent_style = # TAB indent style (TAB | space) indent_size =2# # end_of_line indentation size = lf control line type (lf | cr | CRLF) trim_trailing_whitespace =trueInsert_final_newline =true# Always insert a new line at the end of the file [*.md] # indicates that only md files apply the following rule max_line_length = off TRIM_trailing_whitespace =false

Copy the code

VSCode requires a plug-in: EditorConfig for VSCode

2.2 Integrating the Prettier tool

Prettier Prettier is a powerful code formatting tool that supports javascript, TypeScript, CSS, SCSS, Less, JSX, Vue, Markdown, etc. Prettier is used for almost any file format where the front end uses Prettier. Is the most popular code formatting tool.

2.2.1. Installprettier

npm install --save-dev --save-exact prettier
Copy the code

2.2.2. Configuration.prettierrcfile

Create the. Prettierrc file in the root directory of the project and configure the following:

  • UseTabs: Use space or TAB indent;
  • TabWidth: indent size;
  • PrintWidth: the length of a character in a line;
  • SingleQuote: Use single or double quotation marks;
  • TrailingComma: whether or not a trailingComma is added to multiple lines;
  • Semi: Whether to add a semicolon at the end of a sentence;
{
	"useTabs": false."tabWidth": 2."printWidth": 80."singleQuote": true."trailingComma": "none"."semi": false
}
Copy the code

Configuration of 2.2.3..prettierignorefile

Configure files not formatted by Prettier:

/dist/*
/node_modules/**
/public/**
.local
.output.js

**/*.svg
**/*.sh
Copy the code

2.2.4. Install vscode plug-inPrettier - Code formatter

Save the code at this time, should follow.prettierrcThe configured rule takes effect. If it does not take effect, you need to modify the default formatting tool of the vscode editor toprettierVSCode -> Preferences -> Settings (settings.json) to configure the default formatting tool of the VSCode editor, or set the corresponding default formatting tool according to the language:

{
	"editor.formatOnSave": true."editor.defaultFormatter": "esbenp.prettier-vscode".// Set the editor's default formatting tool to prettier
	"[vue]": {
		// Set the default formatting tool according to the language
		"editor.defaultFormatter": "esbenp.prettier-vscode".// Set the default formatting tool for javascript to prettier
		"editor.formatOnSave": true // Automatically formatting when saving}}Copy the code

2.2.5. Testprettier

  • Test 1: Save code in code;
  • Test 2: Configure a one-time change command.

Configure a script (format all files in the project) in package.json:

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

2.3 Integration with Eslint code detection tools

2.3.1 Eslint environment

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

2.3.2 Download vscode plug-inESLintThe plug-in

2.3.3 Resolving a 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

Modify the contents of the.eslintrc.js file by adding an item to the extends array:

module.exports = {
	...
	extends: [...'plugin:prettier/recommended' // Resolve a conflict between Prettier and esLint],}Copy the code

2.4 Git Husky and ESLint

2.4.1 EsLint Automatically Fixes Git Commit Time

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;

  • Git commit: If the git commit does not conform to the ESLint specification, it will be automatically fixed by the specification.

** So how do you do this? ** Can be accessed via Husky tools:

  • Husky is a Git hook tool that helps us triggergitStages of submission:pre-commit,commit-msg,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.

2.4.2 Git Commit specification

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

  • CommitizenIs a tool to help us write the specificationcommit messageThe tools;
  1. The installationCommitizen
npm install commitizen -D
Copy the code
  1. The installationcz-conventional-changelogAnd initializecz-conventional-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:

This time we need to submit code using NPX cz:

  • 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:

2.4.2 Git Commit Verification

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 get throughcommitlintTo limit submissions;

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

If the command does not work, you can manually create a commit-msg file in the.husky folder and write the content

#! /bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit
Copy the code

Third, summary

This article focuses on how to build a front-end project specification. In fact, many development students have been doing some maintenance projects, it is difficult to get access to the project development specifications, the article is simply described from several aspects of the project specifications.

Of course, you can also read some good github project specifications, such as vuejs, React, etc., and learn a lot of things.