コーディングをする際には各種リンターやフォーマッターを使い、コードの品質保持に努めていきますが、今回はViteのプロジェクトで「Stylelint」と「ESlint」を使えるようにしていきたいと思います。以前の記事ではwewbpackの環境で使う方法についてまとめていましたが、Viteでも同じような形で導入することができます。 （過去記事） webpackでStylelintが使える環境を構築してみる webpackでESLintが使える環境を構築してみる   今回の内容は、下記の記事でViteの基本的な開発環境ができているという前提になります。詳しくは各記事でまとめていますので合わせてご参照ください。 （参考記事） フロントエンドの開発環境にVite ＋ TypeScriptを導入する ViteでPostCSS周りの設定やSassを使う ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング ViteでVue.jsとVuex（Pinia）とVue Routerを使ってみる    

Stylelintの導入

まずはStylelintから始めていきます。必要なモジュールをインストールしていきます。今回はSassを使う想定で関連するパッケージもあわせてインストールします。またStylelintの設定ファイルとなるファイルも作成します。

$ npm install --save-dev stylelint stylelint-config-standard-scss
$ touch .stylelintrc.json

  設定ファイルについてはJavaScript形式のほか、YAMLなども利用できますが、今回はJSON形式で作成しました。必要なオプションなどはこちらに追記していきます。今回はとりあえずSassに対応させるだけになっています。 【.stylelintrc.json】

{
  "extends": "stylelint-config-standard-scss",
}

  設定ファイルが用意できたらリンター実行用のコマンドを作成します。npmスクリプトで実行できるようにしておきます。拡張子は、cssやscssのほかVueの単一コンポーネントなどのスタイルも対象とするようにします。 【package.json】※一部抜粋

{
  ....
  "scripts": {
    .....
    "lint:style": "stylelint src/**/*.{css,scss,vue,tsx,ts}"
  },
  ....
}

  これで実際にコマンドを実行するとリンターの処理が走り、設定ファイルに基づいたルールにあわせて結果が表示されるようになります。

$ npm run lint:style

src/scss/main.scss
  Unexpected unknown at-rule "@tailwind" scss/at-rule-no-unknown
  ....

  ところが上記ではTailwindCSSの構文がエラーとなってしまっています。これを解消するために下記のルールを追記します。 【.stylelintrc.json】

{
  "extends": "stylelint-config-standard-scss",
  "rules": {
    "at-rule-no-unknown": [ true, { "ignoreAtRules": ["tailwind"] } ],
    "scss/at-rule-no-unknown": [ true, { "ignoreAtRules": ["tailwind"] } ]
  }
}

  また、先ほどリンターの対象にVueのコンポーネントやJSXなども含めていましたが、そのままですと下記のように正しく解析されません。

src/vue/App.vue
  Unknown word CssSyntaxError

  ですので、それぞれに対応した追加のパッケージもインストールしておく必要があります。つかうフレームワークにあわせて選びます。

// JSX,TSXへの対応
$ npm install --save-dev @stylelint/postcss-css-in-js postcss-syntax

// Vueへの対応
$ npm install --save-dev stylelint-config-standard-vue postcss-html

  パッケージのインストールができたら設定ファイルへ下記のようにオプションを追記していきます。 【.stylelintrc.json】※一部抜粋

{
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-standard-vue/scss"
  ],
  "overrides": [
    {
      "files": [
        "src/**/*.tsx", 
        "src/**/*.ts"
      ],
      "customSyntax": "@stylelint/postcss-css-in-js"
    } 
  ],
  ....
}

  これでVueのコンポーネントやJSX、TSXなどのスタイルにもリンターが使えるようになりました。このように必要に応じて追加の対応が必要となるので注意しておきたいですね。    

ESlintの導入

続いてスクリプトのリンターである、ESlintを入れていきます。先ほどと同様に関連パッケージもあわせてインストールしていきます。そして設定ファイルも一緒に作成します。ESlintではTypeScriptに対応させる場合やVueのコンポーネントを扱う際には下記のように追加のパッケージが必要になります。

$ npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue
$ touch .eslintrc.json

  設定ファイルには必要に応じてルールなどを指定します。また下記ではTypeScriptのパーサーを指定することでTypeScirptに対応させているのと、Vueの単一コンポーネントファイルも対象とするようにしています。 【.eslintrc.json】

{
  "env": {
    "browser": true,
    "jquery": true,
    "node": true,
    "es2021": true
  },
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "@typescript-eslint/parser",
    "ecmaVersion": "latest",
    "sourceType": "module",
    "extraFileExtensions": [
      ".vue"
    ],
    "project": "./tsconfig.json"
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "no-console": "error"
  }
}

  設定ファイルの次はリンター用のコマンドを用意していきます。こちらも先ほど同様に対象となる拡張子をあわせて指定しておきます。 【package.json】※一部抜粋

{
  ....
  "scripts": {
    .....
    "lint:es": "eslint src/**/*.{vue,ts,js,tsx,jsx}"
  },
  ....
}

  実際にコマンドを実行すると下記のようにリンターが機能していることが確認できました。

$ npm run lint:es

****/src/main.ts
  error Unexpected console statement no-console

  先ほどのStylelintとこのESlintは同時に実行されるようにしておくと便利です。下記のようにそれぞれのコマンドをつなげたリンター用のコマンドを新たに追加しておきます。 【package.json】※一部抜粋

{
  ....
  "scripts": {
    .....
    "lint": "npm run lint:style && npm run lint:es",
    "lint:style": "stylelint src/**/*.{css,scss,vue,tsx,ts}",
    "lint:es": "eslint src/**/*.{vue,ts,js,tsx,jsx}"
  },
  ....
}

  これで下記のコマンドを実行することで一括に処理が走るようになります。開発用のビルドコマンドに組み込んでおくのも良さそうですね。

$ npm run lint

 

---

  今回はViteのプロジェクトでStylelintとESlintを使う方法についてまとめてみました。webpackの時と比較するとよりシンプルに使える印象がありますね。複数人で作業する時などルールを設定する場面が出てくると思いますので、ぜひ導入しておきたいですね。