前端开发规范（Vue 篇）

Vue 开发规范目录及说明

前言：本文档为vue 开发规范基础模板，好的代码读起来真的是赏心悦目，在一个 team 里保持统一的代码风格还是有必要的，毕竟你写的代码不是只有你一个人看，在不同的终端，不同的编辑器来讲空格和 tab 可能显示效果都不一样，也就影响了阅读体验。规范并没有标准，适合自己团队才最重要。

• 规范目的
• 命名规范
• 结构化规范
• 注释规范
• 编码规范
• CSS 规范
• 谨慎使用
• 附录

规范目的

促进团队合作、降低维护成本、提高团队协作效率、输出高质量的代码

更重要的是有助于程序员自身以及团队的成长

命名规范

为了让大家书写可维护的代码，而不是一次性的代码

让团队当中其他人看你的代码能一目了然

甚至一段时间时候后你再看你某个时候写的代码也能看

普通变量命名规范

• 命名方法 ：驼峰命名法
• 命名规范 ：
  1. 命名必须是跟需求的内容相关的词，比如说我想申明一个变量，用来表示我的学校，那么我们可以这样定义const mySchool = "我的学校";
  2. 命名是复数的时候需要加s,比如说我想申明一个数组，表示很多人的名字，那么我们可以这样定义const names = new Array();

常量

• 命名方法 : 全部大写
• 命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。

const MAX_COUNT = 10
const URL = 'https://www.baidu.com/'

组件命名规范

官方文档推荐及使用遵循规则

PascalCase (单词首字母大写命名)是最通用的声明约定

kebab-case (短横线分隔命名) 是最通用的使用约定

• 组件名应该始终是多个单词的，根组件 App 除外
• 有意义的名词、简短、具有可读性
• 命名遵循 PascalCase 约定
  • 公用组件以 Viomi(公司名缩写简称) 开头，如（AbcdDatePicker,AbcdTable）
  • 页面内部组件以组件模块名简写为开头，Item 为结尾，如（StaffBenchToChargeItem，StaffBenchAppNotArrItem）
• 使用遵循 kebab-case 约定
  • 在页面中使用组件需要前后闭合，并以短线分隔，如（，）
• 导入及注册组件时，遵循 PascalCase 约定
• 同时还需要注意：必须符合自定义元素规范: 切勿使用保留字。

1. 组件文件

只要有能够拼接文件的构建系统，就把每个组件单独分成文件。 当你需要编辑一个组件或查阅一个组件的用法时，可以更快速的找到它。

正例：

components/
|- TodoList.vue
|- TodoItem.vue

反例：

Vue.component('TodoList', {
  // ...
})

Vue.component('TodoItem', {
  // ...
})

2. 单文件组件文件的大小写

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)

正例：

components/
|- MyComponent.vue

反例：

components/
|- myComponent.vue
|- mycomponent.vue

3. 基础组件名

应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。

正例：

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

反例：

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

4. 单例组件名

只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。 这不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用定制的，而不是它们在你的应用中的上下文。如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，只是目前在每个页面里只使用一次。

正例：

components/
|- TheHeading.vue
|- TheSidebar.vue

反例：

components/
|- Heading.vue
|- MySidebar.vue

5. 紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。 如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。

正例：

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

反例：

components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue

6. 组件名中的单词顺序

组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。

正例：

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

反例：

components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

7. 模板中的组件名统一小写，

正例：

<!-- 在单文件组件和字符串模板中 -->
<my-component/>

反例：

<!-- 在单文件组件和字符串模板中 -->
<mycomponent/>
<!-- 在单文件组件和字符串模板中 -->
<myComponent/>

8. 完整单词的组件名

组件名应该倾向于完整单词而不是缩写。

正例：

components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

反例：

components/
|- SdSettings.vue
|- UProfOpts.vue

method 方法命名命名规范

参考：前端js规范文档

• 驼峰式命名，统一使用动词或者动词+名词形式

  //bad
  go、nextPage、show、open、login

    // good
  jumpPage、openCarInfoDialog

• 请求数据方法，以 data 结尾

  //bad
  takeData、confirmData、getList、postForm

  // good
  getListData、postFormData

• init、refresh 单词除外
• 尽量使用常用单词开头（set、get、go、can、has、is）

附： 函数方法常用的动词:

