【Reactの勉強】環境構築(stylelintの設定)

概要

前回に引き続き、環境構築を行う。
今回はCSSのLinterであるstylelintを設定する。

stylelint.io

適宜、以下の本を参考にさせて頂きながら進める。(以下、『りあクト！』)

oukayuka.booth.pm

バージョン

「Reactの勉強」で使用している主なソフトウェアのバージョンは以下の通り。

• node: 15.5.0
• react-create-app: 4.0.1
• react: 17.0.1
• react-dom: 17.0.1
• typescript: 4.1.3
• eslint: 7.17.0
• prettier: 2.2.1
• stylelint: 13.8.0

stylelintを設定する。

インストール

以下のコマンドでstylelint及び関連するモジュールをインストールする。

$ npm install -D stylelint
$ npm install -D stylelint-config-standard
$ npm install -D stylelint-order
$ npm install -D stylelint-config-recess-order

stylelintの設定ファイルの作成

.stylelintrc.js というファイルを作成する。

.stylelintrc.js の中にstylelintの設定を記述する。

設定に関しては、以下の『りあクト！』の作者の方がGitHubに公開してくださっている設定を、それぞれの意味を簡単に確認しながらコピペしていく。(解説は本の方を参照。)

github.com

※ stylelintの方は割とシンプルで、ESLintのような複雑な設定ではなかった。

VS Codeと連携する。

stylelint.vscode-stylelintというプラグインをインストールする。

settings.jsonのeditor.codeActionsOnSaveに"source.fixAll.stylelint": trueを追加する。

{
    "typescript.tsdk": "./node_modules/typescript/lib",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true 
    }
}

動作確認

VS Codeでindex.cssを開いて、保存した際にフォーマットされることが確認できればOK。