NuxtでStorybookつかおうとしたらセットアップで少しつまづくのでメモ
参考にさせていただいたところ
https://nuxtjs.org/guide/typescript/ https://qiita.com/hiropy0123/items/4ee85fdb9b19bc89056f
このメモでいいたかったこと
- StorybookインストールしたらNuxt起動できなくなるがcore-jsの2系をインストールしたら起動できた。 これ以外は他の記事の内容のまま。
他
- Typescriptを使う
- Prettier使ってみたかった
- Storybook使えるようになりたい。
環境
- node 10.16.0
- npm 6.10.0
- typescript 3.5.3
ざっくり手順
- プロジェクト作る
- 追加のインストール
- ディレクトリの整理
- nuxt.config.jsを.tsにして編集する
- 一旦、初回起動しておく
- eslintrc.jsを編集する
- .vscode/settings.jsonを作成、編集して保存時にコードフォーマットがかかるようにする
- tsconfig.jsonのプロパティを編集する
- Storybookをインストール
- 起動できるように修正する
- storybookのTS用設定
プロジェクト作る、追加のインストール、ディレクトリの整理をばばっと
# create-nuxt-appをインストールする npm i -g create-nuxt-app # プロジェクトの作成をする。 Prettierを選ぶ。あとは適当。でも依存関係があるかもしれないので書いておく create-nuxt-app my-app ? Choose the package manager Yarn ? Choose UI framework Vuetify.js ? Choose custom server framework Express ? Choose Nuxt.js modules Axios ? Choose linting tools ESLint, Prettier ? Choose test framework Jest ? Choose rendering mode Universal (SSR) # できたらそのディレクトリに移動 cd my-app # 追加でインストール yarn add -D @nuxt/typescript yarn add ts-node yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser yarn add -D node-sass sass-loader # appフォルダを作り移動させておく。Nuxt.jsビギナーズガイドという本の中に利点が書いてあった気がしますが、思い出せない。 mkdir app mv assets components layouts middleware pages plugins static store app # ファイル作成（初回起動時に自動で書き込まれるので空ファイルでOK） touch tsconfig.json
nuxt.config.jsを.tsにして編集する
- まず枠の部分を公式の指示通り。vuetifyを選んでいたのでそこは併せて書き換える
import NuxtConfiguration from '@nuxt/config'; import colors from 'vuetify/es5/util/colors'; const config: NuxtConfiguration = { // 既存の設定をそのまま } export default config;
srcDirを追記しておく
srcDir: 'app',
一旦、起動
yarn nuxt dev -o
起動が成功したら次に進む
eslintrc.jsを編集する
ここは好みの問題が大きいので他の人を参考にし辛い。
- .prettierrcがいたらややこしくなるので消す
- 基本的には推奨設定
- インデントは4
- セミコロンは必須にする
module.exports = {
root: true,
parser: 'vue-eslint-parser',
env: {
browser: true,
node: true
},
parserOptions: {
parser: '@typescript-eslint/parser'
},
extends: [
'@nuxtjs',
'plugin:nuxt/recommended',
'plugin:prettier/recommended',
'prettier',
'prettier/vue'
],
plugins: [
'prettier',
'@typescript-eslint'
],
// add your custom rules here
rules: {
'prettier/prettier': [
'error', {
'semi': true,
'singleQuote': true
}
],
'no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars': 'error',
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"vue/singleline-html-element-content-newline": "off",
"vue/no-v-html": "off",
"vue/html-closing-bracket-spacing": "off",
"vue/max-attributes-per-line": [2, {
"singleline": 5,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
"indent": ["error", 4],
"semi-spacing": ["error", {"after": true, "before": false}],
"semi-style": ["error", "last"],
"no-extra-semi": "error",
"no-unexpected-multiline": "error",
"no-unreachable": "error"
}
}
.vscode/settings.jsonを作成、編集して保存時にコードフォーマットがかかるようにする
{ "javascript.format.insertSpaceBeforeFunctionParenthesis": true, "typescript.format.insertSpaceBeforeFunctionParenthesis": true, "eslint.enable": true, "editor.formatOnSave": false, "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", { "language": "typescript", "autoFix": true }, { "language": "vue", "autoFix": true }, { "language": "vue-html", "autoFix": true } ], "eslint.run": "onType", "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatter.css": "prettier", "vetur.format.defaultFormatter.less": "prettier", "vetur.format.defaultFormatter.postcss": "prettier", "vetur.format.defaultFormatter.scss": "prettier", "vetur.format.defaultFormatter.stylus": "stylus-supremacy", "vetur.format.defaultFormatter.ts": "prettier", "vetur.validation.style": true, "vetur.validation.template": true }
- アプリを起動しなおすとLintのエラーがでるのでエラー出ているファイルを開いて保存し直す。 ※これコマンドで一発でできそうな気がするな。
tsconfig.jsonのプロパティを編集する
"baseUrl": "./app",
Storybookをインストール
npx -p @storybook/cli sb init --type vue
yarn storybookで起動することを確認するyarn nuxt dev -oは起動しない。
起動できるように修正する
下のコマンド叩いてから2系の最新を選んでインストール
yarn add core-js@latest2.6.2
storybookのTS用設定
yarn add -D path fork-ts-checker-webpack-plugin
- .storybook/webpack.config.js
const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
transpileOnly: true
},
}
]
},
{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
{
loader: "sass-loader",
options: {
importLoaders: 0,
alias: {
'assets': path.resolve(__dirname, '../app/assets')
}
}
},
{
loader: "sass-resources-loader",
options: {
resources: [
path.resolve(__dirname, '../app/assets/styles/variables/*.scss'),
path.resolve(__dirname, '../app/assets/styles/common.scss')
]
}
}
]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'file-loader'
},
{
test: /\.pug$/,
loader: 'pug-plain-loader'
}
]
},
plugins: [
new ForkTsCheckerWebpackPlugin()
],
resolve: {
extensions: ['.ts', '.js', '.vue', '.json'],
alias: {
'static': path.resolve(__dirname, '../app/static'),
'assets': path.resolve('../app/assets'),
'@': path.resolve(__dirname, '../app'),
'~': path.resolve(__dirname, '../app')
}
}
};
