使用 ESLint 檢查 GraphQL | 點燈坊

只要在 Vue Project 下安裝 Vue Apollo 之後，yarn serve 就會提示是否讓 ESLint 也檢查 GraphQL，只要依照本文步驟，就能消除 Warning 並檢查 GraphQL。

Version

macOS Catalina 10.15.1
WebStorm 2019.2.4
Node 10.16.3
Vue CLI 4.0.5
Vue 2.6.10
Vue Apollo 3.0.0-beta.11
ESLint Plugin GraphQL 3.1.0

Vue Apollo

Vue 安裝 Vue Apollo 後，只要 yarn serve 就會出現以上 warning，提示你使用 eslint-plugin-graphql。

ESLint GraphQL

$ yarn add eslint-plugin-graphql --dev

使用 Yarn 安裝 eslint-plugin-graphql 在 local 的 devDependencies。

Vue Config

vue.config.js

module.exports = {
  pluginOptions: {
    apollo: {
      lintGQL: true
    }
  }
}

在 Vue project 根目錄下建立 vue.config.js，增加以上設定啟動 ESLint Plugin GraphQL。

Conclusion

• 經過以上設定，ESLint 不只能檢查 GraphQL，且 yarn serve 也不再出現任何 warning

Reference

Apollo GraphQL, Eslint-plugin-graphql