DashのSnippet機能を活用したらNuxt.jsの開発がめちゃめちゃ捗った【Nuxt.js × Vuetify】

これは、Nuxt.js Advent Calendar 2019の15日目の記事です。

Snippet機能を活用する！

みなさん、こんにちは。どんぶラッコです。
普段Nuxt.js + Vuetify を使って開発を進めることが多いのですが、「あれ、あの書き方ってどう書くんだっけ…」となる事、ありませんか？

そこで、DashというアプリのSnippet機能を使ってNuxt開発用のリファレンスを作ったところ、作業が非常に捗るようになりました。

https://kapeli.com/dash

Snippet機能いうのは、つまりエイリアスを作ることができる機能です。

このような設定をした後、;nuxt-startと入力をすると…

なんと！書き換えをしてくれる機能です。

今回は、私が登録しているスニペットをご紹介したいと思います。

前提条件

スニペットの名前についてはどのように登録しても問題ありませんが、私は
;[ライブラリ名 or フレームワーク名]-[メソッド]
という形式で登録をしています。

今回はNuxt.jsのアドベントカレンダーですが、せっかくなのでVuetifyのエイリアスについても合わせて紹介します♪

また、私はyarnで管理をしているため、yarnでスニペットを作成しています。

;nuxt-*** 系

;nuxt-start or ;nuxt-create

npx create-nuxt-app [appName]

;nuxt-template or ;nuxt-component

<template>
  <v-row>
    test
  </v-row>
</template>
<script>
export default {
  components: {

  },
  props: {

  },
  data () {
    return {

    }
  },
  computed: {

  },
  methods: {

  }
}
</script>

コンポーネントを作成する際のテンプレートです。

;nuxt-typescript

yarn add --dev @nuxt/typescript-build && \
echo '1. `nuxt.config.js` に `buildModules: ['@nuxt/typescript-build']` を追加' && \ 
echo '2. `tssonfig.json` を作り、`;nuxt-tsconfig` を実行'

TypeScriptの初期設定についてもスニペットを作成しています。
https://typescript.nuxtjs.org/ja/ の情報を参考にして作成していますが、手順が定期的に更新されるので都度確認した方が良いです。

また、@nuxt/typescript-buildのインストールが成功した場合、echoでその後の手順を表示させるようにしています。

;nuxt-tsconfig

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

;nuxt-v-model or ;vue-v-model

// v-model="hoge"
v-bind:value="hoge"
v-on:input="hoge = $event.target.value"

v-modelがなんの糖衣構文であるかを失念してしまうことが多いので、登録しておくとリファレンスとしても便利です。正確には;vueですが、Nuxtを用いて開発をすることが大半なので;nuxtの接頭辞でも登録をしてあります。

;vuetify-***系

以前Vuetifyを使っているときによく見に行くページと情報 というQiita記事を投稿しましたが、ここに記載したものを一通り登録しています。

;vuetify-layout

<v-container>
  <v-row>
    <v-col>
    </v-col>
  </v-row>
</v-container>

;vuetify-css-weight

font-weight-bold

;vuetify-css-color

例として、赤文字で、暗さ４を設定した時のCSSを登録しています

red--text text--darken-4

他にも”これもあったら便利じゃない？”, “こうやって登録した方がいいんじゃない？”というものがあったら、是非コメントで教えてください！