get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离
bind 绑定/separate 分离,
view 查看/browse 浏览
edit 编辑/modify 修改,
select 选取/mark 标记
copy 复制/paste 粘贴,
undo 撤销/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,
launch 启动/run 运行
compile 编译/execute 执行,
debug 调试/trace 跟踪
observe 观察/listen 监听,
build 构建/publish 发布
input 输入/output 输出,
encode 编码/decode 解码
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 连接/disconnect 断开,
send 发送/receive 接收
download 下载/upload 上传,
refresh 刷新/synchronize 同步
update 更新/revert 复原,
lock 锁定/unlock 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成
enter 进入/exit 退出,
abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集

views 下的文件命名

• 只有一个文件的情况下也得出现文件夹
• 尽量是名词,且使用驼峰命名法

|-- views                        视图目录
|   |--  template                  视图模块名
|   |-- |-- CreateWareTemp.vue       模块页面级组件
|   |-- |-- WareTempDetail.vue       模块页面级组件
|   |-- |-- EditWareTemp.vue         模块页面级组件
|   |-- |-- WareList.vue             模块页面级组件
|   |-- |-- indexComponents          模块页面级组件文件夹
|   |-- |-- components               模块通用组件文件夹

Props 规范

Props 定义应该尽量详细

// bad 这样做只有开发原型系统时可以接受
props: ['status']

// good
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

例外情况

1. 作用域不大临时变量可以简写，比如：str，num，bol，obj，fun，arr。
2. 循环变量可以简写，比如：i，j，k 等。

结构化规范

目录文件夹及子文件规范

• 以下统一管理处均对应相应模块
• 以下全局文件文件均以 index.js 导出，并在 main.js 中导入
• 以下临时文件，在使用后，接口已经有了，发版后清除

src                               源码目录
|-- api                              接口，统一管理
|-- assets                           静态资源，统一管理
|-- components                       公用组件，全局文件
|-- utils                            过滤器，全局工具
|-- lib                              外部引用的插件存放及修改文件
|-- mock                             模拟接口，临时存放
|-- router                           路由，统一管理
|-- store                            vuex, 统一管理
|-- views                        视图目录
|   |--  template                  视图模块名
|   |-- |-- CreateWareTemp.vue       模块页面级组件
|   |-- |-- WareTempDetail.vue       模块页面级组件
|   |-- |-- EditWareTemp.vue         模块页面级组件
|   |-- |-- WareList.vue             模块页面级组件
|   |-- |-- indexComponents          模块页面级组件文件夹
|   |-- |-- components               模块通用组件文件夹

注意：

• 路由根据文件所在文件夹目录定义，如下所示：

  template/ware

• api按照模块来分文件夹

  |-- api                        
  |   |--  template                模块文件夹
  |   |-- |-- ware.js                模块菜单级组件文件
  

vue 文件基本结构

  <template>
    <div>
      <!--必须在div中编写页面-->
    </div>
  </template>
  <script>
    export default {
      components : {
      },
      data () {
        return {
        }
      },
      mounted() {
      }，
      methods: {
      }
   }
  </script>
  <style lang="scss">
  </style>

多个特性的元素规范

多个特性的元素应该一行撰写(自动换行)。

<!-- good -->
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<my-component foo="a" bar="b" baz="c"></my-component>

<!-- bad -->
<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>
<my-component
  foo="a"
  bar="b"
  baz="c"
>
</my-component>

元素特性的顺序

原生属性放前面，指令放后面

如下所示：

  - class
  - id,ref
  - name
  - data-*
  - src, for, type, href,value,max-length,max,min,pattern
  - title, alt，placeholder
  - aria-*, role
  - required,readonly,disabled
  - is
  - v-for
  - key
  - v-if
  - v-else-if
  - v-else
  - v-show
  - v-cloak
  - v-pre
  - v-once
  - v-model
  - v-bind,:
  - v-on,@
  - v-html
  - v-text

组件选项顺序

如下所示：

  - components
  - props
  - data
  - computed
  - watch
  - filter
  - created
  - mounted
  - metods

注释规范

代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明

务必添加注释列表

1. 公共组件使用说明
2. 各组件中重要函数或者类说明
3. 复杂的业务逻辑处理说明
4. 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用了某种算法或思路等需要进行注释描述
5. 多重 if 判断语句
6. 注释块必须以/**（至少两个星号）开头**/
7. 单行注释使用//

单行注释

注释单独一行，不要在代码后的同一行内加注释。例如：

  bad

  var name =”abc”; // 姓名    

  good

  // 姓名
  var name = “abc”;         

多行注释

