QQs'Note

# 正例
data-management-system
# 反例
data_management-system/dataManagementSystem

# 正例
src/styles/components/images/utils/layouts/demo-styles/
# 反例
src/styles/components/images/utils/layouts/demo_styles/

# 正例
render-dom.js/reset.css/company.png
# 反例
renderDom.js/UserManager.html

<!-- 正例 -->
<div class="box"></div>
<!-- 反例 -->
<div class='box'></div>

// 正例
.heavy {
  font-weight: 800;
}
.important { 
  color: red; 
}

// 反例
.fw-800 {
  font-weight: 800;
}
.red {
  color: red; 
}

// 正例
.content > .title {
   font-size: 2rem;
 }

// 反例
.content .title {
  font-size: 2rem;
}

// 正例
div {
  padding-bottom: 0; 
  margin: 0; 
}
// 反例
div {
  padding-bottom: 0px; 
  margin: 0em;
}

@import "mixins/size.less"; 

@default-text-color: #333; 

.page {
  width: 960px; 
  margin: 0 auto; 
}

// 方法名、参数名、成员变量、局部变量都统一使用小驼峰 lowerCamelCase 风格
function getHttpMessage(inputUserId) {
  let localValue = inputUserId;
  return false
}

// 常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚， 不要嫌名字长
const MAX_STOCK_COUNT = 0;

// this 的转换命名
const _this = this;

const fn = (name, age) => {
  console.log('name=' + name);
  console.log('age=' + age);
}

// 优化之后

const fn = ( obj ) => {
  console.log('name=' + obj.name);
  console.log('age=' + obj.age);
}

add / update / delete / detail / get 
附： 函数方法常用的动词: 
get 获取/set 设置, 
add 增加/remove 删除, 
create 创建/destroy 销毁, 
start 启动/stop 停止, 
open 打开/close 关闭, 
read 读取/write 写入, 
load 载入/save 保存,
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 折叠, 
enter 进入/exit 退出,
abort 放弃/quit 离开, 
obsolete 废弃/depreciate 废旧, 
collect 收集/aggregate 聚集

// undefined 判断
if (typeof person === 'undefined') {
  doSomething();
}

// 字符串 统一使用单引号('')，不使用双引号("")。
// 这在创建 HTML 字符串非常有好处 vscode 配置 
// settings.json 或者 .eslintrc.js 或者 .prettierrc.json
let str = 'foo';
let testDiv = '<div id="test"></div>';

// components/base-input.vue

// components/todo-list.vue
// components/todo-list-item.vue

// 正例
export default {
  name: 'TodoItem'
};

// 反例
export default {
  name: 'Todo',
}
export default {
  name: 'todo-item',
}

<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent />
<Row><table :column="data"/></Row>

<!-- 反例 -->
<my-component /> <row><table :column="data"/></row>

props: {
  // 组件状态，用于控制组件的颜色
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'succ',
        'info',
        'error'
      ].indexOf(value) !== -1
    }
  },
  // 用户级别，用于显示皇冠个数
  userLevel: {
    type: String,
    required: true
  }
}

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

# @see: http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
end_of_line = lf # 控制换行类型(lf | cr | crlf)
insert_final_newline = true # 始终在文件末尾插入一个新行
indent_style = tab # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
max_line_length = 130 # 最大行长度

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off # 关闭最大行长度限制
trim_trailing_whitespace = false # 关闭末尾空格修剪