chore: update ESLint (#9124)

* chore: update ESLint

* chore: update eslint ignore

.eslintignore

@@ -4,3 +4,4 @@ src/utils/date.js
 node_modules
 lib
 coverage
+*.md

.eslintrc

@@ -6,8 +6,11 @@
     "expect": true,
     "sinon": true
   },
-  "plugins": ['vue','json'],
-  "extends": 'elemefe',
+  "plugins": ["html", "json"],
+  "extends": "elemefe",
+  "rules": {
+    "no-restricted-globals": ["error", "event", "fdescribe"]
+  },
   "parserOptions": {
     "ecmaFeatures": {
       "experimentalObjectRestSpread": true,

build/bin/new.js

@@ -111,8 +111,8 @@ fileSave(path.join(__dirname, '../../components.json'))
 // 创建 package
 Files.forEach(file => {
   fileSave(path.join(PackagePath, file.filename))
-  .write(file.content, 'utf8')
-  .end('\n');
+    .write(file.content, 'utf8')
+    .end('\n');
 });
 
 // 添加到 nav.config.json
@@ -123,8 +123,8 @@ Object.keys(navConfigFile).forEach(lang => {
   groups[groups.length - 1].list.push({
     path: `/${componentname}`,
     title: lang === 'zh-CN' && componentname !== chineseName
-        ? `${ComponentName} ${chineseName}`
-        : ComponentName
+      ? `${ComponentName} ${chineseName}`
+      : ComponentName
   });
 });
 

package.json

@@ -24,7 +24,7 @@
     "dist": "npm run clean && npm run build:file && npm run lint && cooking build -c build/cooking.conf.js,build/cooking.common.js,build/cooking.component.js -p && npm run build:utils && npm run build:umd && npm run build:theme",
     "dist:all": "node build/bin/build-all.js && npm run build:theme",
     "i18n": "node build/bin/i18n.js",
-    "lint": "eslint src/**/* test/**/* packages/**/*.{js,vue} build/**/* --quiet",
+    "lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet",
     "pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh",
     "pub:all": "npm run dist:all && lerna publish --skip-git && git commit -am 'publish independent packages' && git push eleme dev",
     "test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
@@ -81,7 +81,9 @@
     "cross-env": "^3.1.3",
     "css-loader": "^0.28.7",
     "es6-promise": "^4.0.5",
-    "eslint": "^3.10.2",
+    "eslint": "4.14.0",
+    "eslint-loader": "^1.9.0",
+    "eslint-plugin-html": "^4.0.1",
     "eslint-plugin-json": "^1.2.0",
     "extract-text-webpack-plugin": "^3.0.1",
     "file-loader": "^1.1.5",

packages/breadcrumb/src/breadcrumb-item.vue

@@ -33,7 +33,7 @@
         link.addEventListener('click', _ => {
           let to = this.to;
           self.replace ? self.$router.replace(to)
-                       : self.$router.push(to);
+            : self.$router.push(to);
         });
       }
     }

packages/cascader/src/menu.vue

@@ -314,17 +314,17 @@
             {items}
             {
               isHoveredMenu
-              ? (<svg
-                ref="hoverZone"
-                style={{
-                  position: 'absolute',
-                  top: 0,
-                  height: '100%',
-                  width: '100%',
-                  left: 0,
-                  pointerEvents: 'none'
-                }}
-              ></svg>) : null
+                ? (<svg
+                  ref="hoverZone"
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    height: '100%',
+                    width: '100%',
+                    left: 0,
+                    pointerEvents: 'none'
+                  }}
+                ></svg>) : null
             }
           </ul>
         );

packages/checkbox/src/checkbox-button.vue

@@ -79,7 +79,7 @@
         get() {
           return this._checkboxGroup
             ? this.store : this.value !== undefined
-            ? this.value : this.selfModel;
+              ? this.value : this.selfModel;
         },
 
         set(val) {

packages/checkbox/src/checkbox.vue

@@ -81,7 +81,7 @@
         get() {
           return this.isGroup
             ? this.store : this.value !== undefined
-            ? this.value : this.selfModel;
+              ? this.value : this.selfModel;
         },
 
         set(val) {

packages/col/src/col.js

@@ -42,8 +42,8 @@ export default {
       if (this[prop] || this[prop] === 0) {
         classList.push(
           prop !== 'span'
-          ? `el-col-${prop}-${this[prop]}`
-          : `el-col-${this[prop]}`
+            ? `el-col-${prop}-${this[prop]}`
+            : `el-col-${this[prop]}`
         );
       }
     });
@@ -56,8 +56,8 @@ export default {
         Object.keys(props).forEach(prop => {
           classList.push(
             prop !== 'span'
-            ? `el-col-${size}-${prop}-${props[prop]}`
-            : `el-col-${size}-${props[prop]}`
+              ? `el-col-${size}-${prop}-${props[prop]}`
+              : `el-col-${size}-${props[prop]}`
           );
         });
       }

packages/collapse/src/collapse.vue

@@ -50,7 +50,7 @@
           this.setActiveNames(
             (this.activeNames[0] || this.activeNames[0] === 0) &&
             this.activeNames[0] === item.name
-            ? '' : item.name
+              ? '' : item.name
           );
         } else {
           let activeNames = this.activeNames.slice(0);

packages/date-picker/src/basic/time-spinner.vue

@@ -108,7 +108,7 @@
 
     props: {
       date: {},
-      defaultValue: {},  // reserved for future use
+      defaultValue: {}, // reserved for future use
       showSeconds: {
         type: Boolean,
         default: true

packages/date-picker/src/panel/date-range.vue

@@ -588,10 +588,10 @@
           value && value[0] && value[1] &&
           isDate(value[0]) && isDate(value[1]) &&
           value[0].getTime() <= value[1].getTime() && (
-            typeof this.disabledDate === 'function'
+          typeof this.disabledDate === 'function'
             ? !this.disabledDate(value[0]) && !this.disabledDate(value[1])
             : true
-          );
+        );
       }
     },
 

packages/date-picker/src/panel/date.vue

@@ -369,7 +369,7 @@
             event.stopPropagation();
             event.preventDefault();
           }
-          if (keyCode === 13) {    // Enter
+          if (keyCode === 13) { // Enter
             this.$emit('pick', this.date, false);
           }
         }
@@ -431,8 +431,8 @@
       isValidValue(value) {
         return value && !isNaN(value) && (
           typeof this.disabledDate === 'function'
-          ? !this.disabledDate(value)
-          : true
+            ? !this.disabledDate(value)
+            : true
         );
       }
     },

packages/date-picker/src/panel/time-range.vue

@@ -227,7 +227,7 @@
         const keyCode = event.keyCode;
         const mapping = { 38: -1, 40: 1, 37: -1, 39: 1 };
 
