Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
12
Help us understand the problem. What is going on with this article?
@tristar

Vue+TypeScriptをESLint+Prettierでなるべくコンパクトな設定でLint+整形する

概要

Vue+TypeScriptを使用したソースコードに対しESLintとPrettierを適用するにあたり、ESLint関連のパッケージそれぞれがどのような役割を持っているか調べてみると思ったよりもコンパクトな内容(plugins,parser,parserOptionsなどは指定しなくても大丈夫)でLint+整形が出来ることを確認できたため、最終的に確認できた設定と調べた内容を共有します。

動作確認はVSCodeで行っています。

事前に準備が必要なもの

  • Vue3+TypeScriptで動作するソースコード (Vue+TypeScriptの組み合わせを試したのがVue3だったため。Vue2でもこの記事の内容はほとんど変わらないと思います)
  • VSCode

    • ESLintプラグイン(dbaeumer.vscode-eslint v2.1.8)
    • 以下の設定が行われていること (eslint.validateは拡張子tsに適用するために必要でした)

      {
          "editor.codeActionsOnSave": {
              "source.fixAll.eslint": true
          },
          "eslint.validate": [
              "typescript"
          ],
      }
      

最終的に必要だったパッケージと.eslintrc.js

最終的な.eslintrc.jsとインストールしたパッケージの情報は以下の通りです。
(ルール設定は別途必要になると思いますが、この記事では省略しています)

.eslintrc.js

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",  // "plugin:vue/vue3-strongly-recommended"もあります
    "@vue/typescript",
    "plugin:prettier/recommended",
    "prettier/vue",  // 必須ではありません(ルールを書き換えるだけのため)
    "prettier/@typescript-eslint", // 必須ではありません(ルールを書き換えるだけのため)
  ],
  env: {
    node: true,
  },
  rules: {},
};

yarnでインストールしたパッケージ

yarn add -D eslint prettier eslint-config-prettier eslint-plugin-prettier
yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
yarn add -D eslint-plugin-vue@next @vue/eslint-config-typescript

参考: 今回の作業後のpackage.json(クリックで展開)
{
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --host 0.0.0.0",
    "build": "webpack --env.prod"
  },
  "dependencies": {},
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.1.1",
    "@typescript-eslint/parser": "^4.1.1",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^5.1.0",
    "css-loader": "^4.2.2",
    "eslint": "^7.9.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-vue": "^7.0.0-beta.3",
    "file-loader": "^6.0.0",
    "mini-css-extract-plugin": "^0.11.0",
    "postcss-loader": "^4.0.2",
    "prettier": "^2.1.2",
    "tailwindcss": "^1.8.10",
    "ts-loader": "^8.0.3",
    "typescript": "^4.0.2",
    "url-loader": "^4.0.0",
    "vue": "^3.0.0",
    "vue-loader": "^16.0.0-beta.7",
    "vue-router": "^4.0.0-beta.10",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}


詳細

以下は、上記の結果に至るまでの過程をまとめたものです。

ESLint+Prettierのインストール

以下でESLintとPrettierをインストールします。

yarn add -D eslint prettier eslint-config-prettier eslint-plugin-prettier

この時点での.eslintrc.jsは以下のような内容にします。
この設定でESLint+Prettierが動作することの説明は、「ESLint と Prettier の共存設定とその根拠について - Ojisan」が参考になりました。

module.exports = {
  extends: ["eslint:recommended", "plugin:prettier/recommended"],
  env: {
    node: true,
  },
  rules: {},
};

TypeScriptに対するESLintを有効にする

TypeScriptのLintと整形を有効にするために以下をインストールします。
この点は「Getting Started - Linting your TypeScript Codebase」を参考にしています。

yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

この時点での.eslintrc.jsは以下のような内容にします。
(後述しますが、ここで追加している内容は@vue/eslint-config-typescriptで同様の設定が行われるため、Vue3+TypeScriptの組み合わせでは最終的に削除できます)

 module.exports = {
   extends: [
     "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
     "plugin:prettier/recommended",
   ],
+   plugins: ["@typescript-eslint"],
+   parser: "@typescript-eslint/parser",
+   parserOptions: {
+     sourceType: "module",
+   },
   env: {
     node: true,
   },
   rules: {},
 };

