feature(eslint): 添加规则

.eslintrc.js

@@ -1,6 +1,7 @@
 module.exports = {
+  root: true, // 将eslint配置限制在当前配置文件所在目录下
   // 继承其他规则
-  'extends': ['eslint:recommended', 'plugin:vue/essential'],
+  'extends': ['eslint:recommended', 'plugin:vue/recommended'],
   // 解析选项
   'parserOptions': {
     'ecmaVersion': 6, // ES 语法版本
@@ -10,7 +11,7 @@ module.exports = {
     }
   },
   plugins: [
-    '@stylistic/js'
+    // '@stylistic/js'
   ],
   // 具体检查规则
   'rules': {
@@ -23,15 +24,51 @@ module.exports = {
     'prefer-const': 'error', // 强制使用 const 定义常量
     'indent': ['error', 2], // 缩进 2 个空格
     // '@stylistic/js/indent': ['error', 2], // 缩进 2 个空格
+    'no-mixed-spaces-and-tabs': 'error', // 禁止混用空格和 tab缩进
     'quotes': ['error', 'single'], // 强制使用单引号
     "spaced-comment": ["error", "always"], // 注释后面需要有空格
-    'space-before-blocks': 'error', // 代码块前面(if function等的大括号之前)需要有空格
-    'space-before-function-paren': ['error', 'always'], // 函数括号前面需要有空格
-    "space-infix-ops": 'error', // 操作符前后需要有空格
+    "prefer-template": "error", // 字符串拼接使用模版字符串 'hello' + world => `hello${world}`
+    // "template-curly-spacing": ["error", "never"], // 模版字符串中{}前后不能有空格 `hello${ world }` => `hello${world}`
+    "key-spacing": ["error", { mode: "strict" }], // 对象字面量中冒号的前后空格 { "foo"  :    42 } => { "foo": 42 }
+    "comma-spacing": ["error", { "before": false, "after": true }], // 逗号前面不能有空格，后面需要有空格 [1,     2   ,  3  ,4] => [1, 2, 4, 4]
+    "array-bracket-spacing": ["error","always"], // 数组前后需要有空格  [ 1,2   ] => [ 1,2 ]
+    "object-curly-spacing": ["error","always"], // 对象前后需要有空格 {   a:b   } => { a:b }
+    "no-whitespace-before-property": "error", // 禁止属性前有空格  obj  .  foo => obj.foo
+    "func-call-spacing": ["error", "never"], // 函数调用时，函数名与()之间不能有空格 fn  () => fn()
+    'space-before-function-paren': ['error', 'always'], // 函数左括号空格 function name(){} => function name (){}
+    // "rest-spread-spacing": "error", // 展开运算符前后需要有空格 ...arr => ... arr
+    'space-before-blocks': 'error', // 代码块前面(if function等的大括号之前)需要有空格 function name(){} => function name() {}
+    "space-infix-ops": 'error', // 操作符前后需要有空格 a=0 => a = 0
+    'arrow-spacing': ['error', { before: true, after: true }], // 箭头函数前后需要有空格
+    "brace-style": ["error", "1tbs", { "allowSingleLine": true }], // if else 等的大括号风格
     "no-irregular-whitespace": 'error', // 不能有不规则的空格 https://eslint.nodejs.cn/docs/latest/rules/no-irregular-whitespace
     "no-trailing-spaces": 'error', // 一行结束后面不要有空格
-    "array-bracket-spacing": ["error","always"], // 数组前后需要有空格
-    "object-curly-spacing": ["error","always"], // 对象前后需要有空格
+    "padded-blocks": ["error", "never"], // 代码块内部前后不要有空行
+    "semi-spacing": ["error", { "before": false, "after": true }], // 分号前面不能有空格，后面需要有空格 var foo   ;   var bar; => var foo; var bar;
+    'no-multiple-empty-lines': [ 'error', { max: 1 }], // 最多只能有一行空行
+    'no-return-assign': ['error', 'except-parens'], // 禁止在 return 语句中使用赋值语句
+    'no-self-assign': 'error', // 禁止自我赋值
+    'no-self-compare': 'error', // 禁止自身比较
+    // "newline-per-chained-call": ["error", { "ignoreChainWithDepth": 1 }], // 链式调用时，每个调用都需要换行
+    "no-duplicate-imports": "error", // 禁止重复 import
+    // 以下规则都是基于plugin:vue/recommended的默认值
+    'vue/max-attributes-per-line': [
+      'error',
+      {
+        singleline: 4, // 单行最多 4 个属性
+        multiline: {
+          max: 1, // 多行最多 1 个属性
+          allowFirstLine: false, // 不允许属性与组件名称在同一行
+        },
+      },
+    ],
+    'vue/singleline-html-element-content-newline': 'error', // 单行元素内容之前和之后需要换行
+    'vue/multiline-html-element-content-newline': 'error', // 多行元素内容之前和之后需要换行
+    'vue/html-indent': ['error', 2], // 缩进 2 个空格
+    'vue/html-closing-bracket-newline': ['error', { // 强制或禁止在自闭合标签之前换行
+      'singleline': 'never',
+      'multiline': 'always',
+    }],
   },
   env: {
     browser: true,