The final result

  1. Perform the git commit
  2. The code automatically completes the formatting of our custom rules and submits them locally

NPM package used

Prettier: function dependency package

Husky: Githook-related functionality

Lint-staged: Commands that only work on files that have changed

Why do you do it?

Before the specification is established, everyone’s code style is not consistent, and the development process may forget to format, hand error problems, if before submission, can automatically erase the differences to unify the multi-player development style, this will be effective

Code style is a problem that every programmer has to face. Whether it is in individual development or team collaboration, it is understood that a good code style is the key to future maintainability, so even those who do not understand the development may know that they should pay attention to the code style

How to do

Is advancing period, will face many problems, can not be sure all of a satisfactory solution, and even the minority is subordinate to the majority, in the actual implementation will also meet a lot of problems in the development, for example, editor of different formatting tools, or completely not this habit, to promote the decision, Every code review needs to modify such details, one after another is shelved, it is really a headache, in the end how to put things into perfect implementation?

Prettier says, “I give you a code, everybody uses it, make it readable and maintainable, and then everybody follows the rules.”

Prettier is An opinionated code formatter. Prettier is a framework with strict rules and does not give you many configuration items. If you like it, use it, don’t use it, prettier is integrated into most editors. It would be nice if everyone followed this plan

Specific Configuration (What)

Prettier where prettier

Dependency prettier is pressed for project, complete the steps according to document

Prettier website

Configuring the COMMIT hook

After installation, it will generate the.husky file under your project and modify your package.json, which has been configured so far, by executing NPX Lint-passage commands before every commit, where prettier –write, Only the modified file takes effect

Specific command (for those who don’t read the document, see here ~)

The current version of Prettier is 2.4.1. If the version of prettier is not the same, go to the official website

  1. Vscode installation prettier
  2. The project installs prettier
npm install --save-dev --save-exact prettier
Copy the code
  1. Creating a Configuration File
echo {}> .prettierrc.json
Copy the code
  1. Create a file that does not require formatting
    1. Example Create a file
    2. Write content
# Ignore artifacts:
build
coverage
Copy the code

  1. Run the NPX prettier –write. Command to format the existing code and test whether the function is normal

  2. Writing configuration files

// Json file to js file (see personal habit) to write content
module.exports = {
  singleQuote: true./ / single quotation marks
  trailingComma: 'es5'.// Object attributes end with ","
  semi: false.// Whether a semicolon is required
  printWidth: 110.// A maximum of 120 lines
  jsxSingleQuote: true.// JSX uses single quotes
  tabWidth: 2.// A TAB represents several Spaces. The default is 2
  useTabs: false.// Instead of indentation, use Spaces
  jsxBracketSameLine: true,}Copy the code
  1. Performed againnpx prettier --write .Have suggestions on formatting rules refer to the document to modify the configuration until you are satisfied
  2. Configure the gitHook hook.
npx mrm@2 lint-staged
Copy the code
  1. Format the code out of order and try commit to see if it works (it will be automatically formatted before committing).

conclusion

If you have some problems with this article, please go to QQ group 530496237 and blow water together