chore: refactor eslint config

Author: Akryum

.circleci/config.yml

@@ -44,12 +44,10 @@ jobs:
           key: v10-dependencies-{{ checksum "yarn.lock" }}
 
       # run tests!
+      - run: yarn lint
       - run: yarn build
-      - run: cd packages/vue-apollo-option && yarn lint
       - run: cd packages/vue-apollo-option && yarn test:types
       - run: cd packages/vue-apollo-option && yarn test:unit
-      - run: cd packages/vue-apollo-components && yarn lint
-      - run: cd packages/vue-apollo-composable && yarn lint
       - run: cd packages/vue-apollo-composable && yarn test:types
       - run: cd packages/test-e2e && yarn test:e2e
       - run: cd packages/test-e2e-composition && yarn test:e2e

.eslintrc.js

@@ -0,0 +1,89 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+  },
+  extends: [
+    'plugin:vue/recommended',
+    '@vue/standard',
+    '@vue/typescript/recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  globals: {
+    name: 'off',
+  },
+  rules: {
+    'vue/html-closing-bracket-newline': [
+      'error',
+      {
+        singleline: 'never',
+        multiline: 'always',
+      },
+    ],
+    'no-var': ['error'],
+    '@typescript-eslint/member-delimiter-style': [
+      'error',
+      {
+        multiline: {
+          delimiter: 'none',
+        },
+        singleline: {
+          delimiter: 'comma',
+        },
+      },
+    ],
+    '@typescript-eslint/no-use-before-define': 'off',
+    'comma-dangle': ['error', 'always-multiline'],
+    'vue/no-multiple-template-root': 'off',
+    indent: 'off',
+    '@typescript-eslint/indent': ['error', 2],
+    quotes: ['error', 'single', { allowTemplateLiterals: true }],
+    'no-use-before-define': 'warn',
+    'accessor-pairs': 'off',
+    'no-async-promise-executor': 'off',
+    '@typescript-eslint/no-empty-function': 'warn',
+    'no-return-assign': 'off',
+    'multiline-ternary': 'off',
+  },
+  overrides: [
+    {
+      files: ['*.vue'],
+      rules: {
+        '@typescript-eslint/no-unused-vars': 'off',
+      },
+    },
+    {
+      files: [
+        'packages/*/server.js',
+        'packages/*/apollo.config.js',
+        'packages/*/apollo-server/**/*',
+        'packages/*/tests/**/*.js',
+        'packages/*/build/**/*.js',
+        'packages/*/lib/**/*.js',
+      ],
+      rules: {
+        '@typescript-eslint/no-var-requires': 'off',
+      },
+    },
+    {
+      files: [
+        '**/*.test.ts',
+        'packages/*/types/test/**/*.ts',
+      ],
+      rules: {
+        camelcase: 'off',
+        'no-unused-expressions': 'off',
+        'array-callback-return': 'warn',
+      },
+    },
+  ],
+  ignorePatterns: [
+    'node_modules/',
+    'dist/',
+    'generated/',
+    '!.*',
+    'schema.graphql',
+  ],
+}

package.json

@@ -8,14 +8,25 @@
   "scripts": {
     "build": "lerna run build --concurrency 1 --scope \"{vue-apollo,@vue/apollo}*\"",
     "test": "lerna run test --concurrency 1",
-    "lint": "lerna run lint",
+    "lint": "eslint . --ext js,vue,ts",
     "release": "lerna publish"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.2.0",
+    "@typescript-eslint/parser": "^4.2.0",
+    "@vue/eslint-config-standard": "^6.0.0",
+    "@vue/eslint-config-typescript": "^7.0.0",
     "core-js": "^3.4.1",
     "esbuild": "^0.8.44",
     "esbuild-node-externals": "^1.0.2",
-    "lerna": "^3.18.4"
+    "eslint": "^7.19.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^5.0.0",
+    "eslint-plugin-vue": "^7.5.0",
+    "lerna": "^3.18.4",
+    "typescript": "^4.1.5"
   },
   "resolutions": {
     "eslint-scope": "^5.0.0",

packages/docs/src/.vuepress/components/sponsor-button.vue

@@ -1,6 +1,11 @@
 <template>
   <p class="sponsor-button">
-    <github-button href="https://github.com/sponsors/Akryum" data-icon="octicon-heart" data-size="large" aria-label="Sponsor @Akryum on GitHub">
+    <github-button
+      href="https://github.com/sponsors/Akryum"
+      data-icon="octicon-heart"
+      data-size="large"
+      aria-label="Sponsor @Akryum on GitHub"
+    >
       Sponsor on GitHub
     </github-button>
   </p>
@@ -11,13 +16,13 @@ import GithubButton from 'vue-github-button'
 
 export default {
   components: {
-    GithubButton
-  }
+    GithubButton,
+  },
 }
 </script>
 
 <style lang="stylus" scoped>
 .sponsor-button
   text-align center
   margin 24px 0
-</style>
+</style>

packages/docs/src/.vuepress/config.js

