add prettier and format

Author: ediaos

.eslintrc.js

@@ -3,12 +3,12 @@ module.exports = {
   env: {
     node: true
   },
-  extends: ["plugin:vue/essential", "@vue/prettier"],
+  extends: ['plugin:vue/essential', '@vue/prettier'],
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   },
   parserOptions: {
-    parser: "babel-eslint"
+    parser: 'babel-eslint'
   }
-};
+}

.gitignore

@@ -13,7 +13,6 @@ yarn-error.log*
 
 # Editor directories and files
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "none"
+}

.vscode/settings.json

@@ -0,0 +1,28 @@
+{
+  // 编辑器保存自动格式化
+  "editor.formatOnSave": true,
+  // 锁紧字符
+  "editor.tabSize": 2,
+  // 自动在vscode顶部显示文件路径
+  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
+  // 搜索排除
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
+    "**/dist": true
+  },
+  // 控制是否在搜索中跟踪符号链接，会导致cpu内存占有率过高
+  "search.followSymlinks": false,
+  // 自动fetch远程分支
+  "git.autofetch": true,
+  // eslint开启
+  "eslint.enable": true,
+  // eslint自动保存格式话
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  // 保存超时时长
+  "editor.codeActionsOnSaveTimeout": 2500,
+  //  依赖prettier配置文件来格式化
+  "prettier.requireConfig": true
+}

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/app"]
-};
+  presets: ['@vue/app']
+}

postcss.config.js

@@ -2,4 +2,4 @@ module.exports = {
   plugins: {
     autoprefixer: {}
   }
-};
+}

src/App.vue

@@ -9,7 +9,7 @@
 
 <style lang="scss">
 #app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;

src/api/index.js

@@ -1,33 +1,34 @@
-import axios from "axios";
-const TARGET_SERVER = process.env.VUE_ENV === "server";
+import axios from 'axios'
+const TARGET_SERVER = process.env.VUE_ENV === 'server'
 // FOR PROXY TEST:  const cnodeBaseUrl = TARGET_SERVER ? process.env.config.CNODE_HOST : "/feapi";
-const cnodeBaseUrl = process.env.config.CNODE_HOST;
+const cnodeBaseUrl = process.env.config.CNODE_HOST
 export function fetchTopics({ cookies }) {
-  return axios.get(cnodeBaseUrl + "/api/v1/topics", {
+  return axios.get(cnodeBaseUrl + '/api/v1/topics', {
     headers: getCommonHeader({ cookies })
-  });
+  })
 }
 
 export function fetchTopicDetail({ id, cookies }) {
   return axios.get(cnodeBaseUrl + `/api/v1/topic/${id}`, {
     headers: getCommonHeader({ cookies })
-  });
+  })
 }
 
 function getCommonHeader({ cookies }) {
   if (TARGET_SERVER && cookies) {
-    return { cookie: getCookieString(cookies) };
+    return { cookie: getCookieString(cookies) }
   } else {
-    return null;
+    return null
   }
 }
 
 function getCookieString(cookies) {
-  let cookieStr = "";
+  let cookieStr = ''
   for (var variable in cookies) {
+    // eslint-disable-next-line no-prototype-builtins
     if (cookies.hasOwnProperty(variable)) {
-      cookieStr += `${variable}=${encodeURIComponent(cookies[variable])}; `;
+      cookieStr += `${variable}=${encodeURIComponent(cookies[variable])}; `
     }
   }
-  return cookieStr;
+  return cookieStr
 }

src/components/TopicItem.vue

@@ -7,12 +7,12 @@
 
 <script>
 export default {
-  name: "TopicItem",
+  name: 'TopicItem',
   serverCacheKey: props => props.topicInfo.id, // for ssr cache item component
   props: {
     topicInfo: Object
   }
-};
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/entry-client.js

@@ -1,11 +1,11 @@
-import { createApp } from "./main";
-const { app, router, store } = createApp();
+import { createApp } from './main'
+const { app, router, store } = createApp()
 
 // prime the store with server-initialized state.
 // the state is determined during SSR and inlined in the page markup.
 if (window.__INITIAL_STATE__) {
-  store.replaceState(window.__INITIAL_STATE__);
+  store.replaceState(window.__INITIAL_STATE__)
 }
 router.onReady(() => {
-  app.$mount("#app");
-});
+  app.$mount('#app')
+})

src/entry-server.js

@@ -1,4 +1,4 @@
-import { createApp } from "./main";
+import { createApp } from './main'
 
 // This exported function will be called by `bundleRenderer`.
 // This is where we perform data-prefetching to determine the
@@ -7,10 +7,10 @@ import { createApp } from "./main";
 // return a Promise that resolves to the app instance.
 export default context => {
   return new Promise((resolve, reject) => {
-    const beginTime = Date.now();
-    const { app, router, store } = createApp();
+    const beginTime = Date.now()
+    const { app, router, store } = createApp()
     // set router's location
-    router.push(context.url);
+    router.push(context.url)
     router.onReady(() => {
       // This `rendered` hook is called when the app has finished rendering
       context.rendered = () => {
@@ -19,11 +19,11 @@ export default context => {
         // When we attach the state to the context, and the `template` option
         // is used for the renderer, the state will automatically be
         // serialized and injected into the HTML as `window.__INITIAL_STATE__`.
-        context.state = store.state;
+        context.state = store.state
         /* eslint-disable-next-line */
         console.log(`[DATE] data pre-fetch: ${Date.now() - beginTime}ms url=${context.url}`);
-      };
-      resolve(app);
-    }, reject);
-  });
-};
+      }
+      resolve(app)
+    }, reject)
+  })
+}

