feat: 新增 Eslint 功能

.editorconfig

@@ -0,0 +1,14 @@
+root = true
+
+[*]
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{ts,js,vue,css}]
+indent_size = 2

.prettierrc.js

@@ -0,0 +1,40 @@
+module.exports = {
+    // 一行最多 120 字符
+    printWidth: 120,
+    // 使用 2 个空格缩进
+    tabWidth: 2,
+    // 不使用缩进符，而使用空格
+    useTabs: false,
+    // 行尾需要有分号
+    semi: true,
+    // 使用单引号
+    singleQuote: true,
+    // 对象的 key 仅在必要时用引号
+    quoteProps: 'as-needed',
+    // jsx 不使用单引号，而使用双引号
+    jsxSingleQuote: false,
+    // 末尾需要有逗号
+    trailingComma: 'all',
+    // 大括号内的首尾需要空格
+    bracketSpacing: true,
+    // jsx 标签的反尖括号需要换行
+    jsxBracketSameLine: false,
+    // 箭头函数，只有一个参数的时候，也需要括号
+    arrowParens: 'always',
+    // 每个文件格式化的范围是文件的全部内容
+    rangeStart: 0,
+    rangeEnd: Infinity,
+    // 不需要写文件开头的 @prettier
+    requirePragma: false,
+    // 不需要自动在文件开头插入 @prettier
+    insertPragma: false,
+    // 使用默认的折行标准
+    proseWrap: 'preserve',
+    // 根据显示样式决定 html 要不要折行
+    htmlWhitespaceSensitivity: 'css',
+    // vue 文件中的 script 和 style 内不用缩进
+    vueIndentScriptAndStyle: false,
+    // 换行符使用 lf
+    endOfLine: 'lf',
+  };
+  

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };

src/components/breadcrumb.vue

@@ -1,44 +1,39 @@
 <template>
   <t-breadcrumb :maxItemWidth="'150'" class="tdesign-breadcrumb">
     <template v-for="item in crumbs">
-      <t-breadcrumbItem
-        :key="item.path"
-        :to="item.path">
-          {{item.title}}
-        </t-breadcrumbItem>
+      <t-breadcrumbItem :key="item.path" :to="item.path">
+        {{ item.title }}
+      </t-breadcrumbItem>
     </template>
   </t-breadcrumb>
 </template>
 
 <script>
 export default {
-  name: "Tdesign-breadcrumb",
+  name: 'Tdesign-breadcrumb',
   props: {
-    isVisible: false,
+    isVisible: Boolean,
   },
   computed: {
-    crumbs: function() {
-      let pathArray = this.$route.path.split('/');
+    crumbs() {
+      const pathArray = this.$route.path.split('/');
       pathArray.shift();
 
-      let breadcrumbs = pathArray.reduce((breadcrumbArray, path, idx) => {
-
+      const breadcrumbs = pathArray.reduce((breadcrumbArray, path, idx) => {
         breadcrumbArray.push({
-          path: path,
-          to: breadcrumbArray[idx - 1]
-            ? '/' + breadcrumbArray[idx - 1].path + "/" + path
-            : '/' + path,
-          title: this.$route.matched[idx].meta.title || path
+          path,
+          to: breadcrumbArray[idx - 1] ? `/${breadcrumbArray[idx - 1].path}/${path}` : `/${path}`,
+          title: this.$route.matched[idx].meta.title || path,
         });
         return breadcrumbArray;
-      }, [])
+      }, []);
       return breadcrumbs;
-    }
+    },
   },
-}
+};
 </script>
 <style lang="less" scoped>
-    .tdesign-breadcrumb {
-        margin-bottom: 24px;
-    }
+.tdesign-breadcrumb {
+  margin-bottom: 24px;
+}
 </style>

src/components/footer.vue

@@ -1,23 +1,21 @@
 <template>
