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

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

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

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

```shell
$ node -v
> v8.9.4
```

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

# 環境構築
## vue-cli のインストール
```shell
$ yarn global add vue-cli
```

または、

```shell
$ npm install -g vue-cli
```

## vue-cli のインストール確認
```shell
$ yarn global list | grep vue-cli
info "vue-cli@2.9.3" has binaries:
```

または、

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

## プロジェクト作成
いくつか質問されるが、サンプルなので全てEnterキーで進めてOK

```shell
$ vue init webpack vue-cli-sample
? Project name vue-cli-sample
? Project description A Vue.js project
? Author ezawa800 <sho.ezawa.dev@gmail.com>
? 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
```

## パッケージのインストール
```shell
$ yarn install
```

または、

```shell
$ npm install
```

# Pugを使えるようにする
## インストール
```bash
$ yarn add -D pug pug-loader
```

または

```bash
$ npm i -D pug pug-loader
```

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

```vue: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で書き換え  
  
```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の設定を追加

```js:build/webpack.base.conf.js
  module: {
    rules: [
      {
        ...
      },
      {
        test: /\.pug$/,
        loader: 'pug-loader'
      }
    ]
  },
```

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

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

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

```shell
$ yarn run dev
```

または、

```shell
$ npm run dev
```

# Stylusを使えるようにする
## インストール

```shell
$ yarn add -D stylus stylus-loader
```

または、

```shell
$ npm i -D stylus stylus-loader
```

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

```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>
```

# 開発モードで実行
```shell
$ yarn run dev
```

または、

```shell
$ 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`ファイルに以下のように追記しました。

```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](https://github.com/prettier/prettier-atom/issues/282)