ここまでで、.tsファイルに対するLintと整形は出来るようになると思います。

Vue3のSFCに対してLintが行えるようにする

上記の段階では.vueのSFCに対してはLINT等が行われないため、以下を追加でインストールします。

yarn add -D eslint-plugin-vue@next @vue/eslint-config-typescript

ここで追加した2つのパッケージですが、node_modulesフォルダの下のパッケージのソースコードを確認する限り、以下のようなことを行っています。

パッケージ 内容
eslint-plugin-vue 公式サイトにも書かれていますが、このパッケージにより.vueのSFC内にある<template>,<script>タグがESLintによって解析可能になるようです。ソースコードはnode_modules/eslint-plugin-vue/lib配下にあってここからも確認できますが、parserをvue-eslint-parserに変更する、vue向けのルールの追加、plugin:vue/vue3-recommendedのようなconfigをエクスポートする記述が含まれています。
@vue/eslint-config-typescript 実装を確認すると分かり易いですが、@typescript-eslint/parser, @typescript-eslint/eslint-pluginを使いつつ、拡張子.vueも対象にするための設定が含まれています。ソースコードはnode_modules/@vue/eslint-config-typescriptフォルダ配下です。このパッケージを導入すると、最終的な.eslintrc.jsに@typescript-eslintに関する宣言は記述不要になりそうです。また、内部でparserOptions.parserに@typescript-eslint/parserを指定しています

この2つを追加した後の.eslintrc.jsの内容は、
eslint-plugin-vue@vue/eslint-config-typescriptのそれぞれでparserparserOptionが指定されているため、以下のように書き換えます。
(最終的な内容は本記事の上段の内容を参照)

 module.exports = {
   extends: [
     "eslint:recommended",
+    "plugin:vue/vue3-recommended",
+    "@vue/typescript",  //仕組みは分かっていませんが、これで"@vue/eslint-config-typescript"が読まれるようです。
-    "plugin:@typescript-eslint/eslint-recommended", //@vue/eslint-config-typescriptが同じものを追加するので削除
     "plugin:prettier/recommended",
   ],
-   plugins: ["@typescript-eslint"], // @vue/eslint-config-typescriptが同じものを追加するので削除
-   parser: "@typescript-eslint/parser", // eslint-plugin-vueがvue-eslint-parserに変更するので削除
-   parserOptions: { // @vue/eslint-config-typescriptがparserOptions.parserなど幾つかののオプションを変更するので削除
-     sourceType: "module", // eslint-plugin-vueなどが同じものを定義するので削除
-   },
   env: {
     node: true,
   },
   rules: {},
 };

この設定を行うと、.vue配下の<template><script lang="ts">にもLintと整形が行われるはずです。

Prettierに関するルールの調整

PrettierにはVueやTypescriptに関するデフォルトの設定が定義されているため、その設定を追加します。
こちらは実装を確認すると、どちらもルール定義を上書きする内容になっていました。
各設定を細かく確認は出来ていないですが、自分の手元ではprettier/vueは入れておかないと、<template>内で短すぎる範囲で改行されるなどの影響があったので追加しています。

 module.exports = {
   extends: [
     "eslint:recommended",
     "plugin:vue/vue3-recommended",
     "@vue/typescript",
     "plugin:prettier/recommended",
+    "prettier/vue",
+    "prettier/@typescript-eslint",
   ],
   env: {
     node: true,
   },
   rules: {
   },
 };
12
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
tristar
都内でPHP(Laravel)+MySQLを使ったWebシステムの開発をしています。 最近興味があるのはNode.js, golang, Docker, Vue.jsなど。バックエンド側に寄ってますがフロントエンドも興味あります。 日々勉強中です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
12
Help us understand the problem. What is going on with this article?