添加airbnb代码规范教研

Author: 陈鑫

.eslintignore

@@ -0,0 +1,4 @@
+node_modules/*
+public/*
+src/components/GlobalBg.vue
+vue.config.js

.eslintrc.js

@@ -0,0 +1,38 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/essential',
+    '@vue/airbnb',
+    '@vue/typescript/recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    "@typescript-eslint/no-explicit-any": ["off"],
+    "@typescript-eslint/no-empty-function": "off",
+    "eqeqeq": "off",  //是否开启==
+    "class-methods-use-this": "off",  //在方法中是否必须使用this
+    "no-plusplus": "off",  //不允许使用++ --运算符
+    "no-param-reassign": "off",  //不允许重新分配函数参数"no-proto": 2, //不允许使用__proto__属性
+    "import/no-extraneous-dependencies": "off",
+    "no-underscore-dangle": "off", //不允许标识符以下划线开头
+    "global-require": "off",
+    "import/no-cycle": 'off',
+    "import/prefer-default-export": 'off',
+    "import/no-dynamic-require": "off",
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-this-alias": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "no-unused-expressions": "off",  //不允许无用的表达式
+    "no-lonely-if": "off",
+    "object-curly-newline": "off",
+    'comma-dangle': [0, 'never'],
+  },
+};

.prettierrc.json

@@ -0,0 +1,5 @@
+
+{
+  "singleQuote": true,
+  "semi": true
+}

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vue-design-admin",
+  "name": "vue-typescript-starter",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -11,11 +11,13 @@
     "@antv/g6": "^3.6.0",
     "ant-design-vue": "^1.6.5",
     "axios": "0.19.0",
+    "babel-polyfill": "^6.26.0",
     "core-js": "^3.6.5",
     "crypto-js": "^4.0.0",
     "echarts": "^4.7.0",
     "flv.js": "^1.5.0",
     "moment": "^2.24.0",
+    "qs": "^6.9.6",
     "spark-md5": "^3.0.1",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
@@ -28,20 +30,27 @@
     "vuex-module-decorators": "^0.17.0"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
     "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-plugin-typescript": "~4.5.0",
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
-    "babel-plugin-import": "^1.13.0",
-    "babel-polyfill": "^6.26.0",
+    "@vue/eslint-config-airbnb": "^5.0.2",
+    "@vue/eslint-config-typescript": "^5.0.2",
+    "babel-plugin-import": "^1.13.3",
     "compression-webpack-plugin": "^5.0.1",
-    "es6-promise": "^4.2.8",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-vue": "^6.2.2",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
     "mockjs": "^1.1.0",
     "typescript": "~3.9.3",
-    "vue-class": "^2.0.1",
     "vue-template-compiler": "^2.6.11"
   },
   "browserslist": [

src/App.vue

@@ -1,23 +1,25 @@
 <template>
   <div id="app">
-    <router-view v-if="isRouterAlive"/>
+    <router-view v-if="isRouterAlive" />
   </div>
 </template>
 
 <script lang="ts">
-import { UserModule } from "@/store/modules/user";
-import { Component, Prop, Vue, Provide } from "vue-property-decorator";
+import { UserModule } from '@/store/modules/user';
+import { Component, Prop, Vue, Provide } from 'vue-property-decorator';
 
 @Component({})
 export default class App extends Vue {
-  private isRouterAlive: boolean = true;
+  private isRouterAlive = true;
+
   mounted() {
-    const lang = sessionStorage.getItem("LANGUAGE");
+    const lang = sessionStorage.getItem('LANGUAGE');
     if (!lang) {
-      sessionStorage.setItem("LANGUAGE", "zh");
+      sessionStorage.setItem('LANGUAGE', 'zh');
     }
   }
-  //刷新页面
+
+  // 刷新页面
   @Provide()
   private reload() {
     this.isRouterAlive = false;
@@ -29,6 +31,6 @@ export default class App extends Vue {
 </script>
 
 <style lang="less">
-@import "./public/css/base.css";
-@import "./public/css/init.less";
+@import './public/css/base.css';
+@import './public/css/init.less';
 </style>

src/api/users.ts

@@ -1,29 +1,23 @@
-import service from "@/utils/fetch"
-import qs from 'qs'
+import service from '@/utils/fetch';
+import qs from 'qs';
 
-//用户登录
-export const login = (params: any): any => {
-  return service({
-    method: "post",
-    url: '/login',
-    data: params
-  })
-}
+// 用户登录
+export const login = (params: any): any => service({
+  method: 'post',
+  url: '/login',
+  data: params,
+});
 
-//用户登出
-export const logout = (params: any) => {
-  return service({
-    method: "get",
-    url: '/logout',
-    data: params
-  })
-}
+// 用户登出
+export const logout = (params: any) => service({
+  method: 'get',
+  url: '/logout',
+  data: params,
+});
 
-//获取权限列表
-export const getPermissionsList = (params: any) => {
-  return service({
-    method: "get",
-    url: "/navPerson",
-    data: qs.stringify(params)
-  })
-}
+// 获取权限列表
+export const getPermissionsList = (params: any) => service({
+  method: 'get',
+  url: '/navPerson',
+  data: qs.stringify(params),
+});

src/components/Exception/ExceptionPage.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="exception">
     <div class="imgBlock">
-      <div class="imgEle" :style="{backgroundImage: `url(${config[type].img})`}"></div>
+      <div class="imgEle"
+           :style="{backgroundImage: `url(${config[type].img})`}"></div>
     </div>
     <div class="content">
       <h1>{{ config[type].title }}</h1>
@@ -11,26 +12,27 @@
 </template>
 
 <script lang="ts">
-import types from "./type";
-import { Component, Vue, Watch, Prop } from "vue-property-decorator";
+import { Component, Vue, Prop } from 'vue-property-decorator';
+import types from './type';
 
 @Component
 export default class ExceptionPage extends Vue {
   @Prop({
     type: String,
     required: false,
-    default: "404"
+    default: '404',
   })
   type!: string;
 
   private config: object = types;
+
   private handleToHome() {
-    this.$router.push("/");
+    this.$router.push('/');
   }
 }
 </script>
 <style lang="less">
-@import "~ant-design-vue/lib/style/index";
+@import '~ant-design-vue/lib/style/index';
 
 .exception {
   display: flex;
@@ -45,7 +47,7 @@ export default class ExceptionPage extends Vue {
     zoom: 1;
     &::before,
     &::after {
-      content: " ";
+      content: ' ';
       display: table;
     }
     &::after {

src/components/Exception/index.ts

@@ -1,2 +1,3 @@
-import ExceptionPage from './ExceptionPage.vue'
-export default ExceptionPage
+import ExceptionPage from './ExceptionPage.vue';
+
+export default ExceptionPage;

src/components/Exception/type.ts

@@ -2,18 +2,18 @@ const types = {
   403: {
     img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
     title: '403',
-    desc: '抱歉，你无权访问该页面'
+    desc: '抱歉，你无权访问该页面',
   },
   404: {
     img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
     title: '404',
-    desc: '抱歉，你访问的页面不存在或仍在开发中'
+    desc: '抱歉，你访问的页面不存在或仍在开发中',
   },
   500: {
     img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
     title: '500',
-    desc: '抱歉，服务器出错了'
-  }
-}
+    desc: '抱歉，服务器出错了',
+  },
+};
 
-export default types
+export default types;

src/components/FlvPlayer.vue

@@ -1,22 +1,25 @@
 <template>
-  <video class="video-item" controls ref="flvPlayerElem" muted></video>
+  <video class="video-item"
+         controls
+         ref="flvPlayerElem"
+         muted></video>
 </template>
 
 <script lang="ts">
-import flv from "flv.js";
-import { message } from "ant-design-vue";
-import { Component, Vue, Prop, Ref } from "vue-property-decorator";
+import flv from 'flv.js';
+import { message } from 'ant-design-vue';
+import { Component, Vue, Prop } from 'vue-property-decorator';
 
 @Component
 export default class FlvPlayer extends Vue {
   @Prop({ type: String }) src!: string;
 
-  //inital data
-  //初始化视频实例
+  // inital data
+  // 初始化视频实例
   private player: flv.Player = flv.createPlayer(
     {
-      type: "flv",
-      url: this.src
+      type: 'flv',
+      url: this.src,
     },
     {
       enableStashBuffer: false,
@@ -25,41 +28,43 @@ export default class FlvPlayer extends Vue {
       lazyLoadMaxDuration: 0,
       lazyLoadRecoverDuration: 0,
       deferLoadAfterSourceOpen: false,
-      fixAudioTimestampGap: false
+      fixAudioTimestampGap: false,
     }
   );
-  //音量开始状态
-  private muted: boolean = true;
-  //是否现在播放
-  private playing: boolean = false;
+
+  // 音量开始状态
+  private muted = true;
+
+  // 是否现在播放
+  private playing = false;
 
   mounted() {
-    //当前浏览器是否支持
-    let isSupported: boolean = flv.isSupported();
+    // 当前浏览器是否支持
+    const isSupported: boolean = flv.isSupported();
     if (!isSupported) {
-      message.error("当前浏览器不支持播放flv视频！");
+      message.error('当前浏览器不支持播放flv视频！');
     } else {
-      let videoElem = this.$refs["flvPlayerElem"] as HTMLMediaElement;
+      const videoElem = this.$refs.flvPlayerElem as HTMLMediaElement;
       this.player.attachMediaElement(videoElem);
       this.player.load();
       this.play();
     }
   }
 
-  //inital methods
-  //视频播放
+  // inital methods
+  // 视频播放
   play() {
     this.player.play();
     this.playing = true;
   }
 
-  //视频暂停
+  // 视频暂停
   pause() {
     this.player.pause();
     this.playing = false;
   }
 
-  //视频销毁
+  // 视频销毁
   destory() {
     this.player.destroy();
     this.playing = false;
@@ -73,4 +78,4 @@ export default class FlvPlayer extends Vue {
   height: 100%;
   object-fit: fill;
 }
-</style>
+</style>