Vue3をTypeScriptで始める方法
tristar以前はvuejs/vue-next-webpack-previewを参考にさせてもらったものの、正式リリースされてしばらく時間が経っているので改めてどんな方法があるか調べてみる。
tristarVueの公式でTypeScriptに関するページがあるので、こちらを参考にしてみる。
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を別々にする余地はありそう。
tristar初期状態の.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-prettier、eslint-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を直接使うようにすれば良さそう。
tristar以下のように設定して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"
}
}