公共组件使用说明，和调用说明
      /**
      * 组件名称
      * @module 组件存放位置
      * @desc 组件描述
      * @author 组件作者
      * @date 2017年12月05日17:22:43
      * @param {Object} [title]    - 参数说明
      * @param {String} [columns] - 参数说明
      * @example 调用示例
      *  <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
      **/

编码规范

优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护。尽量按照 ESLint 格式要求编写代码

源码风格

使用 ES6 风格编码

1. 定义变量使用 let ,定义常量使用 const
2. 静态字符串一律使用单引号或反引号，动态字符串使用反引号

  // bad
  const a = 'foobar'
  const b = 'foo' + a + 'bar'

  // acceptable
  const c = `foobar`

  // good
  const a = 'foobar'
  const b = `foo${a}bar`
  const c = 'foobar'

1. 解构赋值

• 数组成员对变量赋值时，优先使用解构赋值

  // 数组解构赋值
  const arr = [1, 2, 3, 4]
  // bad
  const first = arr[0]
  const second = arr[1]

  // good
  const [first, second] = arr

• 函数的参数如果是对象的成员，优先使用解构赋值

  // 对象解构赋值
  // bad
  function getFullName(user) {
    const firstName = user.firstName
    const lastName = user.lastName
  }

  // good
  function getFullName(obj) {
    const { firstName, lastName } = obj
  }

  // best
  function getFullName({ firstName, lastName }) {}

1. 拷贝数组

   使用扩展运算符（...）拷贝数组。

  const items = [1, 2, 3, 4, 5]

  // bad
  const itemsCopy = items

  // good
  const itemsCopy = [...items]

1. 箭头函数

   需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this

  // bad
  const self = this;
  const boundMethod = function(...params) {
    return method.apply(self, params);
  }

  // acceptable
  const boundMethod = method.bind(this);

  // best
  const boundMethod = (...params) => method.apply(this, params);

1. 模块

• 如果模块只有一个输出值，就使用 export default，如果模块有多个输出值，就不使用 export default，export default 与普通的 export 不要同时使用

  // bad
  import * as myObject from './importModule'

  // good
  import myObject from './importModule'

• 如果模块默认输出一个函数，函数名的首字母应该小写。

  function makeStyleGuide() {
  }

  export default makeStyleGuide;

• 如果模块默认输出一个对象，对象名的首字母应该大写。

  const StyleGuide = {
    es6: {
    }
  };

  export default StyleGuide;

指令规范

1. 指令有缩写一律采用缩写形式

  // bad
  v-bind:class="{'show-left'：true}"
  v-on:click="getListData"

  // good
  :class="{'show-left'：true}"
  @click="getListData"

1. v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一

  <!-- good -->
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
    </li>
  </ul>

  <!-- bad -->
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>

1. 避免 v-if 和 v-for 同时用在一个元素上（性能问题）

   以下为两种解决方案：

• 将数据替换为一个计算属性，让其返回过滤后的列表

  <!-- bad -->
  <ul>
    <li v-for="user in users" v-if="user.isActive" :key="user.id">
      {{ user.name }}
    </li>
  </ul>

  <!-- good -->
  <ul>
    <li v-for="user in activeUsers" :key="user.id">
      {{ user.name }}
    </li>
  </ul>

  <script>
  computed: {
    activeUsers: function () {
      return this.users.filter(function (user) {
        return user.isActive
      })
    }
  }
  </script>

• 将 v-if 移动至容器元素上 (比如 ul, ol)

  <!-- bad -->
  <ul>
    <li v-for="user in users" v-if="shouldShowUsers" :key="user.id">
      {{ user.name }}
    </li>
  </ul>

  <!-- good -->
  <ul v-if="shouldShowUsers">
    <li v-for="user in users" :key="user.id">
      {{ user.name }}
    </li>
  </ul>

其他

1. 避免 this.$parent
2. 调试信息 console.log() debugger 使用完及时删除
3. 除了三目运算，if,else 等禁止简写

  // bad
  if (true)
      alert(name);
  console.log(name);

  // bad
  if (true)
  alert(name);
  console.log(name)

  // good
  if (true) {
      alert(name);
  }
  console.log(name);

4. 模板不做逻辑处理，尽量在数据源处理逻辑；

  // bad
  <el-table-column width="180px" label="状态">
     <template slot-scope="scope">
       <span v-if="scope.row.status==-99">转单</span>
       <span v-if="scope.row.status==-1">放弃</span>
       <span v-if="scope.row.status===0">已分配</span>
       <span v-if="scope.row.status==1">已完成</span>
       <span v-if="scope.row.status==2">待审核</span>
       <span v-if="scope.row.status==3">审核通过</span>
       <span v-if="scope.row.status==-3">审核不通过</span>
       <span v-if="scope.row.status==4">审核中</span>
     </template>
  </el-table-column>

  // good
	list.forEach(item => {
     item.StatusStr = findName(this.status, item.status);
  });

