当ブログをWordPress + Gridsome + Netlifyを利用してリニューアルしたのでGridsomeでサイト構築するために利用した環境構築を公開します。

Gridsomeとは？

GridsomeとはVue.jsを利用した静的サイトジェネレーターです。
ReactのGatsby.jsのVue.js版のようなものです。
まだ、昨年末頃にリリースされたできたてホヤホヤなので、まだまだ成長していくと思いますが、Vue使いとしてはこういうジェネレーターが出てきたことは嬉しいです。

インストール方法

グローバルにGridsomeをインストールします

# npm
$ npm install --global @gridsome/cli

# yarn
$ yarn add global @gridsome/cli

TypeScriptで使用する

Vue.jsをTypeScriptで使用することが最近増えてきたので、ここでもTypeScriptを選択します。
一番簡単な方法はスターターキットを使うのが良いです。

$ gridsome create {プロジェクト名} https://github.com/cleitonper/gridsome-starter-typescript.git

これで$ yarn run developでローカル確認、$ yarn run buildで静的ファイル生成されます。

TypeScriptのリンターを導入する

TypeScriptであろうとBabelであろうとリンターがあると安心するのでリンターを導入します。
最近はESLinterがTypeScriptをサポートするということでESLinter関連でリンターを利用できるようになりました。

$ yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-loader eslint-plugin-prettier eslint-plugin-vue prettier

ちょっと多いですが、上記をプロジェクトにインストールします。
(コード整形を行うprettierも利用します)

eslintrcの設定

リンター設定を行うために.eslintrc.ymlを作成します。
細かいところは個々それぞれ設定してください。

# .eslintrc.yml
parser: vue-eslint-parser
parserOptions:
  ecmaVersion: 2018
  sourceType: module
  parser: '@typescript-eslint/parser'
env:
  browser: true
  es6: true
extends:
  - plugin:@typescript-eslint/recommended
  - plugin:vue/recommended
  - prettier/@typescript-eslint
  - plugin:prettier/recommended

globals:
  Atomics: readonly
  SharedArrayBuffer: readonly

plugins:
  - vue

rules:
  prettier:
    - true
    - trailingComma: none
      tabWidth: 2
      singleQuote: true
      semi: false
      arrowParens: always

  eofline: false

prettierを使いたくない場合はprettier系を排除してjavascript-standard-style等に置き換えてもOKです。

リンターをビルド時に実行させる

このままではbuildやdevelop時に動作しないので動作させます。
プラグインが存在していればいいのですが、現在はそんなプラグインが存在していないので自作します。

公式にちょっとだけWebpack拡張の方法が書かれてますが、公開されているプラグインを解析したほうが早いです。

構成としては/プラグイン名/index.jsにすると良いです。
他にもあるので自分はplugins/eslint/index.jsとしました。

中身は下記です。

const { resolve } = require('path')

function EsLinterPlugin(api) {
  api.chainWebpack((config) => {
    config.module
      .rule('es-lint')
      .test(/\.(js|vue)$/)
      .pre()
      .use()
      .loader('eslint-loader')
      .options({ failOnError: true })
  })
}

module.exports = EsLinterPlugin

書き方はGridsome特有のパイプですが、パイプ自体はWebpackのプロパティ名だと考えれば比較的わかりやすいかと思います。
ruleは何でも良さそうですが、他とかぶらない名前にしておくのが良さそうです。
(実はまだ良くわかってない)

あとはgridsome.config.jsに記述すればビルド時に実行されます。

module.exports = {
  // 中略
  { use: '~/plugins/eslint' }
}