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

これはなに

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

環境

Vuetifyでアプリを作成した際に、一緒にTypeScriptとESLintを入れた想定。

Vuetify 3.0.6
VS Code

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.jsに、Prettier用の設定を追加する。これを追加することで、ESLintとPrettierの住み分けができる。必ずextendsの一番最後にいれること。

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/eslint-config-typescript",
+   "prettier",
  ],
  rules: {
    "vue/multi-word-component-names": "off",
  },
};

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

.prettierrc.json

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

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

package.json

{
  "scripts": {
    "lint": "eslint . --fix --ignore-path .gitignore",
    "format": "yarn prettier -w -u .",
    "fix": "yarn format && yarn lint"
  },
}

とりあえず動くか試す。

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をつくり、下記を記入する。

stylelint.config.js

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

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

.stylelintignore

/dist/**/*.css

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