src/main.js

@@ -1,56 +1,56 @@
-import Vue from "vue";
-import App from "./App.vue";
-import { createRouter } from "./router";
-import { createStore } from "./store";
-import { sync } from "vuex-router-sync";
+import Vue from 'vue'
+import App from './App.vue'
+import { createRouter } from './router'
+import { createStore } from './store'
+import { sync } from 'vuex-router-sync'
 
 //关闭生产模式下给出的提示
-Vue.config.productionTip = true;
+Vue.config.productionTip = true
 
 // for using vant components
-import Vant from "vant";
-import "vant/lib/index.css";
-Vue.use(Vant);
+import Vant from 'vant'
+import 'vant/lib/index.css'
+Vue.use(Vant)
 // global loading
 Vue.prototype.$loading = isLoading => {
   if (isLoading) {
     Vue.prototype.$toast.loading({
       mask: true,
-      message: "加载中...",
+      message: '加载中...',
       overlayStyle: {
-        backgroundColor: "rgba(0, 0, 0, 0.1)"
+        backgroundColor: 'rgba(0, 0, 0, 0.1)'
       },
       duration: 0
-    });
+    })
   } else {
-    Vue.prototype.$toast.clear();
+    Vue.prototype.$toast.clear()
   }
-};
+}
 
 export function createApp() {
-  const router = createRouter();
-  const store = createStore();
+  const router = createRouter()
+  const store = createStore()
   // sync the router with the vuex store.
   // this registers `store.state.route`
-  sync(store, router);
+  sync(store, router)
   const app = new Vue({
     router,
     store,
     render: h => h(App)
-  });
-  return { app, router, store };
+  })
+  return { app, router, store }
 }
 
 // promise.finally Polyfill
 if (!Promise.prototype.finally) {
   Promise.prototype.finally = function(callback) {
-    let P = this.constructor;
+    let P = this.constructor
     return this.then(
       value => P.resolve(callback()).then(() => value),
       reason =>
         P.resolve(callback()).then(() => {
-          throw reason;
+          throw reason
         })
-    );
-  };
+    )
+  }
 }

src/router/index.js

@@ -1,27 +1,27 @@
-import Vue from "vue";
-import Router from "vue-router";
-import Home from "../views/Home.vue";
+import Vue from 'vue'
+import Router from 'vue-router'
+import Home from '../views/Home.vue'
 
-Vue.use(Router);
+Vue.use(Router)
 
 export function createRouter() {
   return new Router({
-    mode: "history",
+    mode: 'history',
     routes: [
       {
-        path: "/",
-        name: "home",
+        path: '/',
+        name: 'home',
         component: Home
       },
       {
-        path: "/detail/:id",
-        name: "detail",
+        path: '/detail/:id',
+        name: 'detail',
         // 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: "detail" */ "../views/Detail.vue")
+          import(/* webpackChunkName: "detail" */ '../views/Detail.vue')
       }
     ]
-  });
+  })
 }

src/store/actions.js

@@ -1,16 +1,16 @@
-import { fetchTopics, fetchTopicDetail } from "../api";
+import { fetchTopics, fetchTopicDetail } from '../api'
 
 export default {
   FETCH_TOPICS_LIST: ({ commit, state }, { cookies }) => {
     return state.topicsList
       ? Promise.resolve()
       : fetchTopics({ cookies }).then(res =>
-          commit("SET_TOPICS_LIST", { list: res.data.data })
-        );
+          commit('SET_TOPICS_LIST', { list: res.data.data })
+        )
   },
   FETCH_TOPIC_DETAIL: ({ commit }, { id, cookies }) => {
     return fetchTopicDetail({ id, cookies }).then(res =>
-      commit("SET_TOPIC_DETAIL", { detail: res.data.data })
-    );
+      commit('SET_TOPIC_DETAIL', { detail: res.data.data })
+    )
   }
-};
+}

src/store/getters.js

@@ -2,4 +2,4 @@ export default {
   // aboutInfo (state) {
   //   return state.pageAbout
   // }
-};
+}

src/store/index.js

@@ -1,10 +1,10 @@
-import Vue from "vue";
-import Vuex from "vuex";
-import actions from "./actions";
-import mutations from "./mutations";
-import getters from "./getters";
+import Vue from 'vue'
+import Vuex from 'vuex'
+import actions from './actions'
+import mutations from './mutations'
+import getters from './getters'
 
-Vue.use(Vuex);
+Vue.use(Vuex)
 
 export function createStore() {
   return new Vuex.Store({
@@ -16,5 +16,5 @@ export function createStore() {
     mutations,
     actions,
     getters
-  });
+  })
 }

src/store/mutations.js

@@ -1,8 +1,8 @@
 export default {
   SET_TOPICS_LIST: (state, { list }) => {
-    state.topicsList = list;
+    state.topicsList = list
   },
   SET_TOPIC_DETAIL: (state, { detail }) => {
-    state.topicDetail = detail;
+    state.topicDetail = detail
   }
-};
+}