通用

缩进两个空格
等号两边留有空格
文件名为  my-component
组件名

React

文件名：帕斯卡命名 MyComponents
ESlint  

<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
/>
<Foo bar="bar" />  // 能放一行的放一行
// 多行属性采用缩进
<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
>
  <Quux />
</Foo>
//JSX的属性都采用双引号，其他的JS都使用单引号：jsx-quotes。
// bad
<Foo bar='bar' />

// good
<Foo bar="bar" />

// bad
<Foo style={{ left: "20px" }} />

// good
<Foo style={{ left: '20px' }} />
//始终在自闭和标签前添加一个空格
<Foo />
//属性名称始终使用驼峰命名法。
// bad
<Foo
  UserName="hello"
  phone_number={12345678}
/>

// good
<Foo
  userName="hello"
  phoneNumber={12345678}
/>
//当属性值等于true的时候，省略该属性的赋值
// good
<Foo
  hidden
/>
//在 render 方法中事件的回调函数，应该在构造函数中进行bind绑定。 eslint: react/jsx-no-bind。
//为什么这样做? 在 render 方法中的 bind 调用每次调用 render 的时候都会创建一个全新的函数。
// bad
class extends React.Component {
  onClickDiv() {
    // do stuff
  }

  render() {
    return <div onClick={this.onClickDiv.bind(this)} />
  }
}

// good
class extends React.Component {
  constructor(props) {
    super(props);

    this.onClickDiv = this.onClickDiv.bind(this);
  }

  onClickDiv() {
    // do stuff
  }

  render() {
    return <div onClick={this.onClickDiv} />
  }
//怎么定义propTypes, defaultProps, contextTypes等
import React, { PropTypes } from 'react';

const propTypes = {
  id: PropTypes.number.isRequired,
  url: PropTypes.string.isRequired,
  text: PropTypes.string,
};

const defaultProps = {
  text: 'Hello World',
};

class Link extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>
  }
}

Link.propTypes = propTypes;
Link.defaultProps = defaultProps;

export default Link;

Vue

一、Vie编码基础

程序员写好看的代码，不亚于写一行好看的字
好看的代码总是让人心旷神怡，
不好，不规范的代码，让人看了想说mmp，
那我们就来学习一下规范的代码怎么写的吧

以下来自B站的学习视频：前端必备-阿里大厂前端开发规范！

vue项目规范以 Vue 官方规范（https://cn.vuejs.org/v2/style-guide/）中的A规范为基础

(一) 组件规范

1、组件名为多个单词

组件名应该始终是多个单词的，且命名规范为 KebabCase格式

这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。

正例：

export default {
	name: 'TodoItem',
    ...}

反例：

export default {
  name: 'Todo',
  // ...}Vue.component('todo', {
  // ...})

2、组件名称为 pascal-case 格式

正例：

my-component.vue

反例：

myComponent.vue

3、为基础文件名为 base开头，使用完整单词

正例：

base-button.vue

反例：

MyButton.vue

4、和父组件紧密契合的子组件以父组件名为前缀名

父组件：todo-list.vue

正例：

todo-list-item.vue
todo-list-button.vue

反例：

todoItem.vue

5、在 template 模板中使用组件，应使用 PascalCase 模式，并且使用自闭合组件

正例：

<!-- 在单文件组件和字符串模板中 --><MyComponent/>
    <!-- 在 DOM 模板中 或者 在所有地方 --><my-component></my-component>

反例：

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

6、组件的 data 必须是一个函数。

正例：

// In a .vue fileexport default {
  data () {
    return {
      foo: 'bar'
    }
  }}

反例：

export default {
  data: {
    foo: 'bar'
  }}

7、Props定义应该尽量详细

命名：使用cameCase驼峰命名

必须指定类型

必须加上注释，表明其含义

必须加上require或者 default，两者二选一

如果业务需要，必须加上 validator验证

正例：

props: {
	// 组件状态，用于控制组件的颜色
    status: {
		type: String,
        required: true,
        validator: function (value) {
			return {
				'succ',
                'info',
                'error'
            }.indexOf(value) !== -1
        }
    }
}

8、为组件样式设置作用域

写CSS样式时，加上 作用域 scope

正例：

<stype scoped>
    .btn-close {
		font-size: 16px;
    }
</style>

9、如果特性元素过多，应主动换行

正例：

<MyConponent foo="a" bar="b"
             baz="z" />

(二) 模板中使用简单的表达式

组件模板中应该只包含简单的表达式，如果有复杂的表达式，应该使用计算属性或法

正例：

<!-- 在模板中 -->
{{ normalizedFullName }}
// 复杂表达式已经移入一个计算属性
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

(三) 指令使用缩写形式

指令缩写 (用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。

(四) 标签顺序保持一致

<template>...</template>
<script> ... </script>
<style> ... </style>

(五) script标签内部解构顺序

components –> props –> data –> computed –> watch –> filter –> 钩子函数 –> methods