Vue.js + Pug + Stylus のサンプル開発環境

本記事で構築した環境は以下で公開しています。
https://github.com/ezawa800/vue-pug-stylus-starter

やりたいこと

Vue.jsを勉強するためにサンプルコードを書いて遊ぶ環境がほしい。
ついでにPugやStylusで書けるようにしたい。

前提

node v8.9.4 をインストール済み

$ node -v
> v8.9.4

また、yarnコマンドを使いたい方は事前にインストールが必要です。

環境構築

vue-cli のインストール

$ yarn global add vue-cli

または、

$ npm install -g vue-cli

vue-cli のインストール確認

$ yarn global list | grep vue-cli
info "vue-cli@2.9.3" has binaries:

または、

$ npm list -g | grep vue-cli
└─┬ vue-cli@2.9.3

プロジェクト作成

いくつか質問されるが、サンプルなので全てEnterキーで進めてOK

$ vue init webpack vue-cli-sample
? Project name vue-cli-sample
? Project description A Vue.js project
? Author ezawa800 <[e-mail]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

$ cd vue-cli-sample

パッケージのインストール

$ yarn install

または、

$ npm install

Pugを使えるようにする

インストール

$ yarn add -D pug pug-loader

または

$ npm i -D pug pug-loader

*.vueファイルの書き換え

*.vueファイル内の<template>にlang="pug"を追記し、中身をHTMLからPugに書き換える

src/App.vue

<template lang="pug">
  div#app
    img(src="./assets/logo.png")
    router-view
</template>

index.htmlの書き換え

1.index.html -> index.pug にリネーム
2.index.pug の中身をPugで書き換え

index.pug

doctype html
html
  head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width,initial-scale=1.0')
    title vue-cli-sample
  body
    #app
    // built files will be auto injected

3.build/webpack.base.conf.js へ pug-loaderの設定を追加

build/webpack.base.conf.js

  module: {
    rules: [
      {
        ...
      },
      {
        test: /\.pug$/,
        loader: 'pug-loader'
      }
    ]
  },

4.build/webpack.dev.conf.jsのtemplateの指定を変更

  plugins: [
    ...
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.pug', // <- index.html
      inject: true
    }),

5.build/webpack.prod.conf.jsのtemplateも同様に変更
6.開発モードで実行中の場合は再起動

$ yarn run dev

または、

$ npm run dev

Stylusを使えるようにする

インストール

$ yarn add -D stylus stylus-loader

または、

$ npm i -D stylus stylus-loader

*.vueファイルの書き換え

*.vueファイル内の<style>にlang="stylus"を追記し、中身をCSSからStylusに書き換える

<style lang="stylus">
#app
  font-family "Avenir", Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50;
  margin-top 60px
</style>

開発モードで実行

$ yarn run dev

または、

$ npm run dev

http://localhost:8080/ にアクセスすると初期状態のページが表示される。

おまけ

ESLintとPrettierの併用

私の環境ではAtomにprettier-atomというパッケージを入れているため、デフォルトだとファイルを変更・保存するたびにPrettierが勝手にJSやCSSを整形しています。
しかし、vue-cliで作ったプロジェクトにデフォルトで入っているESLintと整合性が取れていないため、コンパイル時に警告が出てしまいます。

そこでESLintとPrettierを併用できるように設定してみます。

prettier-atomを主体にする

「prettier eslint 併用」のように検索すると、ESLintの実行時にPrettierも一緒に動かすようなやり方がヒットしました。
しかし、このやり方だとprettier-atomパッケージは不要で、linter-eslintパッケージが$ eslint --fixを実行する際にPrettierが動く形になります。

それだと、ESLintを導入していないプロジェクトで作業するときにいちいちprettier-atomを有効にし直さないといけないので今回はprettier-atomを主体でやってみました。

ESLint Integrationにチェックを入れるだけ

1. [Atom]の[Preferences...]を選んで[Settings]タブを開く
2. [Packages]でprettier-atomを検索して[Settings]をクリック
3. [ESLint Integration]にチェックを入れて完了
4. ついでに[Format Files on Save]が未チェックの場合はチェックしておく

これで、prettier-atomが変更・保存時に自動整形するとき、ESLintのルールを適用してくれます。
例えば、デフォルトだとprettier-atomはJavascriptの行末にセミコロンを付けますが、ESLint Integration有効化後は行末セミコロンを削除してくれるようになります。

space-before-function-parenの警告が消えない

ESLint Integration有効化後にspace-before-function-parenの警告だけ残ってしまったので、.eslintrc.jsファイルに以下のように追記しました。

  rules: {
    ...,
    // disallow a space before function parenthesis
    'space-before-function-paren': ['error', 'never'],
  }
  

どうやらprettier-atom側の問題じゃないらしい？
ref: space-before-function-paren rule not applied to formatted code · Issue #282 · prettier/prettier-atom · GitHub