@@ -14,15 +14,15 @@ module.exports = {
       lang: 'zh-CN',
       title: 'Vue Apollo',
       description: '🚀 在你的 Vue.js 应用中集成 GraphQL！',
-    }
+    },
   },
   plugins: {
     '@vuepress/pwa': {
       serviceWorker: true,
       updatePopup: {
         '/': {
-          message: "New content is available.",
-          buttonText: "Refresh"
+          message: 'New content is available.',
+          buttonText: 'Refresh',
         },
       },
     },

packages/test-e2e-composable-vue3/.eslintignore

@@ -20,10 +20,5 @@ yarn build
 yarn test:e2e
 ```
 
-### Lints and fixes files
-```
-yarn lint
-```
-
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).

packages/test-e2e-composable-vue3/.eslintrc.js

@@ -5,11 +5,10 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "test": "yarn run lint --no-fix && yarn run test:e2e",
+    "test": "yarn run test:e2e",
     "test:e2e": "start-server-and-test api http://localhost:4042/.well-known/apollo/server-health test:e2e:client",
     "test:e2e:client": "vue-cli-service test:e2e --mode production --headless",
     "test:e2e:dev": "vue-cli-service test:e2e",
-    "lint": "vue-cli-service lint",
     "api": "node server.js"
   },
   "dependencies": {
@@ -27,25 +26,13 @@
   },
   "devDependencies": {
     "@types/shortid": "^0.0.29",
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-e2e-cypress": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-typescript": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
-    "@vue/eslint-config-standard": "^5.1.2",
-    "@vue/eslint-config-typescript": "^5.0.2",
     "axios": "^0.20.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^7.0.0-0",
     "start-server-and-test": "^1.10.6",
-    "tailwindcss": "^1.0.1",
-    "typescript": "^4.0.3"
+    "tailwindcss": "^1.0.1"
   }
 }

packages/test-e2e-composable-vue3/README.md

@@ -1,7 +1,7 @@
 <template>
   <div class="flex h-screen items-stretch bg-gray-100">
     <ChannelList class="w-1/4 border-r border-gray-200" />
-    <router-view class="flex-1 overflow-auto"/>
+    <router-view class="flex-1 overflow-auto" />
   </div>
 </template>
 

packages/test-e2e-composable-vue3/package.json

@@ -4,8 +4,8 @@ import { useQuery, useResult } from '@vue/apollo-composable'
 import { defineComponent } from 'vue'
 
 interface Channel {
-  id: string;
-  label: string;
+  id: string
+  label: string
 }
 
 export default defineComponent({
@@ -29,22 +29,28 @@ export default defineComponent({
 </script>
 
 <template>
-  <div v-if="loading" class="p-12 text-gray-500">
+  <div
+    v-if="loading"
+    class="p-12 text-gray-500"
+  >
     Loading channels...
   </div>
 
-  <div v-else class="flex flex-col bg-white">
+  <div
+    v-else
+    class="flex flex-col bg-white"
+  >
     <router-link
       v-for="channel of channels"
       :key="channel.id"
+      v-slot="{ href, navigate, isActive }"
       :to="{
         name: 'channel',
         params: {
           id: channel.id,
         },
       }"
       custom
-      #default="{ href, navigate, isActive }"
     >
       <a
         :href="href"

packages/test-e2e-composable-vue3/src/components/App.vue

@@ -60,14 +60,22 @@ export default defineComponent({
 </script>
 
 <template>
-  <div v-if="loading">Loading channel...</div>
+  <div v-if="loading">
+    Loading channel...
+  </div>
 
-  <div v-else class="flex flex-col">
+  <div
+    v-else
+    class="flex flex-col"
+  >
     <div class="flex-none p-6 border-b border-gray-200 bg-white">
       Currently viewing # {{ channel.label }}
     </div>
 
-    <div ref="messagesEl" class="flex-1 overflow-y-auto">
+    <div
+      ref="messagesEl"
+      class="flex-1 overflow-y-auto"
+    >
       <MessageItem
         v-for="message of channel.messages"
         :key="message.id"
@@ -77,7 +85,7 @@ export default defineComponent({
     </div>
 
     <MessageForm
-      :channelId="channel.id"
+      :channel-id="channel.id"
       class="flex-none m-2 mt-0"
     />
   </div>

packages/test-e2e-composable-vue3/src/components/ChannelList.vue

@@ -22,12 +22,19 @@ export default defineComponent({
 
 <template>
   <div class="m-6">
-    <button class="bg-green-200 rounded-lg p-4" @click="load()">
+    <button
+      class="bg-green-200 rounded-lg p-4"
+      @click="load()"
+    >
       Load list
     </button>
 
     <ul class="my-4">
-      <li v-for="(item, index) of list" :key="index" class="list-disc ml-6">
+      <li
+        v-for="(item, index) of list"
+        :key="index"
+        class="list-disc ml-6"
+      >
         {{ item }}
       </li>
     </ul>

packages/test-e2e-composable-vue3/src/components/ChannelView.vue

@@ -1,12 +1,12 @@
 module.exports = {
   plugins: [
-    'cypress'
+    'cypress',
   ],
   env: {
     mocha: true,
-    'cypress/globals': true
+    'cypress/globals': true,
   },
   rules: {
-    strict: 'off'
-  }
+    strict: 'off',
+  },
 }