Vue.js のサンプルアプリケーションを立ち上げるときの手順メモ #TypeScript

欲しいもの

Vue
TypeScript
vue-property-decorator
eslint
prettier
tailwindcss

tailwindcss 以外は Vue CLI でプロジェクトを作成するとデフォルトで入る。

手順

Vue CLI でプロジェクト作成

$ vue create vue-sample

vue-ts-sample ([Vue 2] babel, typescript, eslint) を選択

? Please pick a preset: (Use arrow keys)
❯ vue-ts-sample ([Vue 2] babel, typescript, eslint)
  vue-simple-sample ([Vue 2] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

tailwindcss を追加する（スタイルをあてるのが楽だから）

$ yarn add tailwindcss

tailwindcss を有効にするために src/postcss.config.js と src/assets/index.css を追加

src/postcss.config.js

const autoprefixer = require("autoprefixer");
const tailwindcss = require("tailwindcss");

module.exports = {
  plugins: [tailwindcss, autoprefixer]
};

src/assets/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

src/assets/index.css を main.ts で import

main.ts

import Vue from "vue";
import App from "./App.vue";
import "./assets/index.css";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

package.json の eslint の extends を下記のような感じにする。Vue のスタイルガイドになるべく沿うようにする。

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/recommended",
      "eslint:recommended",
      "@vue/prettier",
      "@vue/typescript/recommended",
      "@vue/prettier/@typescript-eslint"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {}
  }

あとはデフォルトの無駄な HelloWorld などを削除して終わり。

ハマったところ

VSCode 上で ESLint が効かない

原因

ESLint Server が立ち上がっていなかった

解決方法

VSCode の画面右下の「ESLint」をクリックして有効化

prettier の自動フォーマットが効かない

原因

package.json の設定漏れ

解決方法

 "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/recommended",
      "eslint:recommended",
      "@vue/typescript/recommended",
+     "@vue/prettier",
      "@vue/prettier/@typescript-eslint"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {}
  },

@vue/prettier/@typescript-eslint だけで prettier が有効になると勘違いしていました。

参考

https://qiita.com/hisako135/items/49c05633de4dadfcd627