Closed4

Vue3をTypeScriptで始める方法

tristartristar

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を別々にする余地はありそう。

tristartristar

初期状態の.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を直接使うようにすれば良さそう。

tristartristar

以下のように設定して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"
    }
}
このスクラップは2022/10/07にクローズされました