ViteでStylelintとESlintを使える環境を構築する
最終更新日: Update!!
コーディングをする際には各種リンターやフォーマッターを使い、コードの品質保持に努めていきますが、今回は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を使ってみる
今回はViteのプロジェクトでStylelintとESlintを使う方法についてまとめてみました。webpackの時と比較するとよりシンプルに使える印象がありますね。複数人で作業する時などルールを設定する場面が出てくると思いますので、ぜひ導入しておきたいですね。
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の時と比較するとよりシンプルに使える印象がありますね。複数人で作業する時などルールを設定する場面が出てくると思いますので、ぜひ導入しておきたいですね。
sponserd
keyword search
recent posts
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
- ViteでHandlebarsを使った複数ページの作成に使える外部JSONファイルのデータを読み込む
ViteでHandlebarsを使った複数ページの作成に使える外部JSONファイルのデータを読み込む
- ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング
ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング
- ViteでPostCSS周りの設定やSassを使う
ViteでPostCSS周りの設定やSassを使う
- フロントエンドの開発環境にVite + TypeScriptを導入する
フロントエンドの開発環境にVite + TypeScriptを導入する
categories