vue项目代码格式规范设置参考指南

目录
  • 前言
  • 为项目添加eslint
  • 自定义eslint配置
  • pre-commit设置
  • VS Code配置
  • 参考
  • 总结

前言

为了尽量统一项目成员的代码风格,降低开发者对代码的理解成本,所以我们需要为项目统一代码格式规范;同时我们不能为了降低理解成本,去增加开发成本,所以我们借助VS Code的相关插件去完成代码格式化的功能。

为项目添加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配置

我们需要用的eslintvetur这两个插件,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风格指南

eslint-plugin-vue

eslint文档

总结

到此这篇关于vue项目代码格式规范设置的文章就介绍到这了,更多相关vue3封装input组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 去掉vue 中的代码规范检测两种方法(Eslint验证)

    我们在使用vue 脚手架时,为了规范团队的代码格式,会有一个代码规范检测,如果不符合规范就会报错,有时候我们不想按照他的规范去写.这时我们需要关闭.这里有两种方法. 1.在搭建vue脚手架时提示是否启用eslint检测的. Use ESLint to lint your code? 写 no; 2.如果项目已经生成,我们可以这样. 在项目中代开 bulid 文件夹下的 webpack.base.config.js 文件.将以下代码删掉或注销: { test: /\.(js|vue)$/, loa

  • vue-cli3项目配置eslint代码规范的完整步骤

    前言 最近接手了一个项目,由于之前为了快速开发,没有做代码检查.为了使得代码更加规范以及更易读,所以就要eslint上场了. 安装依赖 安装依赖有两种方法: 在cmd中打上把相应的依赖加到devDependencies下,再npm install对应依赖. 在package.json文件加上相应依赖: "eslint-plugin-html": "^6.0.3", "@vue/cli-plugin-eslint": "^3.3.0&qu

  • vue项目中使用eslint+prettier规范与检查代码的方法

    1.前言   在团队协作中,为避免低级 Bug.以及团队协作时不同代码风格对彼此造成的困扰与影响,会预先制定编码规范.使用 Lint 工具和代码风格检测工具,则可以辅助编码规范执行,有效控制代码质量.EsLint 则是其中一个很好的工具. EsLint 提供以下支持: ES6 AngularJS JSX Style 检查 自定义错误和提示 EsLint 提供以下几种校验: 语法错误校验 不重要或丢失的标点符号,如分号 未被使用的参数提醒 漏掉的结束符,如} 确保样式的统一规则,如 sass 或者

  • 实例详解Vue项目使用eslint + prettier规范代码风格

    团队开发的项目,如果没有对代码风格作要求,有多少团队成员,就当然会出现多少种不同的代码风格.因此,我们需要一种能够统一团队代码风格的工具,作为强制性的规范,统一整个项目的代码风格. 幸好,我们有 eslint 和 prettier . eslint VS prettier 应该大多数项目都已经采用eslint来对代码进行质量检查,可能少部分还会采用其进行一定程度上的统一风格.那为什么还需要prettier呢?我们先来对它们作一个简单的了解. 各种linters 总体来说,linters有两种能力

  • vue3+ts+EsLint+Prettier规范代码的方法实现

    目录 使用 EsLint的使用 添加配置文件 Prettier的使用 使用husky和lint-staged构建代码 增加setting.json配置 参考资料 本文主要介绍在Vue3中使用TypeScript做开发时,如何安装与配置EsLint和Prettier,以提高编码规范. (1)EsLint 提供编码规范: (2)Prettier 是一个 Opinionated 的代码格式化工具. 使用 EsLint的使用 安装依赖 npm i -D eslint eslint-plugin-vue

  • vue项目代码格式规范设置参考指南

    目录 前言 为项目添加eslint 自定义eslint配置 pre-commit设置 VS Code配置 参考 总结 前言 为了尽量统一项目成员的代码风格,降低开发者对代码的理解成本,所以我们需要为项目统一代码格式规范:同时我们不能为了降低理解成本,去增加开发成本,所以我们借助VS Code的相关插件去完成代码格式化的功能. 为项目添加eslint 使用vue-cli构建的项目,在项目构建时,就会让你选择格式化方案,如果是已有项目运行vue add eslint添加格式化方式,建议选择Prett

  • vue模板配置与webstorm代码格式规范设置

    目录 1.编译器代码格式规范设置 2.vue模板配置 1.编译器代码格式规范设置 通常我们写代码时,代码缩进都是4个空格,但是在前端中,据全球投票统计,建议使用2个空格来进行代码缩进. 首先我们打开webstorm中的设置,如果使用的是mac的同学直接使用command +  ,快捷方式,来到Editor-->Code Style-->HTML,将Tab size和Indent的值改为2,同理在JavaScript中也改为2 2.vue模板配置 在我们使用html练习vue时,如果我们不想每次

  • vue项目,代码提交至码云,iconfont的用法说明

    一.前期准备 首先得有一个码云账号,账号名最好是英文,用于线上仓库 其次下载一个git到电脑,因为很多git命令,cmd命令行识别不了 最好再有一个Iconfont账号,很多前端用到的图标就不用再自己画了,直接添加到项目下载下来就可以用了 还需要用到的有node 二.建立项目 1.首先在码云上新建一个私有的项目(如果项目是共有的,那么所有人都能看见,一般设为私有,然后将项目组的人拉进来就可以了),使用READERME文件初始化这个项目,语言选择javascript,克隆到本地 其中需要完成线上仓

  • vue 项目代码拆分的方案

    背景 由于之前的数据库防火墙产品与数据库审计产品使用的是同一套代码,随着两个产品功能的差异越来越大,代码的冗余度和偶合度越来越高,为了便于后期维护以及添加新功能,所以基于原来的项目代码,进行了代码结构拆分. 注意:本次拆分只拆分了可以拆分的部分,有的模块例如:规则.关于我们,是没有进行拆分的,一是有的模块很简单,没必要拆分:二是有的模块原先写得代码偶合太严重,无法拆分,如果要拆分,需要花费大量精力去梳理代码,同时还要后端配合拆分. 目的 将此次代码拆分方案记录下来,便于后来的开发人员快速熟悉项目

  • Vue项目代码之路由拆分、Vuex模块拆分、element按需加载详解

    目录 路由的拆分 VUEX模块拆分 Element UI库按需加载的优雅写法 路由的拆分 项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理. require.context() 是webpack提供的语法, 相当于前端的读写文件,返回的 files是一个函数,files.keys()执行,返回获取到的文件名(是一个数组),再通过files(keys)获取到模块,取到default 属性,拿到真正的导出对象. /router/home.router

  • 在vue项目中,将juery设置为全局变量的方法

    1.首先执行:npm install jQuery --save-dev,在package.json里加入jQuery. 2.修改build下的webpack.base.conf.js 方法一: 首先加入: const webpack = require("webpack") 然后在module.exports 对象中加入: plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.Prov

  • Vue项目中ESlint规范示例代码

    前言 eslint是一种代码风格管理的工具,可以制定一些代码编写规范,在vue项目中经常用到,本文就给大家分享了开发项目中使用的eslint校验规范,供参考: 示例代码 module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: 'module' }, env: { browser: true, node: true, es6: true, }, extends: ['plugin:vue

  • J2EE项目代码编写规范分享

    码编写规范目的:能够在编码过程中实现规范化,为以后的程序开发中养成良好的行为习惯. 代码编写规范使用范围:J2EE项目开发. 包命名规范: 目的:包的命名规范应当体现出项目资源良好的划分 servlet类所在包命名规范:公司名称.开发组名称.项目名称.web.servlet 例如:net.linkcn.web.servlet 自定义标签类所在包命名规范:公司名称.开发组名称.项目名称.web.tags 例如:net.linkcn.web.tags 过滤器类所在包命名规范:公司名称.开发组名称.项

  • Vue项目中引入ESLint校验代码避免代码错误

    目录 1 ESLint 是什么 2 在 Vue 项目中引入 ESLint 2.1 引入 ESLint 2.2 ESLint 配置 2.3 执行 ESLint 代码检查 2.4 自动修复 ESLint 问题 3 配置 husky 和 PR 门禁 3.1 配置 husky 门禁 3.2 配置 PR 门禁 4 常见的 ESLint 问题及修复案例 4.1 案例1: 4.2 案例2: 4.3 案例3: 4.4 案例4: 5 感谢 1 ESLint 是什么 ESLint 是一个插件式的 JavaScrip

  • nginx配置多个vue项目

    需求 nginx 下配置多个 vue 项目 举例: blog: https://www.yoursite.com/blog test: https://www.yoursite.com/test vue项目中配置 vue-router 设置 base 路径 base: '/blog/' config/index.js 修改 assetsPublicPath assetsPublicPath: '/blog/' nginx配置 location /blog { try_files $uri $ur

随机推荐