✨

Vite + Vue3にESLintとPrettierを導入する

2021/09/16に公開

ESLint

前提条件

PCはMacを使います。
既にパッケージ管理ツールのYarnが入っていることを前提に進めます。

プロジェクトの作成と起動

今回はプロジェクトの作成にViteを使います。Vite（ヴィート）とはビルドツールのことで、Vue CLIやWebpackよりも開発サーバーの起動が早いことが特徴です。

次のコマンドでVue3とTypeScriptのプロジェクトを作成します。

❯ yarn create vite
✔ Project name: … vue-sample
✔ Select a framework: › vue
✔ Select a variant: › vue-ts

❯ cd vue-sample
❯ yarn
❯ yarn dev
vite v2.5.3 dev server running at:
> Local: http://localhost:3001/

プロジェクトを起動して、ブラウザで http://localhost:3001/ にアクセスして確認します。

ESLintの導入

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

eslintはESLint本体です。eslint-plugin-vueは、.vueファイルを静的検証をしてくれます。その他は、TSをESLintで検証するために必要なライブラリです。

次に.eslintrc.ymlを作成して、以下の設定を貼り付けます。eslintrcにJSONではなくYAMLを採用するのはYAMLはコメントが書けるためです。

❯ touch .eslintrc.yml

.eslintrc.yml

env:
  browser: true
  es2021: true
extends:
  - 'plugin:vue/vue3-recommended'
  - 'eslint:recommended'
  - '@vue/typescript/recommended'
parserOptions:
  ecmaVersion: 12
plugins:
  - vue
  - '@typescript-eslint'
rules: {}

envで有効にする環境を指定します。ECMAScript2021を適用するため、envのes2021はtrueにします。

extendsのplugin:vue/vue3-recommendedは、eslint-plugin-vueが推奨するルールを適用します。

そしてparserOptionsのecmaVersionは、使用するECMAScriptのバージョンを指定します。envのes2021は指定しているため、それに合わせます。[詳細]

package.jsonのscriptsにeslintの実行コマンドを指定します。

package.json

  "scripts": {
    ...
    "lint": "eslint --fix src/*.{ts,vue} && eslint --fix src/**/*.{ts,vue}",
  },

eslintを実行して、動作するか確認します。

$ yarn lint

/Users/hoge/Dev/vue-sample/src/components/HelloWorld.vue
  4:1  error  'defineProps' is not defined  no-undef

✖ 1 problem (1 error, 0 warnings)

動作しましたが、エラーが出ました。

script setupによるエラーを回避

ViteでVueのプロジェクトを作成すると、script setupが適用されます。今回はエラーになっているscript setupは使わずに対応したいため、ソースコードを次のように書き換えます。

src/components/HelloWorld.vue

<template>
  <h1>{{ message }}</h1>
  // templateはh1タグ以外差分がないため省略
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  props: {
    msg: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const count = ref(0);

    return {
      count,
      message: props.msg,
    };
  },
});
</script>

src/App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "./components/HelloWorld.vue";

export default defineComponent({
  components: {
    HelloWorld,
  },
});
</script>

そしてyarn lintを実行すると0 errorsになることが確認できます。

❯ yarn lint
yarn run v1.22.11
warning package.json: No license field
$ eslint --fix src/*.{ts,vue}
✨  Done in 2.32s.

Prettierの導入

prettier本体とeslint-config-prettierを導入します。

eslint-config-prettierは、ESLintのフォーマットのルールを無効にします。そのため、Prettierが整形した箇所に対してエラーを出さなくなります。

ちなみにPrettierの導入について調べていると、eslint-plugin-prettierをインストールしている記事を見ますが、これは非推奨となったため使いません。

❯ yarn add -D prettier @vue/eslint-config-prettier
❯ touch .prettierrc.yml

Options · Prettierから適用したいオプションを探して、.prettierrc.ymlに書きます。今回は以下を適用します。

printWidth: 80文字で折り返す
tabWidth: 半角スペースの数を2にする
singleQuote: ダブルクオテーションの代わりにシングルクオテーションを利用する
semi: 末尾のセミコロンを無しにする

.prettierrc.yml

printWidth: 80
tabWidth: 2
singleQuote: true
semi: false

package.jsonにprettierの実行コマンドと、prettierとeslintを同時に実行するコマンドを用意します。

package.json

  "scripts": {
    ...
    "format": "prettier -w src/*.{ts,vue} && prettier -w src/**/*.{ts,vue}",
    "fix": "yarn format && yarn lint"    
  }

prettierのオプションに指定している-wは-writeのaliasです。(CLI · Prettier)

❯ yarn fix

これでESLintとPrettierが動きます。

参考

https://maku.blog/p/j6iu7it/

前提条件

プロジェクトの作成と起動

ESLintの導入

script setupによるエラーを回避

Prettierの導入

参考

Discussion