Code specification

IDE editor

To ensure uniform Code style, use VS Code as the development IDE and install the following extensions:

  • EditorConfig for VS Code
  • ESLint
  • Vetur
  • Prettier – Code formatter
  • stylelint

After the installation, add the following configuration to settings.json:

"editor.codeActionsOnSave": {
	"source.fixAll.eslint": true."source.fixAll.stylelint": true
}
Copy the code

The net effect is that the current file is automatically formatted when saved.

Git hooks

The above operations only format the code specification, such as indentation, Spaces, trailing semicolons, and so on.

When you commit code, Git’s hooks check for errors that the IDE can’t fix automatically, such as unused variables. If there is an error, the commit is cancelled and not allowed to succeed until the developer has fixed all the errors, ensuring that the code in the repository is absolutely correct.

You can modify.eslintignore and.stylelintignore to ignore files that do not require code specification, such as plugins or components that reference third parties in your project

If the initialization of the Git init repository is performed after the dependency package is installed, the Git hook cannot be initialized. You are advised to run yarn or NPM I again after git init to install the dependency package again.

Configuration code specification

There are three main configuration files, The IDE configuration (.EditorConfig), ESLint configuration (.eslintrc.js and.eslintignore), StyleLint configuration (.stylelintrc and.stylelintignore), respectively.

Using code indentation as an example, this template defaults to 4 Spaces for indentation. If you want to change it to 2 Spaces, you need to change it in.EditorConfig:

indent_size = 2
Copy the code

Modify in.eslintrc.js:

'indent': [2, 2, {
    'SwitchCase': 1
}],

...

'vue/html-indent': [2, 2],

...

'vue/script-indent': [2, 2, {
    'switchCase': 1
}]
Copy the code

Modify in.stylelintrc:

"indentation": 2
Copy the code

After the modification, run the following two commands:

yarn run lint
yarn run stylelint
Copy the code

This operation will perform a format check on the code. If the rule supports automatic repair, the code that does not meet the rule will be automatically formatted.

In the example above, when the indentation rules are adjusted, instead of manually adjusting each file, the new indentation rules can be applied automatically through commands.