■動作確認済みバージョン
- nuxt(2.11.0)
- create-nuxt-app(v2.12.0)
■更新履歴
- 2020/2/5 初稿
目標
- create-nuxt-appでstyleLintのエラーが出ても驚かない
- styleLintをSCSSで利用できるようにする
- styleLintで
--fixできるようにする - commit時にStyleLintErrorが出るようにする
- VScodeで保存時に自動整形する
nuxt.jsインストール時の設定
公式ドキュメントのcreate-nuxt-appを利用するを参考に、各種設定をしつつ選んでNuxt.jsをインストールします。ポイントのみ記載します。
↓
% cd <インストール先のディレクトリ>
% npx create-nuxt-app
リンティングツールをチェック時に…
? Choose linting tools
◉ ESLint
◯ Prettier
◉ Lint staged files
❯◉ StyleLint
ESLint、Lint staged files、StyleLintをチェックします。Prettierは改行強制で好みが分かれるため、プロジェクトメンバーで検討の上で別途追加します。
インストール完了後…stylelintの設定
インストール完了後に、npm run devをするとStyleLintErrorが出ます。
↓
ERROR StylelintError
No rules found within configuration. Have you provided a "rules" property?
焦らずに…自動生成されているstylelint.config.jsに空のルールを追加します。
↓
module.exports = {
// add your custom config here
// https://stylelint.io/user-guide/configuration
'rules': {} // ←追加
}
修正し保存して、エラーが出なければ動作確認完了です。
SCSSを利用する
インデント記法のstylusやsassも好きですが、学習コストを抑えるため特に理由がなければscssを選択します。コーダーの希望があれば、postcss（ディフォルト）の利用を検討しますが、今回のお題はSCSSです。
まずは、scssのモジュールを追加して、Nuxt.jsで使えるようにします。
↓
% npm i node-sass sass-loader
styleLintにSCSS用の設定をする
はじめにスタイルガイドをインストールします。SCSS用パッケージstylelint-scssとstylelint-config-standard-scssを利用します。緩めを希望の場合はstylelint-config-recommended-scssを利用してください。
↓
% npm i -D stylelint-scss stylelint-config-standard-scss
次に、stylelint.config.jsにextendプロパティーに読み込ませます。
↓
module.exports = {
'extends': 'stylelint-config-standard-scss',
'rules': {
// 独自ルールはお好みで
}
}
確認のために、% npm run dev後に適当にSCSSを打ってください。エラーが出たら成功です。
↓
// エラー例
ERROR StylelintError
pages/test.vue
48:24 ✖ Expected a trailing semicolon declaration-block-trailing-semicolon
styleLintで--fixできるようにする
esLintと同様の動作を目指します。package.jsonに一行追加してください。
↓
{
"scripts": {
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"stylelint": "stylelint '**/*.{vue,scss,css}' --ignore-path .gitignore", // ←追加
...
},
...
}
動作確認をします。% npm run stylelintを入力して先ほどと同様のエラーが出れば成功です。
↓
% npm run stylelint
↓
// エラー結果抜粋
pages/test.vue
48:24 ✖ Expected a trailing semicolon declaration-block-trailing-semicolon
さらに、--fixの動作確認をします。% npm run stylelint -- --fixを入力してエラー箇所が修正されれば成功です。
↓
% npm run stylelint -- --fix
↓
//エラーが出なければ成功
commit時にStyleLintErrorが出るようにする
esLintと同様の動作を目指します。package.jsonに一行追加してください。
↓
{
...
"scripts": {
...
},
"lint-staged": {
"*.{js,vue}": "eslint",
"*.{css,scss,vue}": "stylelint" // ←追加
},
...
}
動作確認をします。適当なSCSSを打ってcommitします。同様のエラーが出たら成功です。
↓
% git add ./pages/test.vue
% git commit -m 'commit test'
↓
// エラー結果抜粋
✖ stylelint found some errors. Please fix them and try committing again.
pages/test.vue
48:24 ✖ Expected a trailing semicolon declaration-block-trailing-semicolon
修正（--fix）して、再度動作確認をします。エラーが出力されずにcommitできたら成功です。
↓
% npm run stylelint -- --fix
% git add ./pages/test.vue
% git commit -m 'commit test'
↓
//エラーが出なければ成功
VScodeで保存時に自動整形する
VScodeの機能拡張「stylelint-plus」をインストールします。似た名前の機能拡張にstylelint(plusなし)がありますが、こちらには自動保存機能（stylelint.autoFixOnSave）がありませんので注意してください。インストール後、自動整形機能を有効してください。
↓
自動整形機能の有効化
- VScodeのprefarence（機能拡張）からSettingsを開きます
- 検索窓で「stylelint」を検索します
- stylelint:Auto Fix On Saveにチェックを入れます
- VScodeを立ち上げ直してください
動作確認をします。先ほどと同じように適当にSCSSを打ってください。保存時に自動で整形されれば成功です。
以上で目標達成です。
おまけ
気がついたら、create-nuxt-appでlint-stagedやStyleLintの初期設定ができるようになったていました。自作と比べるとかなり短い時間で設定できます。cool!
style周りについて、シンプルに生きられるようになりました。