// bad
EntityList.vue;
entityList.vue;

// good
entity - list.vue;

// bad
components/
|- todo-list.vue
|- todo-item.vue
└─ todo-button.vue

// good
components/
|- todo-list.vue
|- todo-list-item.vue
└─ todo-list-item-button.vue

// bad
export default {
	data: () => ({
		foo: "bar",
	}),
};

// good
export default {
	data() {
		return {
			foo: "bar",
		};
	},
};

// bad
greeting-text: String

// good
greetingText: { type: String, default: ''}

<!-- bad -->
<u-select
    class="select"
    size="s"
    @select="searchEntity($event, row)"
    @blur="searchEntity($event, row)"
    v-model="row.variableId"
    :list="variableList" />

<!-- good -->
<u-select v-model="row.variableId" :list="variableList" size="s"
    @select="searchEntity($event, row)" @blur="searchEntity($event, row)" class="select" />

export default {
	name: "",
	/*1. Vue扩展 */
	extends: "", // extends和mixins都扩展逻辑，需要重点放前面
	mixins: [],
	components: {},
	/* 2. Vue数据 */
	props: {},
	model: { prop: "", event: "" }, // model 会使用到 props
	data() {
		return {};
	},
	computed: {},
	watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
	/* 3. Vue资源 */
	filters: {},
	directives: {},
	/* 4. Vue生命周期 */
	created() {},
	mounted() {},
	destroy() {},
	/* 5. Vue方法 */
	methods: {}, // all the methods should be put here in the last
};

<template>
    <div></div>
</template>

<script>
export default {}
</script>

<style>
.app {}
</style>

// bad
import { getAllEntityList, getVariableGroup } from "@/server/api";
import { helpers } from "vuelidate/lib/validators";
import { getRepeatLine } from "@/utils/common";
import { CloseModalMixin, InvalidCheckMixin } from "@/components/common/mixins";
import VSearchSelect from "@/components/variable/v-search-select";
import EModifyModal from "@/components/entity/e-modify-modal";
import { MODIFY_MODAL_TYPE } from "@/utils/config";
import { botIdLoc, custIdLoc } from "@/utils/locs";

// good
import { CloseModalMixin, InvalidCheckMixin } from "@/components/common/mixins";
import VSearchSelect from "@/components/variable/v-search-select";
import EModifyModal from "@/components/entity/e-modify-modal";
import { getAllEntityList, getVariableGroup } from "@/server/api";
import { helpers } from "vuelidate/lib/validators";
import { MODIFY_MODAL_TYPE } from "@/utils/config";
import { getRepeatLine } from "@/utils/common";
import { botIdLoc, custIdLoc } from "@/utils/locs";

// bad
data() {
    return {
        isOpenModal: false,
        list: [],
        groupList: [],
        searchParams: { groupId: '', searchParam: '', searchType: '' },
        pageParam: { currentPage: 1, pageSize: 50 },
        totalCount: 0,
        groupId: '',
        typeList: [],
        defaultType: 'paramName'
    }
}

// good
data() {
    return {
        variableList: [],
        groupList: [],
        typeList: [],

        /*
        * 查询参数
        * 组与组之间通过空行区分
        */
        searchParams: { groupId: '', searchParam: '', searchType: '', currentPage: 1, pageSize: 50 },
        totalCount: 0,
        defaultType: '',

        isOpenModal: false
    }
}

module.exports = {
	root: true,
	env : {
		browser: true,
		node   : true,
		es2021 : true,
		es6    : true
	},
	extends: ["plugin:vue/essential"],

	plugins: ["@typescript-eslint"],

	parserOptions: { parser: "babel-eslint" },
	plugins      : ["vue"],
	// 在此处添加自定义规则
	rules        : {
		eqeqeq: "off", // 要求使用 `===` 和 `!==`

		curly: "error", // 强制所有控制语句使用一致的括号风格

		quotes: ["error", "double"], // 引号

		"arrow-parens": 0, // allow paren-less arrow functions

		"generator-star-spacing": 0, // allow async-await

		"no-unused-vars": "error", // disabled no ununsed var  `V1.1`

		"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", // no use debugger in production

		indent: [2, 4, { SwitchCase: 1 }], // 4 space for tab for perttier

		"space-before-function-paren": ["error", "never"], // no space in function name for perttier

		// # Possible Errors
		//
		"no-constant-condition": ["warn"],

		// 允许 if(...){带有花括号的空代码}
		"no-empty": ["off"],

		// 数组, 对象 逗号后面强制一空格
		"comma-spacing": ["error", { after: true }],

		// 对象单行 多行对齐模式
		"key-spacing": [
			"error",
			{
				singleLine: {},
				multiLine : { align: "colon" }
			}
		],

		// # Best Practices
		// 对象换行策略 , 如果多行, `{`和`}` 前后不能跟值
		"object-curly-newline" : ["error", { multiline: true }],
		"array-bracket-newline": ["error", { multiline: true }],

		// if后面强制花括号
		curly: ["error", "all"],

		// # Strict Mode
		// # Variables
		"no-unused-vars": ["warn"],

		// # Stylistic Issues

		quotes           : ["error", "double"],
		indent           : ["error", "tab"],
		"linebreak-style": ["error", "windows"],

		// if else try catch 换行
		"brace-style": ["error", "stroustrup", { allowSingleLine: false }],

		// 操作符周围前后必须空格
		"space-infix-ops": ["error"],
        
		// 提醒尾逗号 , 微信浏览器 , uc浏览器的问题
		"comma-dangle": ["warn", "never"]
		// # ECMAScript 6
		// # Deprecated
		// # Removed
	},
	overrides: [
		{
			files: ["*.vue"],
			rules: { "vue/multi-word-component-names": 0 }
		}
	]
};

# /node_modules/* and /bower_components/* ignored by default

# Ignore built files except build/index.js
build/*
!build/index.js

// bad
let setCount = 10;

// good
let maxCount = 10;

// bad
const serverErrorCode = {
	success: 200,
	repeat: 444,
};

// good
const SERVER_ERROR_CODE = {
	SUCCESS: 200,
	REPEAT: 444,
};

// bad
function wordClass() {}

// good
function saveWordClass() {}

// bad
class person {}

// good
class Person {}

// 单行注释，注意前面的空格
let maxCount = 123;

/**
 * 多行注释
 * /

// bad
if (condition1) {
    if (condition2) {
        ...
    }
}

// good
if (!condition1) return
if (!condition2) return
...

// bad
type: 1; // 1代表新增  2代表修改

// good
const MODIFY_TYPE = {
	ADD: 1,
	EDIT: 2,
};

type: MODIFY_TYPE.ADD;

// bad
if (name === "") {
}
if (collection.length > 0) {
}
if (notTrue === false) {
}

// good
if (!name) {
}
if (collection.length) {
}
if (notTrue) {
}

// bad
let type = typeof variable;
if (type === "object") {
	// ......
} else if (type === "number" || type === "boolean" || type === "string") {
	// ......
}

// good
switch (typeof variable) {
	case "object":
		// ......
		break;
	case "number":
	case "boolean":
	case "string":
		// ......
		break;
}

// bad
function(value) {
    return !helpers.req(value) || this.entity.entVocabularyEntries.filter(item => item.vocabularyEntryName === value).length < 2
}

// good
function(value) {
    let entVocabularyList = this.entity.entVocabularyEntries
    let repeatCount = entVocabularyList.filter(item => item.vocabularyEntryName === value).length
    return !helpers.req(value) || repeatCount < 2
}

// bad
if (modifyType === MODIFY_TYPE.ADD) {
    batchVariableAPI(data).then(() => {
        this.closeModal()
        this.$toast.show('添加变量成功')
    })
} else {
  updateVariableAPI(data).then(() => {
        this.closeModal()
        this.$toast.show('修改变量成功')
    })
}

// good
modifyType === MODIFY_TYPE.ADD ？ this._insertVariable(data) : this._updateVariable(data)

_insertVariable() {
    batchVariableAPI(data).then(() => this._successOperation('添加变量成功'))
}

_updateVariable() {
    updateVariableAPI(data).then(() => this._successOperation('修改变量成功'))
}

_successOperation(toastMsg) {
    this.closeModal()
    this.$toast.show(toastMsg)
}