CSS 规范

通用规范

1. 统一使用"-"连字符
2. 省略值为 0 时的单位

 // bad
  padding-bottom: 0px;
  margin: 0em;

 // good
  padding-bottom: 0;
  margin: 0;

1. 如果 CSS 可以做到，就不要使用 JS

2. 建议并适当缩写值，提高可读性，特殊情况除外

   “建议并适当”是因为缩写总是会包含一系列的值，而有时候我们并不希望设置某一值，反而造成了麻烦，那么这时候你可以不缩写，而是分开写。

   当然，在一切可以缩写的情况下，请务必缩写，它最大的好处就是节省了字节，便于维护，并使阅读更加一目了然。

  // bad
  .box{
    border-top-style: none;
    font-family: palatino, georgia, serif;
    font-size: 100%;
    line-height: 1.6;
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0;
  }

  // good
  .box{
    border-top: 0;
    font: 100%/1.6 palatino, georgia, serif;
    padding: 0 1em 2em;
  }

1. 声明应该按照下表的顺序

左到右，从上到下

显示属性	自身属性	文本属性和其他修饰
display	width	font
visibility	height	text-align
position	margin	text-decoration
float	padding	vertical-align
clear	border	white-space
list-style	overflow	color
top	min-width	background

  // bad
  .box {
    font-family: 'Arial', sans-serif;
    border: 3px solid #ddd;
    left: 30%;
    position: absolute;
    text-transform: uppercase;
    background-color: #eee;
    right: 30%;
    isplay: block;
    font-size: 1.5rem;
    overflow: hidden;
    padding: 1em;
    margin: 1em;
  }

  // good
  .box {
    display: block;
    position: absolute;
    left: 30%;
    right: 30%;
    overflow: hidden;
    margin: 1em;
    padding: 1em;
    background-color: #eee;
    border: 3px solid #ddd;
    font-family: 'Arial', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
  }

1. 元素选择器应该避免在 scoped 中出现

   官方文档说明：在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。

2. 分类的命名方法

   使用单个字母加上"-"为前缀

   布局（grid）（.g-）；

   模块（module）（.m-）；

   元件（unit）（.u-）；

   功能（function）（.f-）；

   皮肤（skin）（.s-）；

   状态（.z-）。

3. 统一语义理解和命名

布局（.g-）

语义	命名	简写
文档	doc	doc
头部	head	hd
主体	body	bd
尾部	foot	ft
主栏	main	mn
主栏子容器	mainc	mnc
侧栏	side	sd
侧栏子容器	sidec	sdc
盒容器	wrap/box	wrap/box

模块（.m-）、元件（.u-）

语义	命名	简写
导航	nav	nav
子导航	subnav	snav
面包屑	crumb	crm
菜单	menu	menu
选项卡	tab	tab
标题区	head/title	hd/tt
内容区	body/content	bd/ct
列表	list	lst
表格	table	tb
表单	form	fm
热点	hot	hot
排行	top	top
登录	login	log
标志	logo	logo
广告	advertise	ad
搜索	search	sch
幻灯	slide	sld
提示	tips	tips
帮助	help	help
新闻	news	news
下载	download	dld
注册	regist	reg
投票	vote	vote
版权	copyright	cprt
结果	result	rst
标题	title	tt
按钮	button	btn
输入	input	ipt

功能（.f-）

语义	命名	简写
浮动清除	clearboth	cb
向左浮动	floatleft	fl
向右浮动	floatright	fr
内联块级	inlineblock	ib
文本居中	textaligncenter	tac
文本居右	textalignright	tar
文本居左	textalignleft	tal
垂直居中	verticalalignmiddle	vam
溢出隐藏	overflowhidden	oh
完全消失	displaynone	dn
字体大小	fontsize	fs
字体粗细	fontweight	fw

皮肤（.s-）

语义	命名	简写
字体颜色	fontcolor	fc
背景	background	bg
背景颜色	backgroundcolor	bgc
背景图片	backgroundimage	bgi
背景定位	backgroundposition	bgp
边框颜色	bordercolor	bdc

状态（.z-）

