作成したテンプレートは以下にあります。
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で上書きしてくれる
- workspace設定の内容を
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.js を nuxt.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-prettier の READMEに書かれているよように
{
"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.vue と pages/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 にアクセスして以下の画面が表示されれば完了。