-         // Left or Right
+        // Left or Right
         if (keyCode === 37 || keyCode === 39) {
           const step = mapping[keyCode];
           this.changeSelectionRange(step);

packages/date-picker/src/picker.vue

@@ -173,8 +173,8 @@ const TYPE_VALUE_RESOLVER_MAP = {
       let date = formatDate(trueDate, format);
 
       date = /WW/.test(date)
-            ? date.replace(/WW/, week < 10 ? '0' + week : week)
-            : date.replace(/W/, week);
+        ? date.replace(/WW/, week < 10 ? '0' + week : week)
+        : date.replace(/W/, week);
       return date;
     },
     parser(text) {
@@ -349,7 +349,7 @@ export default {
       pickerVisible: false,
       showClose: false,
       userInput: null,
-      valueOnOpen: null,  // value when picker opens, used to determine whether to emit change
+      valueOnOpen: null, // value when picker opens, used to determine whether to emit change
       unwatchPickerOptions: null
     };
   },

packages/dropdown/src/dropdown.vue

@@ -251,13 +251,13 @@
       let triggerElm = !splitButton
         ? this.$slots.default
         : (<el-button-group>
-            <el-button type={type} size={dropdownSize} nativeOn-click={handleMainButtonClick}>
-              {this.$slots.default}
-            </el-button>
-            <el-button ref="trigger" type={type} size={dropdownSize} class="el-dropdown__caret-button">
-              <i class="el-dropdown__icon el-icon-arrow-down"></i>
-            </el-button>
-          </el-button-group>);
+          <el-button type={type} size={dropdownSize} nativeOn-click={handleMainButtonClick}>
+            {this.$slots.default}
+          </el-button>
+          <el-button ref="trigger" type={type} size={dropdownSize} class="el-dropdown__caret-button">
+            <i class="el-dropdown__icon el-icon-arrow-down"></i>
+          </el-button>
+        </el-button-group>);
 
       return (
         <div class="el-dropdown" v-clickoutside={hide}>

packages/pagination/src/pagination.js

@@ -97,8 +97,8 @@ export default {
       render(h) {
         return (
           this.$parent.$slots.default
-          ? this.$parent.$slots.default[0]
-          : ''
+            ? this.$parent.$slots.default[0]
+            : ''
         );
       }
     },

packages/table/src/table-body.js

@@ -116,12 +116,12 @@ export default {
                   !this.fixed && this.layout.scrollY && this.layout.gutterWidth ? <td class="gutter" /> : ''
                 }
               </tr>,
-                this.store.states.expandRows.indexOf(row) > -1
+              this.store.states.expandRows.indexOf(row) > -1
                 ? (<tr>
-                    <td colspan={ this.columns.length } class="el-table__expanded-cell">
-                      { this.table.renderExpanded ? this.table.renderExpanded(h, { row, $index, store: this.store }) : ''}
-                    </td>
-                  </tr>)
+                  <td colspan={ this.columns.length } class="el-table__expanded-cell">
+                    { this.table.renderExpanded ? this.table.renderExpanded(h, { row, $index, store: this.store }) : ''}
+                  </td>
+                </tr>)
                 : ''
               ]
             ).concat(

packages/table/src/table-column.js

@@ -71,7 +71,7 @@ const forced = {
     renderCell: function(h, { row, store }, proxy) {
       const expanded = store.states.expandRows.indexOf(row) > -1;
       return <div class={ 'el-table__expand-icon ' + (expanded ? 'el-table__expand-icon--expanded' : '') }
-                  on-click={ () => proxy.handleExpandClick(row) }>
+        on-click={ () => proxy.handleExpandClick(row) }>
         <i class='el-icon el-icon-arrow-right'></i>
       </div>;
     },

packages/table/src/table-footer.js

@@ -55,25 +55,25 @@ export default {
         </colgroup>
         <tbody class={ [{ 'has-gutter': this.hasGutter }] }>
           <tr>
-          {
-            this._l(this.columns, (column, cellIndex) =>
-              <td
-                colspan={ column.colSpan }
-                rowspan={ column.rowSpan }
-                class={ [column.id, column.headerAlign, column.className || '', this.isCellHidden(cellIndex, this.columns) ? 'is-hidden' : '', !column.children ? 'is-leaf' : '', column.labelClassName] }>
-                <div class={ ['cell', column.labelClassName] }>
-                {
-                  this.summaryMethod ? this.summaryMethod({ columns: this.columns, data: this.store.states.data })[cellIndex] : sums[cellIndex]
-                }
-                </div>
-              </td>
-            )
-          }
-          {
-            this.hasGutter
-              ? <td class="gutter" style={{ width: this.layout.scrollY ? this.layout.gutterWidth + 'px' : '0' }}></td>
-              : ''
-          }
+            {
+              this._l(this.columns, (column, cellIndex) =>
+                <td
+                  colspan={ column.colSpan }
+                  rowspan={ column.rowSpan }
+                  class={ [column.id, column.headerAlign, column.className || '', this.isCellHidden(cellIndex, this.columns) ? 'is-hidden' : '', !column.children ? 'is-leaf' : '', column.labelClassName] }>
+                  <div class={ ['cell', column.labelClassName] }>
+                    {
+                      this.summaryMethod ? this.summaryMethod({ columns: this.columns, data: this.store.states.data })[cellIndex] : sums[cellIndex]
+                    }
+                  </div>
+                </td>
+              )
+            }
+            {
+              this.hasGutter
+                ? <td class="gutter" style={{ width: this.layout.scrollY ? this.layout.gutterWidth + 'px' : '0' }}></td>
+                : ''
+            }
           </tr>
         </tbody>
       </table>

packages/table/src/table-header.js

@@ -99,47 +99,47 @@ export default {
                 style={ this.getHeaderRowStyle(rowIndex) }
                 class={ this.getHeaderRowClass(rowIndex) }
               >
-              {
-                this._l(columns, (column, cellIndex) =>
-                  <th
-                    colspan={ column.colSpan }
-                    rowspan={ column.rowSpan }
-                    on-mousemove={ ($event) => this.handleMouseMove($event, column) }
-                    on-mouseout={ this.handleMouseOut }
-                    on-mousedown={ ($event) => this.handleMouseDown($event, column) }
-                    on-click={ ($event) => this.handleHeaderClick($event, column) }
-                    style={ this.getHeaderCellStyle(rowIndex, cellIndex, columns, column) }
-                    class={ this.getHeaderCellClass(rowIndex, cellIndex, columns, column) }>
-                    <div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : '', column.labelClassName] }>
-                    {
-                      column.renderHeader
-                        ? column.renderHeader.call(this._renderProxy, h, { column, $index: cellIndex, store: this.store, _self: this.$parent.$vnode.context })
-                        : column.label
-                    }
-                    {
-                      column.sortable
-                        ? <span class="caret-wrapper" on-click={ ($event) => this.handleSortClick($event, column) }>
-                            <i class="sort-caret ascending" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
-                            </i>
-                            <i class="sort-caret descending" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
-                            </i>
-                          </span>
-                        : ''
-                    }
-                    {
-                      column.filterable
-                         ? <span class="el-table__column-filter-trigger" on-click={ ($event) => this.handleFilterClick($event, column) }><i class={ ['el-icon-arrow-down', column.filterOpened ? 'el-icon-arrow-up' : ''] }></i></span>
-                        : ''
-                    }
-                    </div>
-                  </th>
-                )
-              }
-              {
-                this.hasGutter
-                  ? <th class="gutter" style={{ width: this.layout.scrollY ? this.layout.gutterWidth + 'px' : '0' }}></th>
-                  : ''
-              }
+                {
+                  this._l(columns, (column, cellIndex) =>
+                    <th
+                      colspan={ column.colSpan }
+                      rowspan={ column.rowSpan }
+                      on-mousemove={ ($event) => this.handleMouseMove($event, column) }
+                      on-mouseout={ this.handleMouseOut }
+                      on-mousedown={ ($event) => this.handleMouseDown($event, column) }
+                      on-click={ ($event) => this.handleHeaderClick($event, column) }
+                      style={ this.getHeaderCellStyle(rowIndex, cellIndex, columns, column) }
+                      class={ this.getHeaderCellClass(rowIndex, cellIndex, columns, column) }>
+                      <div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : '', column.labelClassName] }>
+                        {
+                          column.renderHeader
+                            ? column.renderHeader.call(this._renderProxy, h, { column, $index: cellIndex, store: this.store, _self: this.$parent.$vnode.context })
+                            : column.label
+                        }
+                        {
+                          column.sortable
+                            ? <span class="caret-wrapper" on-click={ ($event) => this.handleSortClick($event, column) }>
+                              <i class="sort-caret ascending" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
+                              </i>
+                              <i class="sort-caret descending" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
+                              </i>
+                            </span>
+                            : ''
+                        }
+                        {
+                          column.filterable
+                            ? <span class="el-table__column-filter-trigger" on-click={ ($event) => this.handleFilterClick($event, column) }><i class={ ['el-icon-arrow-down', column.filterOpened ? 'el-icon-arrow-up' : ''] }></i></span>
+                            : ''
+                        }
+                      </div>
+                    </th>
+                  )
+                }
+                {
+                  this.hasGutter
+                    ? <th class="gutter" style={{ width: this.layout.scrollY ? this.layout.gutterWidth + 'px' : '0' }}></th>
+                    : ''
+                }
               </tr>
             )
           }

