lint

.eslintrc.js

@@ -4,13 +4,14 @@ module.exports = {
         node: true
     },
     extends: [
-        'plugin:vue/essential',
-        'eslint:recommended',
-        '@vue/prettier',
-        'plugin:prettier/recommended'
+        "plugin:vue/essential",
+        "eslint:recommended",
+        "plugin:prettier/recommended",
+        "@vue/prettier",
+        "prettier"
     ],
     parserOptions: {
-        parser: 'babel-eslint'
+        parser: "babel-eslint"
     },
     /**add your custom rules here
      * 下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin-
@@ -21,10 +22,10 @@ module.exports = {
      */
     rules: {
         // 是否开启prettier校验,默认开启
-        // "prettier/prettier": "off",
+        "prettier/prettier": "warn",
         // "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-        'no-console': [0, { llow: ['warn', 'error'] }],
-        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+        "no-console": [0, { llow: ["warn", "error"] }],
+        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
         //缩进风格.默认4，否则会报错
         indent: [
             2,
@@ -33,18 +34,19 @@ module.exports = {
                 SwitchCase: 1 // 针对switch case的缩进
             }
         ],
-        'linebreak-style': ['warn', 'unix'],
-        'no-irregular-whitespace': [
+        "linebreak-style": ["warn", "unix"],
+        "no-irregular-whitespace": [
             1,
             { skipComments: true, skipTemplates: true, skipRegExps: true }
         ],
         // 强制双引号
         // "quotes": ["error", "double"],
         // 语句强制分号结尾
-        // "semi": ["error", "always"],
-        // "semi": false,
+        // "semi": ["warn", "always"],
+        // 不检查语句是否以分号结尾
+        semi: 0,
         // 分号前后空格。默认选项禁止分号之前有空格，强制分号之后有空格。
-        'semi-spacing': [
+        "semi-spacing": [
             1,
             {
                 before: false,
@@ -52,17 +54,17 @@ module.exports = {
             }
         ],
         // 变量声明后必须使用；参数arg不做限制
-        'no-unused-vars': [
+        "no-unused-vars": [
             1,
             {
-                vars: 'all',
-                args: 'none'
+                vars: "all",
+                args: "none"
             }
         ],
         // 禁止对原生对象或只读的全局对象进行赋值
-        'no-native-reassign': 2,
+        "no-native-reassign": 2,
         // 变量声明、数组字面量、对象字面量、函数参数 和 序列中的逗号前不能有空格，后面必须有一个空格
-        'comma-spacing': [
+        "comma-spacing": [
             1,
             {
                 before: false,
@@ -70,35 +72,35 @@ module.exports = {
             }
         ],
         // 是否用驼峰风格命名变量：never || always
-        camelcase: ['error', { properties: 'never' }],
+        camelcase: ["error", { properties: "never" }],
         // 强制函数括号之前的空格的一致性.
         // 每个选项可以设置为 "always"、"never" 或 "ignore"
-        'space-before-function-paren': [
-            'warn',
+        "space-before-function-paren": [
+            "warn",
             {
                 // 针对匿名函数表达式 (比如 function () {})
-                anonymous: 'always',
+                anonymous: "always",
                 // 针对命名的函数表达式 (比如 function foo () {})。
-                named: 'never',
+                named: "never",
                 // 针对异步的箭头函数表达式(比如 async () => {})
-                asyncArrow: 'always'
+                asyncArrow: "always"
             }
         ],
         // 该规则禁止在 return、throw、continue 和 break 语句后出现不可达代码。
-        'no-unreachable': 1,
+        "no-unreachable": 1,
         // 消除非故意 case 落空行为
-        'no-fallthrough': 1,
+        "no-fallthrough": 1,
         // 在条件语句中，很容易将一个比较运算符（像 ==）错写成赋值运算符（如 =）
         // 所以，该规则禁止在 if、for、while 和 do...while 语句中出现模棱两可的赋值操作符
-        'no-cond-assign': [2, 'always'],
+        "no-cond-assign": [2, "always"],
         // 强制多行的三目运算符换行
-        'multiline-ternary': [1, 'always-multiline'],
+        "multiline-ternary": [1, "always-multiline"],
         // else关键字要与花括号保持在同一行。
         // 'brace-style': 1,
         // 'block-spacing': 1, //单行代码块两边加空格。
         // 'spaced-comment': 1, //注释首尾留空格
-        'vue/html-indent': [
-            'error',
+        "vue/html-indent": [
+            "error",
             4,
             {
                 attribute: 1,
@@ -109,23 +111,23 @@ module.exports = {
             }
         ],
         // 是否禁止在正则表达式中出现控制字符
-        'no-control-regex': 0,
+        "no-control-regex": 0,
         // 指定html各种元素、svg、vue组件自闭和标签的规则
-        'vue/html-self-closing': [
-            'error',
+        "vue/html-self-closing": [
+            "error",
             {
                 html: {
-                    void: 'never',
-                    normal: 'never',
-                    component: 'never'
+                    void: "never",
+                    normal: "never",
+                    component: "never"
                 },
-                svg: 'always',
-                math: 'always'
+                svg: "always",
+                math: "always"
             }
         ],
         // 每一行的属性数量
-        'vue/max-attributes-per-line': [
-            'error',
+        "vue/max-attributes-per-line": [
+            "error",
             {
                 // 单行的话，每行属性的数量
                 singleline: 2,
@@ -137,103 +139,103 @@ module.exports = {
                 }
             }
         ],
-        'vue/multiline-html-element-content-newline': [
-            'error',
+        "vue/multiline-html-element-content-newline": [
+            "error",
             {
                 ignoreWhenEmpty: true,
-                ignores: ['pre', 'textarea'],
+                ignores: ["pre", "textarea"],
                 allowEmptyLines: false
             }
         ],
         // 单行元素内容是否换行
-        'vue/singleline-html-element-content-newline': [
+        "vue/singleline-html-element-content-newline": [
             0,
             {
                 ignoreWhenEmpty: true,
-                ignores: ['pre', 'textarea'],
+                ignores: ["pre", "textarea"],
                 ignoreWhenNoAttributes: true
             }
         ],
         // 多行元素闭合标签（右括号）换行规则
-        'vue/html-closing-bracket-newline': [
-            'error',
+        "vue/html-closing-bracket-newline": [
+            "error",
             {
-                singleline: 'never',
-                multiline: 'never'
+                singleline: "never",
+                multiline: "never"
             }
         ],
         // 单行元素闭合标签（右括号）换行规则
-        'vue/html-closing-bracket-spacing': [
-            'error',
+        "vue/html-closing-bracket-spacing": [
+            "error",
             {
-                startTag: 'never',
-                endTag: 'never',
-                selfClosingTag: 'never'
+                startTag: "never",
+                endTag: "never",
+                selfClosingTag: "never"
             }
         ],
         // 属性值引号："double" | "single"
-        'vue/html-quotes': ['error', 'double'],
+        "vue/html-quotes": ["warn", "double"],
         // 组件name属性值的格式
         // PascalCase:驼峰 || kebab-case:连接线
-        'vue/name-property-casing': ['warn', 'PascalCase'],
+        "vue/name-property-casing": ["warn", "PascalCase"],
         // v-bind写法。shorthand：简写 || longform：不缩写
-        'vue/v-bind-style': ['error', 'shorthand'],
-        'vue/v-on-style': ['error', 'shorthand'],
+        "vue/v-bind-style": ["error", "shorthand"],
+        "vue/v-on-style": ["error", "shorthand"],
         // html元素中属性顺序
-        'vue/attributes-order': [
-            'warn',
+        "vue/attributes-order": [
+            "warn",
             {
                 order: [
-                    'DEFINITION',
-                    'LIST_RENDERING',
-                    'CONDITIONALS',
-                    'RENDER_MODIFIERS',
-                    'GLOBAL',
-                    'UNIQUE',
-                    'TWO_WAY_BINDING',
-                    'OTHER_DIRECTIVES',
-                    'OTHER_ATTR',
-                    'EVENTS',
-                    'CONTENT'
+                    "DEFINITION",
+                    "LIST_RENDERING",
+                    "CONDITIONALS",
+                    "RENDER_MODIFIERS",
+                    "GLOBAL",
+                    "UNIQUE",
+                    "TWO_WAY_BINDING",
+                    "OTHER_DIRECTIVES",
+                    "OTHER_ATTR",
+                    "EVENTS",
+                    "CONTENT"
                 ]
             }
         ],
         // 组件中属性的顺序
-        'vue/order-in-components': [
-            'warn',
+        "vue/order-in-components": [
+            "warn",
             {
                 order: [
-                    'el',
-                    'name',
-                    'parent',
-                    'functional',
-                    ['delimiters', 'comments'],
-                    ['components', 'directives', 'filters'],
-                    'extends',
-                    'mixins',
-                    'inheritAttrs',
-                    'model',
-                    ['props', 'propsData'],
-                    'data',
-                    'computed',
-                    'watch',
-                    'LIFECYCLE_HOOKS',
-                    'methods',
-                    ['template', 'render'],
-                    'renderError'
+                    "el",
+                    "name",
+                    "parent",
+                    "functional",
+                    ["delimiters", "comments"],
+                    ["components", "directives", "filters"],
+                    "extends",
+                    "mixins",
+                    "inheritAttrs",
+                    "model",
+                    ["props", "propsData"],
+                    "data",
+                    "computed",
+                    "watch",
+                    "LIFECYCLE_HOOKS",
+                    "methods",
+                    ["template", "render"],
+                    "renderError"
                 ]
             }
         ],
         // 强制在v-on方法后加括号
-        'vue/v-on-function-call': [2, 'never'],
+        "vue/v-on-function-call": [2, "never"],
         // 报告<template>中的语法错误
-        'vue/no-parsing-error': [
+        "vue/no-parsing-error": [
             2,
             {
-                'x-invalid-end-tag': false
+                "x-invalid-end-tag": false
             }
         ],
         // 去掉检测无用转义的规则
-        'no-useless-escape': [0]
+        "no-useless-escape": [0]
     }
 }

.prettierrc.js

 module.exports = {
+    // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
+    ignorePath: ".prettierignore",
     // 与eslint集成（让prettier使用eslint的代码格式进行校验）
     eslintIntegration: true,
     // 换行长度
@@ -7,10 +9,10 @@ module.exports = {
     tabWidth: 4,
     // 使用tab缩进，默认false
     useTabs: false,
-    // 使用分号, 默认true
+    // 是否使用分号, 默认true
     semi: false,
-    // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
-    singleQuote: true,
+    // 是否使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
+    singleQuote: false,
     // 行尾逗号,默认none,可选 none|es5|all
     // es5 包括es5中的数组、对象
     // all 包括函数对象等所有可选
@@ -32,5 +34,10 @@ module.exports = {
     // avoid 能省略括号的时候就省略 例如x => x
     // always 总是有括号
     arrowParens: 'always',
-    endOfline: "auto"
+    // 结尾是 \n \r \n\r auto
+    endOfline: "auto",
+    // 在jsx中把'>' 是否单独放一行
+    jsxBracketSameLine: false,
 }
+
+

babel.config.js

 module.exports = {
-    presets: ['@vue/cli-plugin-babel/preset']
+    presets: ["@vue/cli-plugin-babel/preset"]
 }

package.json

@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.0",
-    "@vue/cli-plugin-eslint": "^4.5.0",
+    "@vue/cli-plugin-eslint": "^4.5.4",
     "@vue/cli-plugin-pwa": "^4.5.0",
     "@vue/cli-service": "^4.5.0",
     "@vue/eslint-config-prettier": "^6.0.0",
@@ -52,13 +52,14 @@
     "commitizen": "^4.2.0",
     "cz-conventional-changelog": "^3.2.1",
     "element-ui": "^2.13.2",
-    "eslint": "^6.7.2",
+    "eslint": "^6.8.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^6.2.2",
     "husky": "^3.1.0",
     "lint-staged": "^10.2.11",
     "node-sass": "^4.12.0",
     "prettier": "^1.19.1",
+    "prettier-eslint": "^11.0.0",
     "sass-loader": "^8.0.2",
     "serve": "^11.3.2",
     "standard-version": "^9.0.0",

src/App.vue

@@ -5,25 +5,30 @@
             <side-nav></side-nav>
             <router-view style="flex:1;border: 1px solid #666;"></router-view>
             <right-panel></right-panel>
+            <!-- <video
+                src="baidsfsfsdfsdfsdfsdfsdfsdfsfsdfsfsfsefsfsfsdfsdfdsfsdfu.com/mp4"
+                a="afasfsafdfasdfsfad"></video>
+            <input id="" type="text"
+name=""/> -->
         </body>
     </div>
 </template>
 
 <script>
-import CommonHeader from '@/components/header/index.vue'
+import CommonHeader from "@/components/header/index.vue"
 export default {
     components: {
         CommonHeader,
-        SideNav: () => import('@/components/sideNav/index.vue'),
-        RightPanel: () => import('@/components/rightPanel/index.vue')
+        SideNav: () => import("@/components/sideNav/index.vue"),
+        RightPanel: () => import("@/components/rightPanel/index.vue")
     },
     data() {
         return {}
     },
     async created() {
-        console.log('this.$http:', this.$http)
-        let result = await this.$http.get('/webapi/home/banner?type=1&category=18')
-        console.log('result:', result)
+        console.log("this.$http:", this.$http)
+        let result = await this.$http.get("/webapi/home/banner?type=1&category=18")
+        console.log("result:", result)
     }
 }
 </script>

src/components/header/index.vue

@@ -9,7 +9,7 @@
 <script>
 export default {
     components: {
-        tipPanel: () => import('@/components/header/tipPanel.vue')
+        tipPanel: () => import("@/components/header/tipPanel.vue")
     },
     data() {
         return {}

src/main.js

-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-import './registerServiceWorker'
-import axios from 'axios'
+import Vue from "vue"
+import App from "./App.vue"
+import router from "./router"
+import store from "./store"
+import "./registerServiceWorker"
+import axios from "axios"
 
-import baseURL from '../config/baseUrl.js'
-console.log('baseURL:', baseURL)
+import baseURL from "../config/baseUrl.js"
+console.log("baseURL:", baseURL)
 
 Vue.config.productionTip = false
 Vue.prototype.$http = axios
@@ -15,4 +15,4 @@ new Vue({
     router,
     store,
     render: (h) => h(App)
-}).$mount('#app')
+}).$mount("#app")

src/registerServiceWorker.js

 /* eslint-disable no-console */
 
-import { register } from 'register-service-worker'
+import { register } from "register-service-worker"
 
-if (process.env.NODE_ENV === 'production') {
+if (process.env.NODE_ENV === "production") {
     register(`${process.env.BASE_URL}service-worker.js`, {
         ready() {
             console.log(
-                'App is being served from cache by a service worker.\n' +
-                    'For more details, visit https://goo.gl/AFskqB'
+                "App is being served from cache by a service worker.\n" +
+                    "For more details, visit https://goo.gl/AFskqB"
             )
         },
         registered() {
-            console.log('Service worker has been registered.')
+            console.log("Service worker has been registered.")
         },
         cached() {
-            console.log('Content has been cached for offline use.')
+            console.log("Content has been cached for offline use.")
         },
         updatefound() {
-            console.log('New content is downloading.')
+            console.log("New content is downloading.")
         },
         updated() {
-            console.log('New content is available; please refresh.')
+            console.log("New content is available; please refresh.")
         },
         offline() {
-            console.log('No internet connection found. App is running in offline mode.')
+            console.log("No internet connection found. App is running in offline mode.")
         },
         error(error) {
-            console.error('Error during service worker registration:', error)
+            console.error("Error during service worker registration:", error)
         }
     })
 }

src/router/index.js

-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import Bao3 from '../views/bao3.vue'
-import Screenshot from '../views/screenshot.vue'
-import screenshotPanel from '../components/rightPanel/screenshotPanel.vue'
+import Vue from "vue"
+import VueRouter from "vue-router"
+import Bao3 from "../views/bao3.vue"
+import Screenshot from "../views/screenshot.vue"
+import screenshotPanel from "../components/rightPanel/screenshotPanel.vue"
 
 Vue.use(VueRouter)
 
 const routes = [
     {
-        path: '/',
-        name: 'Bao3',
+        path: "/",
+        name: "Bao3",
         component: Bao3
     },
     {
-        path: '/about',
-        name: 'About',
+        path: "/about",
+        name: "About",
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+        component: () => import(/* webpackChunkName: "about" */ "../views/About.vue")
     },
     {
-        path: '/cutter',
-        name: 'Cutter',
-        component: () => import(/* webpackChunkName: "bao1" */ '../views/videoCutter.vue')
+        path: "/cutter",
+        name: "Cutter",
+        component: () => import(/* webpackChunkName: "bao1" */ "../views/videoCutter.vue")
     },
     {
-        path: '/bao2',
-        name: 'Bao2',
-        component: () => import(/* webpackChunkName: "bao2" */ '../views/bao2.vue')
+        path: "/bao2",
+        name: "Bao2",
+        component: () => import(/* webpackChunkName: "bao2" */ "../views/bao2.vue")
     },
     {
-        path: '/screenshot',
+        path: "/screenshot",
         components: {
             default: Screenshot,
             panel: screenshotPanel
@@ -40,7 +40,7 @@ const routes = [
 ]
 
 const router = new VueRouter({
-    mode: 'history',
+    mode: "history",
     base: process.env.BASE_URL,
     routes
 })

src/store/index.js

-import Vue from 'vue'
-import Vuex from 'vuex'
+import Vue from "vue"
+import Vuex from "vuex"
 
 Vue.use(Vuex)
 

src/views/screenshot.vue

@@ -4,7 +4,7 @@
 
 <script>
 export default {
-    name: 'Screenshot',
+    name: "Screenshot",
     data() {
         return {}
     },

src/views/videoConverterBaby.vue

@@ -4,7 +4,7 @@
 
 <script>
 export default {
-    name: 'VideoConverterBaby',
+    name: "VideoConverterBaby",
     components: {},
     props: {},
     data() {

src/views/videoCutter.vue

@@ -10,14 +10,14 @@
 </template>
 
 <script>
-import VideoPlayer from '@/components/videoCutter/videoPlayer.vue'
+import VideoPlayer from "@/components/videoCutter/videoPlayer.vue"
 export default {
     components: {
         VideoPlayer
     },
     data() {
         return {
-            name: ''
+            name: ""
         }
     },
     created() {},

vue.config.js

@@ -4,7 +4,7 @@ console.log(`process.env.NODE_ENV1:`, process.env.NODE_ENV)
 module.exports = {
     // outputDir: process.env.outputDir,
     // assetsDir: 'static',
-    publicPath: '/',
+    publicPath: "/",
     devServer: {
         open: true,
         // host: '0.0.0.0',
@@ -13,10 +13,10 @@ module.exports = {
         hotOnly: false,
         proxy: {
             webapi: {
-                target: 'https://test2.laihua.com/',
+                target: "https://test2.laihua.com/",
                 ws: true,
                 changeOrigin: true,
-                pathRewrite: { '^/webapi': '/' }
+                pathRewrite: { "^/webapi": "/" }
             }
         }
     }