Full project address: vuE3-element-plus

Experience address: http://8.135.1.141/vue3-admin-plus

Series entry:

  • True fragrance law! Take you to use vuE3 + VITE2 to lift backstage (entrance)

preface

In the basics section we will focus on the code format ESLint + Pretty and husky usage

“Eslint: copying code quality checks, like can’t write console.log, alert, etc. Prettier: formatting code Husky: provides git lifecycle hooks, like checking code before committing it

Some people say, why prettier when ESLint can format code?

Eslint will format code differently on different systems and editors. As a result, there will always be various problems, such as code conflicts, when the code is not synchronized between different personnel. Prettier doesn’t have these problems

Eslint is installed and used

Install dependencies

Json copy to your dependencies and run yarn "devDependencies": {"@vue/eslint-config-prettier": {"@vue/eslint-config-prettier": "^ 6.0.0 @", "vue/eslint - config - typescript" : "9.1.0", "eslint" : "7.32.0", "eslint - plugin - import" : "2.25.3", "eslint plugin - prettier" : "3.4.1 track", "eslint - plugin - vue" : "7.20.0,"}Copy the code

Configure the esLint configuration file.eslintrc.js

module.exports = {
  root: true.env: {
    browser: true.commonjs: true.es6: true.node: true
  },
  // EsLint validations will report errors if we have undefined variables in the file, such as defineExpose, which need not be configured
  // defineExpose should be configured here
  globals: {
    defineEmits: true.document: true.localStorage: true.window: true.defineProps: true.defineExpose: true
  },
  extends: [
    'plugin:vue/vue3-essential'.'eslint:recommended'.'@vue/typescript/recommended'.// Configure the prettier plug-in to format code like Prettier
    '@vue/prettier'.'@vue/prettier/@typescript-eslint'].parserOptions: {
    ecmaVersion: 2021
  },
  rules: {
    // Turn off lf check, Windows system pull down the code is always a lot of errors, turn off this can solve the problem
    'linebreak-style': ['off'].'import/no-unresolved': 'off'.// Verify the extension
    'import/extensions': 'off'.'import/no-absolute-path': 'off'.'no-async-promise-executor': 'off'.'import/no-extraneous-dependencies': 'off'.'vue/no-multiple-template-root': 'off'.'vue/html-self-closing': 'off'.'no-console': 'off'.'no-plusplus': 'off'.'no-useless-escape': 'off'.'no-bitwise': 'off'.'@typescript-eslint/no-explicit-any': ['off'].'@typescript-eslint/explicit-module-boundary-types': ['off'].'@typescript-eslint/ban-ts-comment': ['off'].'vue/no-setup-props-destructure': ['off'].'@typescript-eslint/no-empty-function': ['off'].'vue/script-setup-uses-vars': ['off'].//can config to 2 if need more then required,
    // Set parameters without verification
    '@typescript-eslint/no-unused-vars': [1].'no-param-reassign': ['off']}}// If you want to learn more about esLint configuration, check it out
// https://blog.csdn.net/Sheng_zhenzhen/article/details/108685176
Copy the code

Configure esLint to ignore the file.eslintignore.js

public
node_modules
.history
.husky
dist
*.d.ts
Copy the code

Eslint will not validate the above configured folders, or files

Prettier installs and uses

Install dependencies

yarn add prettier@2.21. --dev
Copy the code

Example Configure the prettier configuration file prettierrc

{
    // Use TAB indentation, false by default
    "useTabs": false.// TAB indent size, default is 2
    "tabWidth": 2.// The newline length defaults to 80
    "printWidth": 120.// Strings use single quotes
    "singleQuote": true.// Whether to place a comma after the last element of an object or array (as in ES5)
    "trailingComma": "none".// Print Spaces in the object by default true
    // true: { foo: bar }
    // false: {foo: bar}
    "bracketSpacing": true.// Automatically add semicolons at the end of each line; False - > don't add
    "semi": false.// Formatting plug-in Prettier, formatting, end tag > next line
    "htmlWhitespaceSensitivity": "ignore"
}
Copy the code

When vscode or webstrom is set to save, automatically format code while prettier is used

After setting it up, you will find a different development experience

Husky installation and use

Install dependencies

yarn add husky@7.02. --dev
Copy the code

configuration

Package. json Configures the prepare command

    "scripts": {
        "dev": "vite --mode serve-dev --host",
        "test": "vite --mode serve-test --host",
        "build:test": "vite build --mode  build-test",
        "build": "vite build --mode build",
        "preview": "yarn run build && vite preview ",
        "lint": "eslint --ext .js,.jsx,.vue,.ts,.tsx src --fix",
        "prepare": "husky install"
    },
Copy the code

Run the prepare command to generate the following command: husky folder yarn run prepare

Create a pre-commit file as shown in the figure above and add the following information

/ / pre - run eslint check before commit # push yarn run lint | | echo exit;Copy the code

Conclusion:

Eslint +pretties+ Husky makes development more efficient, collaboration more standardized. It is recommended that you use it