packages/table/src/table-store.js

@@ -249,7 +249,7 @@ TableStore.prototype.mutations = {
       states.reserveSelection = column.reserveSelection;
     }
 
-    this.updateColumns();  // hack for dynamics insert column
+    this.updateColumns(); // hack for dynamics insert column
     this.scheduleLayout();
   },
 
@@ -259,7 +259,7 @@ TableStore.prototype.mutations = {
       _columns.splice(_columns.indexOf(column), 1);
     }
 
-    this.updateColumns();  // hack for dynamics remove column
+    this.updateColumns(); // hack for dynamics remove column
     this.scheduleLayout();
   },
 

packages/tabs/src/tab-nav.vue

@@ -175,10 +175,10 @@
         removeFocus
       } = this;
       const scrollBtn = scrollable
-      ? [
-        <span class={['el-tabs__nav-prev', scrollable.prev ? '' : 'is-disabled']} on-click={scrollPrev}><i class="el-icon-arrow-left"></i></span>,
-        <span class={['el-tabs__nav-next', scrollable.next ? '' : 'is-disabled']} on-click={scrollNext}><i class="el-icon-arrow-right"></i></span>
-      ] : null;
+        ? [
+          <span class={['el-tabs__nav-prev', scrollable.prev ? '' : 'is-disabled']} on-click={scrollPrev}><i class="el-icon-arrow-left"></i></span>,
+          <span class={['el-tabs__nav-next', scrollable.next ? '' : 'is-disabled']} on-click={scrollNext}><i class="el-icon-arrow-right"></i></span>
+        ] : null;
 
       const tabs = this._l(panes, (pane, index) => {
         let tabName = pane.name || pane.index || index;

packages/tabs/src/tabs.vue

@@ -99,15 +99,15 @@
 
       const newButton = editable || addable
         ? (
-            <span
-              class="el-tabs__new-tab"
-              on-click={ handleTabAdd }
-              tabindex="0"
-              on-keydown={ (ev) => { if (ev.keyCode === 13) { handleTabAdd(); }} }
-            >
-                <i class="el-icon-plus"></i>
-            </span>
-          )
+          <span
+            class="el-tabs__new-tab"
+            on-click={ handleTabAdd }
+            tabindex="0"
+            on-keydown={ (ev) => { if (ev.keyCode === 13) { handleTabAdd(); }} }
+          >
+            <i class="el-icon-plus"></i>
+          </span>
+        )
         : null;
 
       const navData = {

packages/upload/src/iframe-upload.vue

@@ -157,8 +157,8 @@ export default {
         </form>
         {
           drag
-          ? <upload-dragger on-file={uploadFiles} disabled={disabled}>{this.$slots.default}</upload-dragger>
-          : this.$slots.default
+            ? <upload-dragger on-file={uploadFiles} disabled={disabled}>{this.$slots.default}</upload-dragger>
+            : this.$slots.default
         }
       </div>
     );

packages/upload/src/index.vue

@@ -89,7 +89,7 @@ export default {
     },
     listType: {
       type: String,
-      default: 'text'   // text,picture,picture-card
+      default: 'text' // text,picture,picture-card
     },
     httpRequest: Function,
     disabled: Boolean,
@@ -275,16 +275,16 @@ export default {
 
     const trigger = this.$slots.trigger || this.$slots.default;
     const uploadComponent = (typeof FormData !== 'undefined' || this.$isServer)
-        ? <upload {...uploadData}>{trigger}</upload>
-        : <iframeUpload {...uploadData}>{trigger}</iframeUpload>;
+      ? <upload {...uploadData}>{trigger}</upload>
+      : <iframeUpload {...uploadData}>{trigger}</iframeUpload>;
 
     return (
       <div>
         { this.listType === 'picture-card' ? uploadList : ''}
         {
           this.$slots.trigger
-          ? [uploadComponent, this.$slots.default]
-          : uploadComponent
+            ? [uploadComponent, this.$slots.default]
+            : uploadComponent
         }
         {this.$slots.tip}
         { this.listType !== 'picture-card' ? uploadList : ''}

packages/upload/src/upload.vue

@@ -188,8 +188,8 @@ export default {
       <div {...data} tabindex="0" >
         {
           drag
-          ? <upload-dragger disabled={disabled} on-file={uploadFiles}>{this.$slots.default}</upload-dragger>
-          : this.$slots.default
+            ? <upload-dragger disabled={disabled} on-file={uploadFiles}>{this.$slots.default}</upload-dragger>
+            : this.$slots.default
         }
         <input class="el-upload__input" type="file" ref="input" name={name} on-change={handleChange} multiple={multiple} accept={accept}></input>
       </div>

src/locale/lang/ua.js

@@ -33,7 +33,7 @@ export default {
       month10: 'Жовтень',
       month11: 'Листопад',
       month12: 'Грудень',
-            // week: 'week',
+      // week: 'week',
       weeks: {
         sun: 'Нд',
         mon: 'Пн',

test/unit/specs/date-picker.spec.js

@@ -397,7 +397,7 @@ describe('DatePicker', () => {
           const today = new Date();
           const yyyy = today.getFullYear();
           const MM = ('0' + (today.getMonth() + 1)).slice(-2);
-          const dd = '01';   // first available one should be first day of month
+          const dd = '01'; // first available one should be first day of month
           const expectValue = `${dd}/${MM} ${yyyy}`;
           expect(vm.value).to.equal(expectValue);
           expect(spy.calledOnce).to.be.true;

test/unit/specs/menu.spec.js

@@ -352,9 +352,9 @@ describe('Menu', () => {
     setTimeout(_ => {
       vm.active = '2';
       vm.menus = [
-          {name: '1', description: 'happy'},
-          {name: '2', description: 'new'},
-          {name: '3', description: 'year'}
+        {name: '1', description: 'happy'},
+        {name: '2', description: 'new'},
+        {name: '3', description: 'year'}
       ];
       setTimeout(_ => {
         expect(vm.$el.querySelector('.el-menu-item.is-active').innerText).to.equal('new');

test/unit/specs/table.spec.js

@@ -45,7 +45,7 @@ describe('Table', () => {
         const ths = toArray(vm.$el.querySelectorAll('thead th'));
 
         expect(ths.map(node => node.textContent).filter(o => o))
-        .to.eql(['片名', '发行日期', '导演', '时长（分）']);
+          .to.eql(['片名', '发行日期', '导演', '时长（分）']);
         done();
       }, DELAY);
     });
@@ -1092,7 +1092,7 @@ describe('Table', () => {
         setTimeout(_ => {
           const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');
           expect(toArray(lastCells).map(node => node.textContent))
-          .to.eql(['80', '92', '92', '95', '100']);
+            .to.eql(['80', '92', '92', '95', '100']);
           done();
         }, DELAY);
       });