Open4

Vue3をTypeScriptで始める方法

以前はvuejs/vue-next-webpack-previewを参考にさせてもらったものの、正式リリースされてしばらく時間が経っているので改めてどんな方法があるか調べてみる。

Vueの公式でTypeScriptに関するページがあるので、こちらを参考にしてみる。

https://v3.vuejs.org/guide/typescript-support.html#typescript-support

Vue3を使うには以下が必要だった。

npx @vue/cli@next create vue-project

vue-cli(Vue CLI v5.0.0-alpha.8)のプロンプトに対しては以下のように回答

質問 回答
Check the features needed for your project Choose Vue version, Babel, TS, Router, CSS Pre-processors, Linter, Unit
Choose a version of Vue.js that you want to start the project with 3.X
Use class-style component syntax? No
Use Babel alongside TypeScript? Yes
Use history mode for router? Yes
Pick a CSS pre-processor Sass/SCSS (with dart-sass)
Pick a linter / formatter config Prettier
Pick additional lint features Lint on save
Pick a unit testing solution Jest
Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

これだけでVue3+TypeScript+ESLint+Prettierな構成は一応揃った。

eslint-plugin-prettier を使用することになっているので、
この部分をESLintとPrettierを別々にする余地はありそう。

初期状態の.eslintrc.jsは以下のような感じ。

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)",
      ],
      env: {
        jest: true,
      },
    },
  ],
};

@vue/prettier@vue/prettier/@typescript-eslintがそのまま使ってよいか気になる。

@vue/eslint-config-prettierを使用すると内部で以下のようになっているので、
これを使うことでeslint-plugin-prettier が使われるようなので、そのまま使わない方が良さそう。
ESLintとのルール競合を防ぐためのeslint-config-prettiereslint-config-prettier-vueは必要なので、これらを自分で定義して使うことにする。

node_modules/@vue/eslint-config-prettier/index.js

module.exports = {
  plugins: ['prettier'],
  extends: [
    require.resolve('eslint-config-prettier'),
    require.resolve('eslint-config-prettier/vue')
  ],
  rules: {
    'prettier/prettier': 'warn'
  }
}

@vue/prettier/@typescript-eslintの方は以下のような内容。

node_modules/@vue/eslint-config-prettier/@typescript-eslint.js

module.exports = require('eslint-config-prettier/@typescript-eslint')

こちらはeslint-config-prettier/@typescript-eslintを直接使うようにすれば良さそう。

以下のように設定してLint+整形が出来るようになった。

 module.exports = {
 root: true,
 env: {
     node: true,
 },
 extends: [
     "plugin:vue/vue3-essential",
     "eslint:recommended",
     "@vue/typescript/recommended",
-    "@vue/prettier",
-    "@vue/prettier/@typescript-eslint",
+    "eslint-config-prettier",
+    "eslint-config-prettier/vue",
+    "eslint-config-prettier/@typescript-eslint",
 
 ],
 parserOptions: {
     ecmaVersion: 2020,
 },
 rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
 },
 overrides: [
     {
     files: [
         "**/__tests__/*.{j,t}s?(x)",
         "**/tests/unit/**/*.spec.{j,t}s?(x)",
     ],
     env: {
         jest: true,
     },
     },
 ],
 };

VSCode側は以下の指定が必要だった。
("editor.defaultFormatter"はTypeScript拡張と競合したため必要だった)

{
    "editor.formatOnSave": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}
ログインするとコメントできます