Vuetify 3 + TypeScriptのWebアプリにESLint, Prettier, StyleLintを導入する

これはなに

Vuetify 3で作成したWebアプリにESLint, Prettier, StyleLintの3つを追加する方法を記したもの。 eslint-plugin-prettierが非推奨になったため、eslint-plugin-prettierと@vue/eslint-config-prettierを使わないようにした。

環境

Windows 10
Docker Desktop
VS Code
Vue 3
TypeScript
Vuetify 3.0.5

ESLintを導入する

必要なパッケージをインストールする。

yarn add -D eslint eslint-plugin-vue @vue/eslint-config-typescript @rushstack/eslint-patch

インストールしたパッケージの詳細は下記の通りである。

パッケージ名	説明
eslint	ESLintの本体
eslint-plugin-vue	Vue.jsの公式ESLintプラグイン
@vue/eslint-config-typescript	Vue-TypeScriptプロジェクトの基本構成のルールセット
@rushstack/eslint-patch	`@vue/eslint-config-typescript`に必要

ESLint設定ファイル.eslintrc.cjsをつくり、下記を記入する。拡張子がcjsなのは動的にルールを生成するためである。

app/.eslintrc.cjs

require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    '@vue/eslint-config-typescript',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
  },
};

package.jsonにlintコマンドを追加。 --fixは好みで。

app/package.json

{
  "scripts": {
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
}

Linterを実行してみる。

yarn lint

VS Codeの場合はESLintの拡張機能を追加し、 config.jsonに下記を追記する。そうするとVS Code側で自動的に実行してくれる。

.vscode/config.json

{
  // linter
  "eslint.packageManager": "yarn",
  "eslint.workingDirectories": [
    "./app"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
}

Prettierを導入する

必要なパッケージをインストールする。

yarn add -D prettier eslint-config-prettier eslint-config-prettier-vue

インストールしたパッケージの詳細は下記の通りである。

パッケージ名	説明
prettier	Prettierの本体
eslint-config-prettier	Prettierと競合するESLintの設定を無効化するconfig
eslint-config-prettier-vue	Prettierと競合するESLintの設定を無効化するVue用config

ESLint導入時で作成した.eslintrc.cjsにPrettier用の設定を追加する。これを追加することで、ESLintとPrettierの住み分けができる。必ずextendsの一番最後にいれること。

app/.eslintrc.cjs

require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    '@vue/eslint-config-typescript',
+   'prettier',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
  },
};

Prettierの設定ファイルである.prettierrc.jsonを作成し、任意のオプションを設定する。設定できるオプションの詳細はPrettier公式を参照してほしい。下記に例を示す。

app/.prettierrc.json

{
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "vueIndentScriptAndStyle": true
}

package.jsonにformatコマンドを追加。 lintコマンドと同時に動かすfixコマンドも追加する。

app/package.json

{
  "scripts": {
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
    "format": "yarn prettier -w -u .",
    "fix": "yarn format && yarn lint --fix"
  },
}

とりあえず動くか試す。

yarn format
yarn fix

VS Codeの場合はPrettierの拡張機能を追加し、 config.jsonに下記を追記する。そうするとVS Code側で保存時に自動で実行してくれる。

.vscode/config.json

{
  // formatter
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "prettier.requireConfig": true,
  "prettier.configPath": "./app/.prettierrc.json",
  "prettier.prettierPath": "./app/node_modules/prettier",
}

VS CodeだとPrettierを入れた直後はESLintとバッティングしてうまく動作しないことがある。その場合は一度VS Codeを再起動する。

StyleLintを導入する

StyleLintを導入して、cssやvueファイル内の<style>タグもlintする。

必要なパッケージをインストールする。

yarn add -D stylelint postcss-html stylelint-config-recommended-vue stylelint-config-standard stylelint-config-prettier

インストールしたパッケージの詳細は下記の通りである。

パッケージ名	説明
stylelint	StyleLintの本体
postcss-html	Vueをlintするのに必要
stylelint-config-recommended-vue	Vueをlintするための設定preset
stylelint-config-standard	StyleLint公式の設定preset

StyleLint設定ファイルstylelint.config.jsをつくり、下記を記入する。

app/stylelint.config.js

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recommended-vue',
    'stylelint-config-prettier',
  ],
}

Lintの対象から除外したいファイルがある場合は、ルートディレクトリに.stylelintignoreを作成して、除外する条件を書く。以下は例である。

app/.stylelintignore

src/dist/**/*.css

package.jsonにlint-cssコマンドを追加。 fixコマンドにも、lintコマンドと同時に動かすように追記する。

app/package.json

{
  "scripts": {
    "lint-css": "stylelint src/**/*.{css,scss,vue}",
    "fix": "yarn lint-css --fix && yarn format && yarn lint --fix"
  },
}

とりあえず動くか試す。

yarn lint-css
yarn fix

VS Codeの場合はStyleLintの拡張機能を追加し、config.jsonに下記を追記する。そうするとVS Code側でもlintエラーを表示してくれる。

.vscode/config.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true,
  },
  "stylelint.validate": [
    "vue",
    "css",
  ],
}

これはなに

環境

ESLintを導入する

Prettierを導入する

StyleLintを導入する

参考文献・URL