Vue3+Typescript+ESLint+Prettier環境をViteを用いて構築する

Vue3+Typescript+ESLint+Prettier環境をViteを用いて構築する

2022年03月24日

Vue3ESLintPrettier
Vue3+Typescript+ESLint+Prettier

はじめに

Javascript(Typescript)環境を作成する際、ESLint+Prettierの導入は必須と考えているのですが、毎回調べなおし何が正解か良くわからないままに構築しているので勉強がてら構築方法をメモしておきます。

勉強のためにも色々と設定してくれる@vue/cliは使用せずviteで作成しESLint+Prettierを当てる形で構築します。

viteについては触れません。

環境

@vitejs/create-app@2.8.0

Vue3の環境を作成する

詳細は こちら

Vue3+Typescriptで作成します。

yarn create vite プロジェクト名 --template vue-ts
cd プロジェクト名
yarn

実行してみます。以下を実行しブラウザで http://localhost:3000 にアクセスして開けばOKです。

yarn dev

ESLintを導入する

パッケージのインストール

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue
  • eslint
    • ESLint本体
  • @typescript-eslint/parser
    • ESLintでTypescriptを読み込めるようにするパーサー
  • @typescript-eslint/eslint-plugin
    • TypescriptのLintルールを提供するプラグイン
  • eslint-plugin-vue
    • ESLintでVueのSFCを読み込めるようにするパーサー、VueのLintルールも提供してくれます。

設定ファイルの作成

eslintを使用するには設定ファイルが必要となります。eslintの設定ファイルはJavascript、YAML、JSONで作成できますが、今回はコメントを書くことができ記述量が少ないのでYAMLで作成します。 詳しくはこちら

.eslintrc.yml

env:
  # ブラウザで使用するのでbrowserとes2021をONにしておく
  browser: true
  es2021: true
  # Vue3で使用するdefinePropsやdefineEmits,defineExposeなどを使用できるようにする
  'vue/setup-compiler-macros': true

# Vueを読み込めるようにする。eslint-plugin-vueが提供してくれている。
parser: 'vue-eslint-parser'

parserOptions:
  # VueをTypescriptで使う場合は指定する必要がある。vue-eslint-parser固有のオプション
  parser: '@typescript-eslint/parser'
  # ES Modulesを使ってコードを書く場合はmoduleを指定する必要がある。
  sourceType: module

# eslint-plugin-vueが提供してくれているルールを追加する。
plugins:
  - vue

# パッケージが提供してくれているおすすめ設定を使う設定
extends:
  # eslintが提供してくれている設定
  - 'eslint:recommended'
  # eslint-plugin-vueが提供してくれている設定
  - 'plugin:vue/vue3-recommended'

Shareable Configs

となりますが、ESLintのShareable Configsという共通化の機能があり、extendsで'plugin:vue/vue3-recommended'を設定すると以下のように書くこともできます。 Shareable Configsを使うと設定を簡潔に書くことができます。

Shareable Configsは以下が参考になりました。(Shareable Configs以外も)




.eslintrc.yml

env:
  'vue/setup-compiler-macros': true

parserOptions:
  parser: '@typescript-eslint/parser'

extends:
  - 'eslint:recommended'
  - 'plugin:vue/vue3-recommended'
  - 'prettier'

ESLintの設定ができましたのでチェックできるようにpackage.jsonに追加しておきます。

package.json

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

実行してフォーマットをかけておきましょう。

yarn lint

Prettierを導入する

ESLintだけでもコードの整形はできますが、構文の解析に特化しているのでカバーしきれない部分があったり、 速度の問題などが出てくるためそれらを補うためにPrettierを導入してフォーマットはPrettierに任せるのが一般的だと思います。

パッケージのインストール

yarn add -D prettier eslint-config-prettier
  • prettier
    • Prettier本体
  • eslint-config-prettier
    • ESLintのルールの内PrettierでカバーできるルールをまとめてOFFする設定を提供してくれます。

設定ファイルの作成

prettierにも設定ファイルが必要となります。prettierもJavascript、YAML、JSONなどで作成できますが、こちらもYAMLファイルで作成します。package.jsonに書くこともできます。 詳しくはこちら

prettierの設定は宗教的な部分がありますが、僕の好みの設定を例で書いておきます。

.prettierrc.yml

# 折り返す行の長さ
printWidth: 120
# インデントのスペース数の指定
tabWidth: 2
# 文字列などシングルクオートで囲む
singleQuote: false
# 末尾のカンマの設定
trailingComma: none
# ステートメントの最後のセミコロンの設定
semi: true
# VueのSCFのscript,styleタグにインデントの指定
vueIndentScriptAndStyle: true

ESLintにも追記が必要になります。

.eslintrc.yml

env:
  'vue/setup-compiler-macros': true

parserOptions:
  parser: '@typescript-eslint/parser'

extends:
  - 'eslint:recommended'
  - 'plugin:vue/vue3-recommended'
  # 追加
  - 'prettier'

これでPrettierの設定ができましたのでチェックできるようにこちらもpackage.jsonに追加しておきます。

package.json

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

おわりに

最低限の設定であれば意外とシンプルに構築できることがわかりました。 細かい設定をするとなると別ですが、個人で触れる分には今回の内容で十分かなと思いました。

ホーム記事一覧プライバシーポリシーお問い合わせ
© 2021 luku.work