VSCode エディター環境設定〜GraphQL・Nexus・Prisma〜

eslint・prettierを含む基本設定

VSCode に乗り換えてはじめてやること！〜初心者向け〜

背景プログラミングの為には、自分と合うテキストエディターを選ぶって大事ですね。状況によって求める機能なども変わって来ますし。。2015 年頃から Atom を最初に使用したが使えば使うほど重すぎて使えるものにならなかったので、Sublime...

www.jacepark.com

2023.10.17

Nexus用 Snippet を追加する

自作で利用中のスニペットです。

これを参考に自身のスニペットに変更するのも良いかもしれません！

macOSでは ~/Library/Application\ Support/Code/User/snippets/nexus-graphql-sdl.json.code-snippets ファイルを作成します。

try🐶everything myproject$ cat ~/Library/Application\ Support/Code/User/snippets/nexus-graphql-sdl.json.code-snippets 
...
{
  "Jace Nexus objectType": {
    "scope": "javascript,typescript",
    "prefix": "nexo",
    "body": [
      "import { objectType } from \"nexus\";",
      "\nexport const ${1} = objectType({",
      "\tname: \"${1}\",",
      "\tdefinition(t) {",
      "\t\tt.nonNull.id(\"id\")",
      "\t}",
      "});"
    ],
    "description": "Jace Nexus objectType"
  },
  "Jace Nexus extendType": {
    "scope": "javascript,typescript",
    "prefix": "nexex",
    "body": [
      "import { extendType, intArg } from \"nexus\";",
      "\nexport const ${1} = extendType({",
      "\ttype: \"Query\",",
      "\tdefinition: t => {",
      "\t\tt.field(\"userById\", {",
      "\t\t\ttype: \"User\",",
      "\t\t\targs: { id: intArg(\"id of the user\") },",
      "\t\t\tresolve: (root, args, ctx) => ctx.user.getById(args.id),",
      "\t\t})",
      "\t},",
      "})"
    ],
    "description": "Jace Nexus extendType"
  },
  "Jace Nexus subscriptionType": {
    "scope": "javascript,typescript",
    "prefix": "nexsb",
    "body": [
      "import { subscriptionType } from \"nexus\";",
      "\nexport const ${1} = subscriptionType({",
      "\tname: \"${1}\",",
      "\tdefinition(t) {",
      "\t\tt.nonNull.id(\"id\")",
      "\t}",
      "});"
    ],
    "description": "Jace Nexus subscriptionType"
  },
  "Jace Nexus unionType": {
    "scope": "javascript,typescript",
    "prefix": "nexun",
    "body": [
      "import { unionType } from \"nexus\";",
      "\nexport const ${1} = unionType({",
      "\tname: \"${1}\",",
      "\tdescription:'',",
      "\tdefinition(t) {",
      "\t\tt.nonNull.id(\"id\")",
      "\t},",
      "\tresolveType: (item)=>item.name",
      "});"
    ],
    "description": "Jace Nexus unionType"
  },

  "Jace Nexus interfaceType": {
    "scope": "javascript,typescript",
    "prefix": "nexin",
    "body": [
      "import { interfaceType } from \"nexus\";",
      "\nconst Node = interfaceType({",
      "\tname: \"Node\",",
      "\tdefinition(t) {",
      "\t\tt.id('id', { description: 'GUID for a resource' })",
      "\t},",
      "});"
    ],
    "description": "Jace Nexus interfaceType"
  },

  "Jace Nexus enumType": {
    "scope": "javascript,typescript",
    "prefix": "nexen",
    "body": [
      "import { enumType } from \"nexus\";",
      "\nexport const ${1} = enumType({",
      "\tname: \"${1}\",",
      "\tmembers: [],",
      "\tdescription: \"\"",
      "});"
    ],
    "description": "Jace Nexus enumType"
  },

  "Jace Nexus inputObjectType": {
    "scope": "javascript,typescript",
    "prefix": "nexip",
    "body": [
      "import { inputObjectType } from \"nexus\";",
      "\nexport const ${1} = inputObjectType({",
      "\tname: \"${1}\",",
      "\tdefinition(t) {",
      "\t\tt.nonNull.string(\"key\")",
      "\t\tt.int(\"answer\")",
      "\t},",
      "});"
    ],
    "description": "Jace Nexus inputObjectType"
  },
  "Jace Nexus typeFiled": {
    "scope": "javascript,typescript",
    "prefix": "nextf",
    "body": "t.field(\"${1}\",{type:\"${1}\"})",
    "description": "Jace Nexus type field"
  }
}
try🐶everything myproject$ 

作成したら、

VSCode で 任意のファイル ( *.ts ) を開き nex と入力すると関連スニペットリスト ( 右側 )・それぞれのプレビュー ( 左側 ) が表示されます。

VSCode 拡張 ( GraphQL / Prisma )を追加する

• Prisma (prisma.prisma): https://marketplace.visualstudio.com/items?itemName=Prisma.prisma
• GraphQL (graphql.vscode-graphql): https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql
  > graphqlrc.yml 設定: https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql

try🐶everything myproject$ touch .graphqlrc.yml
try🐶everything myproject$ cat .graphqlrc.yml 
schema: "schema.graphql"
documents: "src/**/*.{graphql,js,ts,jsx,tsx}"
try🐶everything myproject$

settings.json に下記のように追加します。

try🐶everything myproject$ cat  ~/Library/Application\ Support/Code/User/settings.json
{
  ...
  "editor.formatOnSave": true,
  ...
  "[graphql]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[prisma]": {
    "editor.defaultFormatter": "Prisma.prisma"
  }
}