Gridsome 開発環境整備

Gridsome のプロジェクトに Eslint+Prettier をインストールして開発環境を整備していきます

Gridsome とは

• Gridsomeは Vue.js ベースの Jamstack フレームワーク
• React ベースの静的サイトジェネレータである Gatsby にインスパイアされている
  • データ層では Gatsby と同じく GraphQL を使う
  • 現在公開されている Gridsome 用のプラグインは Gatsby 用プラグインからの移植のものも多いらしい

Jamstack とは

• Jamstack って何なの？何がいいの？ - Qiitaを参考に…
• Jamstackの jam は Javascript/APIs/Markup の頭文字
• ビルド時に API などを通じて動的にデータを取得して静的なコンテンツを生成するので高速かつ堅牢

Gridsome プロジェクト作成

Introduction - Gridsomeの通り進めていく

1. Gridsome CLI ツールのインストール

   yarn global add @gridsome/cli
   

2. プロジェクト作成

   gridsome create ${PROJECT_NAME}
   

   • Git 管理

     cd ${PROJECT_NAME}
     git init
     git add .
     git commit
     

     • 自動的にはgit initされないので…

Eslint+Prettier インストール

Vue CLI で Eslint を有効にして作成したプロジェクトやGridsome に ESLint、Prettier を導入する | K noteを参考にする

yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-vue eslint-plugin-gridsome babel-eslint

• Eslint にもコードフォーマッタ機能はついているが、Prettier の方が高機能なので併用する
• eslint-plugin-prettierについて
  • いつのまにか eslint-plugin-prettier が推奨されないものになってた | K noteで言及されている通りeslint-plugin-prettierは非推奨らしい（原文：Integrating with Linters · Prettier）
  • 気になるようなら対応しましょう（少し試してみて lint 結果にピンとこなかったので今回は対応しませんでした）
• babel-eslintについて
  • babel-eslintは@babel/eslint-parserにアップデートされているので、これも気になるようなら対応しましょう

Eslint, Prettier のコンフィグ作成

• .eslintrc.js作成

  • ここも Vue CLI で Eslint を有効にして作成したプロジェクトやGridsome に ESLint、Prettier を導入する | K noteを参考にする

  module.exports = {
    root: true,
    env: {
      node: true,
    },
    extends: [
      "plugin:vue/essential",
      "plugin:gridsome/recommended",
      "plugin:prettier/recommended",
      "eslint:recommended",
    ],
    parserOptions: {
      parser: "babel-eslint",
    },
    rules: {
      "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
      "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    },
  };
  

  • plugin:vue/recommendedだと Lint が少しきつかったのでplugin:vue/essentialにしています
  • extendsの順番でルールの適用順が変わるので適宜調整してください

• .prettierrc.js作成（適宜）

  • 必要あればConfiguration File · Prettierを参考に設定する

Lint コマンドの追加

Gridsome + Eslint: the complete Guideを参考に Vue CLI のプロジェクトと同様にyarn lintで Lint できるようにする

1. Vue CLI インストール

   yarn add -D @vue/cli-service @vue/cli-plugin-eslint
   

2. package.json編集

     "scripts": {
       "build": "gridsome build",
       "develop": "gridsome develop",
       "explore": "gridsome explore",
       "lint": "vue-cli-service lint"
     },
   

3. 実行

   yarn lint