vue project code format specification setting reference guide

Preface

In order to unify the code style of project members as much as possible and reduce the developers' understanding of code costs, we need to unify the code format specifications for the project; at the same time, in order to reduce the understanding cost, we cannot increase the development cost, so we use VS Code related plug-ins to complete the code formatting function.

Add eslint to the project

Projects built with vue-cli will be asked to choose the formatting scheme when building the project. If you run vue add eslint for existing projects, it is recommended to choose the formatting scheme of Prettier; if you are a uniapp project, if you are using vue-cli, you also use vue add eslint. If you are using HBuilder for building and packaging, you need to install @vue/cli-service, otherwise npm run lint cannot be formatted normally.

After adding eslint, according to your choice, the eslint configuration item may be in the . file. If the file does not exist, the configuration item should be in, and the default configuration should be as follows:

 = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    parser: "@babel/eslint-parser",
  }
};

These configurations are not recommended to be changed. If there are other requirements, we can customize the configuration based on them.

Customize eslint configuration

 = {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "plugin:vue/recommended",
    "eslint:recommended",
    "@vue/prettier"
  ],
  "parserOptions": {
    "parser": "babel-eslint"
  },
  rules: {
    "no-console": .NODE_ENV === "production" ? "error" : "warn",
    "no-debugger": .NODE_ENV === "production" ? "error" : "warn",
    "no-unused-vars": [
      "error",
      { vars: "all", args: "none", ignoreRestSiblings: true },
    ],
    "vue/order-in-components": ["error", {
      "order": [
        "el",
        "name",
        "key",
        "parent",
        "functional",
        ["delimiters", "comments"],
        ["components", "directives", "filters"],
        "extends",
        "mixins",
        ["provide", "inject"],
        "ROUTER_GUARDS",
        "layout",
        "middleware",
        "validate",
        "scrollToTop",
        "transition",
        "loading",
        "inheritAttrs",
        "model",
        ["props", "propsData"],
        "emits",
        "setup",
        "asyncData",
        "data",
        "fetch",
        "head",
        "computed",
        "watch",
        "watchQuery",
        "LIFECYCLE_HOOKS",
        "onLoad",
        "onShow",
        "onReady",
        "onHide",
        "onUnload",
        "onResize",
        "onPullDownRefresh",
        "onReachBottom",
        "onTabItemTap",
        "onShareAppMessage",
        "onPageScroll",
        "methods",
        ["template", "render"],
        "renderError"
      ]
    }]
  },
  globals: {
    uni: true,
    requirePlugin: true
  },
}

The recommended eslint configuration is as above.

plugin:vue/recommended is added to extends. This plugin restricts some code specifications of vue, such as the order of component properties, the order of vue options, etc.

The no-console and no-debugger in rules limit the console and debugger in the code. Warning information will be generated in the development environment and errors will be reported in the production environment. No-unused-vars limits the variables used, except for the parameters and resets that do not allow unused variables; vue/order-in-components is a supplement to the plugin:vue/recommended specification in uniapp. There are many options that vue does not have in vue. Set vue/order-in-components to format and sort these options that do not have.

Add globals to globals, if not added, an error will be reported during formatting. uni is a commonly used global object for uniapp, and requiresPlugin is a global variable used for WeChat development.

pre-commit settings

pre-commit does some processing before git commit. We need to check the code format specification before submitting to avoid eslint errors when the project is packaged. Add lint-staged to the project and then configure it (when we use the vue command to add eslint, format it when selecting commit, it will automatically add it for us):

"gitHooks": {
  "pre-commit": "lint-staged"
},
"lint-staged": {
  "*.{js,jsx,vue}": [
    "vue-cli-service lint --mode production",
    "git add"
  ]
}

VS Code Configuration

What we need to useeslintandveturFor these two plugins, the eslint plugin requires npm to install the eslint package globally. After the two plugins are installed, in the VS Code configuration, set:

"[vue]": {
    "": ""
}

If formatting cannot be done, it may be caused by formatting tool conflicts. Set:

// Format the VSCode formatter when saving"": true,
// Format it with eslint when saving"": {
    "": true
｝
// The two will conflict when formatting js, so you need to close the default js formatter"": false

refer to

Vue Style Guide

eslint-plugin-vue

eslint documentation

Summarize

This is the end of this article about the code format specification setting of vue project. For more related contents of vue3 packaged input components, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!