-<div class="tdesign-footer">
-  <span>
-      Copyright @ 2021-{{ new Date().getFullYear() }} Tencent. All Rights Reserved
-  </span>
-</div>
+  <div class="tdesign-footer">
+    <span> Copyright @ 2021-{{ new Date().getFullYear() }} Tencent. All Rights Reserved </span>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'tdesignFooter',
-}
+  name: 'tdesignFooter',
+};
 </script>
 
 <style lang="less" scoped>
 .tdesign-footer {
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    padding-top: 24px;
-    opacity: 0.6;
-    line-height: 24px;
-    text-align: center;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  padding-top: 24px;
+  opacity: 0.6;
+  line-height: 24px;
+  text-align: center;
 }
-</style>>
+</style>

src/components/sidenav.jsx → src/components/sidenav.tsx

@@ -1,57 +1,59 @@
-import menuRoutes from "@/config/routes.js";
+import menuRoutes from '@/config/routes.js';
 
-const getMenuList = (list, basePath) => {
+interface MenuRoute {
+  path: string;
+  title?: string;
+  icon?: string;
+  children: Array<MenuRoute>;
+}
+
+const getMenuList = (list: Array<MenuRoute>, basePath?: string) => {
   if (!list) {
-    return []
+    return [];
   }
   return list.map((item) => {
-     const path =  basePath ? `${basePath}/${item.path}`:  item.path; 
-     return {
-       path: path,
-       title: item.title,
-       icon: item.icon || '',
-       children: getMenuList(item.children, path)
-     }
+    const path = basePath ? `${basePath}/${item.path}` : item.path;
+    return {
+      path,
+      title: item.title,
+      icon: item.icon || '',
+      children: getMenuList(item.children, path),
+    };
   });
 };
 export default {
   props: {
-    theme: "light",
+    theme: String,
     navData: [],
   },
-  data() {
+  data(): any {
     return {
       collapsed: true,
       list: getMenuList(menuRoutes),
     };
   },
   computed: {
-    iconName() {
-      return this.collapsed ? "menu-fold" : "menu-unfold";
+    iconName(): string {
+      return this.collapsed ? 'menu-fold' : 'menu-unfold';
     },
   },
   methods: {
-    changeCollapsed() {
+    changeCollapsed(): void {
       this.collapsed = !this.collapsed;
     },
 
-    getActiveName(maxLevel = 2) {
+    getActiveName(maxLevel = 2): string {
       if (!this.$route.path) {
         return '';
       }
-      return this.$route.path.split('/')
-              .filter( (item, index) =>  (index <= maxLevel && index > 0) )
-              .map(item => `/${item}`)
-              .join('');
+      return this.$route.path
+        .split('/')
+        .filter((item, index) => index <= maxLevel && index > 0)
+        .map((item) => `/${item}`)
+        .join('');
     },
 
-    goLink(path) {
-      this.$router.push(path).catch(err => {
-        console.log(err);
-      });
-    },
-
-    renderNav(list, deep = 0, maxLevel = 2) {
+    renderNav(list: Array<MenuRoute>, deep = 0, maxLevel = 2): any {
       return list.map((item) => {
         if (deep < maxLevel) {
           if (deep === 0) {
@@ -73,23 +75,19 @@ export default {
             </router-link>
           );
         }
+        return '';
       });
     },
   },
-  render(h) {
+  render(): any {
     const navs = this.renderNav(this.list);
     const active = this.getActiveName();
 
     return (
-      <t-menu
-        className="tdesign-sidenav"
-        theme={this.theme}
-        active={active}
-        collapsed={this.collapsed}
-      >
+      <t-menu className="tdesign-sidenav" theme={this.theme} active={active} collapsed={this.collapsed}>
         <span slot="logo">TDesign pro</span>
         {navs}
-        <div slot="options" onClick={this.changeCollapsed }>
+        <div slot="options" onClick={this.changeCollapsed}>
           <t-icon name={this.iconName} />
         </div>
       </t-menu>

src/layouts/blank.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tdesign-wrapper">
-      <router-view />
+    <router-view />
   </div>
 </template>
 
@@ -10,5 +10,4 @@
   display: flex;
   flex-direction: column;
 }
-
-</style>
+</style>