语义	命名	简写
选中	selected	sel
当前	current	crt
显示	show	show
隐藏	hide	hide
打开	open	open
关闭	close	close
出错	error	err
不可用	disabled	dis

sass 规范

1. 当使用 Sass 的嵌套功能的时候，重要的是有一个明确的嵌套顺序，以下内容是一个 SCSS 块应具有的顺序。
   1. 当前选择器的样式属性
   2. 父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
   3. 伪类元素 (:before and :after)
   4. 父级选择器的声明样式 (.selected, .active, .enlarged etc.)
   5. 用 Sass 的上下文媒体查询
   6. 子选择器作为最后的部分

  .product-teaser {
    // 1. Style attributes
    display: inline-block;
    padding: 1rem;
    background-color: whitesmoke;
    color: grey;

    // 2. Pseudo selectors with parent selector
    &:hover {
      color: black;
    }

    // 3. Pseudo elements with parent selector
    &:before {
      content: "";
      display: block;
      border-top: 1px solid grey;
    }

    &:after {
      content: "";
      display: block;
      border-top: 1px solid grey;
    }

    // 4. State classes with parent selector
    &.active {
      background-color: pink;
      color: red;

      // 4.2. Pseuso selector in state class selector
      &:hover {
        color: darkred;
      }
    }

    // 5. Contextual media queries
    @media screen and (max-width: 640px) {
      display: block;
      font-size: 2em;
    }

    // 6. Sub selectors
    > .content > .title {
      font-size: 1.2em;

      // 6.5. Contextual media queries in sub selector
      @media screen and (max-width: 640px) {
        letter-spacing: 0.2em;
        text-transform: uppercase;
      }
    }
  }

特殊规范

• 对用页面级组件样式，应该是有作用域的
• 对于公用组件或者全局组件库，我们应该更倾向于选用基于 class 的 BEM 策略

  <style lang='scss'></style> // bad

  <!-- 使用 scoped 作用域 -->
  <style lang='scss' scoped></style> // good

  <!-- 使用 BEM 约定 -->
  <style> // good
  .c-Button {
    border: none;
    border-radius: 2px;
  }

  .c-Button--close {
    background-color: red;
  }
  </style>

谨慎使用 (有潜在危险的模式)

隐性的父子组件通信

应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop。

正例：

Vue.component('TodoItem', {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  template: `
    <input
      :value="todo.text"
      @input="$emit('input', $event.target.value)"
    >
  `
})

反例：

Vue.component('TodoItem', {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  methods: {
    removeTodo () {
      var vm = this
      vm.$parent.todos = vm.$parent.todos.filter(function (todo) {
        return todo.id !== vm.todo.id
      })
    }
  },
  template: `
    <span>
      {{ todo.text }}
      <button @click="removeTodo">
        X
      </button>
    </span>
  `
})

附录

推荐使用vs code进行前端编码，规定Tab大小为2个空格

1.vs code配置（待完善）

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true, //每次保存自动格式化
  "editor.lineNumbers": "on", //开启行数提示
  "files.autoSave": "afterDelay",
  "html.format.indentHandlebars": false,
  "prettier.semi": true, // 去掉代码结尾的分号
  "prettier.singleQuote": false, //使用带引号替代双引号
  "prettier.tabWidth": 2,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.experimental.templateInterpolationService": false,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": true //属性强制折行对齐
    },
    "prettier": {
      "semi": false,
      "singleQuote": true
    }
  },
  "git.confirmSync": false,
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  "eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
  "eslint.validate": [
    "javascript",
    "html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.options": {
    "plugins": [
      "html"
    ]
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[less]": {
    "editor.defaultFormatter": "michelemelluso.code-beautifier"
  },
  "workbench.activityBar.visible": true,
  "workbench.statusBar.visible": true,
  "window.zoomLevel": 0,
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "gitlens.advanced.fileHistoryFollowsRenames": false,
  "gitlens.advanced.messages": {
    "suppressShowKeyBindingsNotice": true
  },
  "files.associations": {
    "*.vue": "vue"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "liveServer.settings.port": 8080,
  "liveServer.settings.donotShowInfoMsg": true,
  "dart.sdkPath": "E:\\Dart\\dart-sdk",
  "workbench.colorTheme": "Visual Studio Dark",
  "editor.fontSize": 16
}
}

2.vs code 插件

• Auto Close Tag
• Path Intellisense
• Prettier
• Vetur
• vscode-icons

最后提醒一句，制定一个符合自己公司情况的开发规范是很简单的，重要的是我们能够认识到规范的重要性，并坚持规范的开发习惯。