vue项目代码格式规范怎么设置

vue项目代码格式规范怎么设置

本篇内容主要讲解“vue项目代码格式规范怎么设置”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue项目代码格式规范怎么设置”吧!

为项目添加eslint

使用vue-cli构建的项目，在项目构建时，就会让你选择格式化方案，如果是已有项目运行vue add eslint添加格式化方式，建议选择Prettier 的格式化方案；如果是uniapp的项目，如果使用的是vue-cli，也是使用vue add eslint，如果是使用HBuilder构建打包，需要安装另外安装@vue/cli-service，不然npm run lint无法正常格式化。

添加eslint之后，根据你的选择，eslint的配置项，可能在.eslintrc.js文件中，如果该文件不存在，配置项应该在package.json，默认配置应该如下：

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

这些配置不建议改动，如果有其他需求，我们可以在其基础上进行自定义配置。

自定义eslint配置

module.exports = {    "root": true,    "env": {      "node": true    },    "extends": [      "plugin:vue/essential",      "plugin:vue/recommended",      "eslint:recommended",      "@vue/prettier"    ],    "parserOptions": {      "parser": "babel-eslint"    },    rules: {      "no-console": process.env.NODE_ENV === "production" ? "error" : "warn",      "no-debugger": process.env.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    },  }

推荐的eslint配置如上。

extends中添加了plugin:vue/recommended，这个插件是限制了vue的一些代码规范，如组件属性的顺序，vue选项的顺序等。

rules中的no-console和no-debugger限制了代码中的console和debugger，在开发环境会生成警告信息，在生产环境会提示报错；no-unused-vars对为使用的变量做了限制，除了参数和reset中不允许出现未使用的变量；vue/order-in-components是在uniapp中对plugin:vue/recommended规范的一个补充，uniapp中存在许多vue没有的选项，设置vue/order-in-components将这些没有的选项也进行格式化排序。

globals中添加使用到的全局变量，如果不添加会在格式化时报错。uni是uniapp常用的全局对象，requirePlugin是微信开发用的的全局变量。

pre-commit设置

pre-commit在git commit之前做一些处理，我们需要在提交之前对代码格式规范做检查，避免在项目打包时，出现eslint的报错。在项目添加lint-staged，然后再package.json中配置（我们使用vue命令添加eslint时，选择commit时格式化，会自动帮我们添加）：

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

VS Code配置

我们需要用的eslint和vetur这两个插件，eslint插件需要npm全局安装eslint包，两个插件安装完之后，在VS Code的配置中，设置：

"[vue]": {      "editor.defaultFormatter": "octref.vetur"  }

如果无法格式化，可能是格式化工具冲突导致的，设置：

// 保存时使用VSCode 自身格式化程序格式化  "editor.formatOnSave": true,  // 保存时用eslint格式化  "editor.codeActionsOnSave": {      "source.fixAll.eslint": true  ｝  // 两者会在格式化js时冲突，所以需要关闭默认js格式化程序   "javascript.format.enable": false

到此，相信大家对“vue项目代码格式规范怎么设置”有了更深的了解，不妨来实际操作一番吧！这里是高防服务器网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[