Help us understand the problem. What is going on with this article?

TypeScriptなNuxt.jsをVSCodeで開発

作成したテンプレートは以下にあります。
c8112002/nuxt-ts-template

1. プロジェクト作成

今回作成するプロジェクトはSPAモードでフォーマッタにPrettierを使用します。

$ yarn create nuxt-app nuxt-ts-template

? Project name nuxt-ts-template
? Project description My dazzling Nuxt.js project
? Use a custom server framework none
? Choose features to install Linter / Formatter, Prettier, Axios
? Use a custom UI framework none
? Use a custom test framework none
? Choose rendering mode Single Page App
? Author name c8112002
? Choose a package manager yarn

2. VSCodeの設定

2-1. Extensionの追加

以下のExtensionを追加。

  • Vetur
    • Vueのシンタックスハイライトや補完ができるようになる
  • Vue Peek
    • template内からコンポーネントへのジャンプやPeek Definitionができるようになる
  • ESLint
    • ワークスペース(なければグローバル)のESLintを使って警告やファイル保存時にauto fixができるようになる
  • EditorConfig for VS Code
    • workspace設定の内容を .editorconfig で上書きしてくれる

2-2. workspace設定

.js .ts .vue ファイルの保存時にESLintを走らせます。

.vscode/settings.json を追加し、以下を追記。

{
  "eslint.validate": [
    {
      "language": "javascript",
      "autoFix": true
    },
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
  "vetur.format.defaultFormatter.html": "prettier"
}

3. TypeScript化

3-1. 必要なモジュールをインストール

$ yarn add -D @nuxt/typescript
$ yarn add ts-node

3-2. tsconfig.jsonの作成

Nuxt TypeScript サポートによると、

情報: tsconfig.json は nuxt コマンドを初回実行時に自動的にデフォルト値で更新されます。

とのことなので、

$ touch tsconfig.json
$ yarn run nuxt

これで tsconfig.json に適当な設定がされる。

次作業で修正する nuxt.config.ts 内で package.json をimportする部分があるので、 tsconfig.json に以下を追記。

"resolveJsonModule": true,

参照: TypeScript --resolveJsonModule

3-3. nuxt.config.jsをTypescript化

nuxt.config.jsnuxt.config.ts にリネームし以下のように修正。

import NuxtConfiguration from '@nuxt/config'
import pkg from './package.json' // <--拡張子を追加

const config: NuxtConfiguration = {

  //・・・

  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        if (!config.module) return // <--追記
        config.module.rules.push({
          enforce: 'pre',
          test: //.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

export default config

3-4 ESLintの設定

$ yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

package.json のlintを修正。

・・・
  "scripts": {
    ・・・  
    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .", // <- .tsを追加
    ・・・
  },
・・・

.eslintrc を修正。

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    'parser': '@typescript-eslint/parser',
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended',
    'prettier',
    'prettier/vue',
    'prettier/@typescript-eslint',
  ],
  plugins: [
    'prettier',
    '@typescript-eslint'
  ],
  // add your custom rules here
  rules: {
    "prettier/prettier": "error",
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "error"
  }
}

※eslint-plugin-prettierの設定について

eslint-plugin-prettierREADMEに書かれているよように

{
  "extends": ["plugin:prettier/recommended"]
}

と設定すれば、下記の設定は省略できるはずですが、

extends: [
    'prettier',
  ],
  ・・・
  plugins: [
    'prettier',
  ],
  ・・・
  rules: {
    "prettier/prettier": "error",
  }

この設定だとVSCodeが .prettierrc の変更を検知してくれませんでした。

今回はこちらを参考に "extends": ["plugin:prettier/recommended"] を使わないで対応しました。

同じisssue上で指摘されていますが、terminal上から yarn run lint --fix のようにeslintを実行するとちゃんと .prettierrc が読み込まれているので、VSCodeのESLintエクステンションのバグでしょうか?

3-5 vue-property-decorator導入

$ yarn add vue-class-component vue-property-decorator

components/Logo.vuepages/index.vue をクラス形式に変更。

components/Logo.vue

<template>
・・・
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class Logo extends Vue {}
</script>
・・・

pages/index.vue

<template>
・・・
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import Logo from '~/components/Logo.vue'

@Component({
  components: {
    Logo
  }
})
export default class Index extends Vue {}
</script>

4. 動作確認

開発サーバ起動。

$ yarn run dev

http://localhost:3000 にアクセスして以下の画面が表示されれば完了。

スクリーンショット 2019-05-17 13.38.59のコピー.jpg

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした