NuxtアプリにLinter, Formatterを設定しようと思って調べました。
今回はTypescriptは使いません。
Typescriptも含めた設定が多いですが、まだTypescriptを触ったことがない人(自分)にとっては必要ないですし、
nuxt + ESlint + Stylelint + Prettierの設定をまとめる必要があると思いました。
また、自分の場合は上記の設定をプロジェクト作成時に設定していなかったので、後から設定する必要がありました。
設定(導入)するパッケージはESLint、StyleLint、Prettierがメインです。
一応sass-loaderも使ってます(sass,scssが使えるようになります)。
npx nuxt-create-appコマンドで最初からESLint、Stylelint、Prettierをチェックして導入しているのであれば設定ファイルをコピペするだけでいけるはずです。
細かい説明などは当記事の各リンクを参考にしてください。
目次
| 1 | 動作環境 |
| 2 | 注意点 |
| 3 | ターゲット |
| 4 | TL;DR |
| 5 | 【本題】完成形までの手順(数分でできるはず) |
| アプリを作成 | |
| パッケージをインストール | |
| VSCodeの拡張機能をインストール | |
| 設定ファイルを追加、編集 | |
| 6 | 【余談】ESLint、Stylelint、Prettierについて学ぶ |
| 7 | Thank you very much!! |
動作環境(2021/04時点)
| MacOS | Catalina(10.15.7) |
| VSCode | 1.55.0 |
| Nuxt.js | 2.15.4 |
| yarn | 1.22.10 |
| yarnはnpmに置き換えてもらっても問題ありません。 | |
| むしろnpmの方がいいかも? |
注意点
自分なりに調べて正常に動作し、内容をまとめた記事です。
うまく動作しない場合は当記事のリンクを参考にして修正するなどして対応していただきますようお願いいたします。
ターゲット
この記事のターゲットは
- これからNuxt.jsを使う人
- Linter, Formatterがあると生産性が上がるから必須(らしい)
- Linter, Formatterの設定がわからない人、少しでも理解したい人
-
ESLint、Stylelint、Prettierについて学ぶの節のリンクである程度理解できると思います。
-
- Linter, Formatterの設定を調べるのに疲れた人
- とりあえず脳死で下記のファイル設定をしておけばうまく動作してくれる(はず)
といった感じです。
僕自身がこの設定をするのに1日以上かかったのでそうならずに早く開発を進められるように記事化しました。
早ければ数分で設定ができます。
TL;DR
- WebエンジニアためのNuxt.jsのオススメLint設定まとめ – ブログの設置の記事をベースにしてeslint-plugin-prettier を ESLint から 分離するサンプル – Intellij IDEA の設定変更も | DevelopersIOの設定を参考に修正すればできた
-
ESLint、Stylelint、Prettier、TypeScriptなしの記事を整理して探すのは超大変だった
完成形までの手順
アプリを作成
npx nuxt-create-appコマンドでアプリを作成する場合はESLint、Stylelint、Prettierにチェックを入れて作成します。
後から導入することも可能ですがまぁまぁ時間がかかります。
後から導入する場合は作成したアプリのルートディレクトリで下記を実行します
touch .eslintrc.js
touch .prettierrc
touch .stylelint.config.js
yarn add -D eslint stylelint prettier eslint-config-prettier stylelint-config-prettier
パッケージをインストール
scssを使う場合は下記パッケージをインストールします。
yarn add -D node-sass sass-loader stylelint-config-standard-scss stylelint-order stylelint-scss
VSCodeの拡張機能をインストール
下記の3つをインストールすれば特に問題なく使えると思います。
CLIコマンドに関しては今回は設定しません。
- ESLint - Visual Studio Marketplace
- stylelint - Visual Studio Marketplace
- Prettier - Code formatter - Visual Studio Marketplace
設定ファイルを追加、編集
.eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
parserOptions: {
parser: "babel-eslint",
},
extends: ["@nuxtjs", "prettier", "plugin:nuxt/recommended"],
plugins: [],
rules: {},
}
.prettierrc
{
"semi": false,
"singleQuote": false
}
.stylelint.config.js
module.exports = {
plugins:[
"stylelint-order",
"stylelint-scss"
],
extends: [
'stylelint-config-recommended',
'stylelint-config-standard',
'stylelint-config-prettier',
'stylelint-config-standard-scss',
],
rules: {
"order/properties-alphabetical-order": true, // アルファベット順に
"block-no-empty": null, // 空のクラスをエラー判定するかどうか
"at-rule-no-unknown": [true, // @include, @mixin, @each, @extendをエラー判定しない
{"ignoreAtRules": ["include","mixin","each","extend"]}],
"rule-empty-line-before": null, // 各クラスごとに空行を入れるかどうか
"at-rule-empty-line-before": null, // @の前に空行を入れるかどうか
}
}
.vscode/settings.json
{
// ESLint
"eslint.workingDirectories": ["./"],
"eslint.options": {
"configFile": "./.eslintrc.js"
},
"eslint.validate": [
"javascript"
],
// stylelint
"stylelint.enable": true,
"stylelint.configBasedir": ".",
"stylelint.validate": ["css"],
"css.validate": false,
"scss.validate": false,
// Lint On Save
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.organizeImports": true,
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
// prettier
"[json]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
}
これらの設定を保存したら、各ファイルでコードを少し崩したり、エラーを発生させてみてください。
エラーが表示されたり、コードのインデントを修正してくれれば見事完成です。
【余談】ESLint、Stylelint、Prettierについて学ぶ
ESLint、Stylelint、Prettierに関して詳しくない場合はまずこれらが何なのか知る必要があります。
良さげなリンクで学習します。
分かる人は飛ばしてください。
下記の記事はESLint、Stylelint、Prettierはどういうものか、違い、併用する理由をさくっと解説してくれています。
VS CodeにPrettier・ESLint・Stylelintを導入してファイル保存時にコードを自動整形させる方法 | WEMO
ESLintをもうちょっと深堀り
下記のリンクに詳しい説明があるので詳しく知りたい方はこちらがおすすめです。
ESLint 最初の一歩 - Qiita
ESLintの設定について自分で設定したい場合は下記を読んでから考えた方がよいと思います。
ESLintのルールを全部手動で設定するのは大変だからやめておけ - Qiita
その他リンク
公式: ESLint - Pluggable JavaScript linter
Qiitaのタグ検索: 「tag:ESLint」の検索結果 - Qiita
StyleLintをもうちょっと深堀り
下記リンクはすごく読みやすいです。数分でスラスラ読めます。
ここがすごいぞ！ stylelint！ - Qiita
これはちょっと応用的な気がするのですが、とても使えそう。
時間があれば使ってみたい。
コミット前に Lint を強制するなら lint-staged が便利 - Qiita
その他リンク
公式: A mighty, modern style linter · stylelint
Qiitaのタグ検索: 「tag:stylelint」の検索結果 - Qiita
Prettierをもうちょっと深堀り
下記リンクは量は多いけどとてもわかりやすい。
ESLintとの比較、併用の仕方も書いてある。
Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita
ちょっと応用編も入ってるやつ
prettierの使い方 - Qiita
その他リンク
公式: Prettier · Opinionated Code Formatter
Qiitaのタグ検索: 「tag:Prettier」の検索結果 - Qiita
Thank you very much!!
下記の記事がなければ今回の記事を作成することができていませんでした。
ありがとうございます!!
Nuxt.jsを書くときのLinter,Formatterの参考リンク。VSCodeを使うための設定も入っている。
WebエンジニアためのNuxt.jsのオススメLint設定まとめ – ブログの設置
elint-plugin-prettierが非推奨になったことを知った記事。
設定の参考にもしてます。
- ESLintとstylelintをpluginなしでprettierと共存させるvscode設定について | きむそん.dev
- ESLint, Prettier, VS Code, npm scripts の設定: 2021春
- eslint-plugin-prettier を ESLint から 分離するサンプル – Intellij IDEA の設定変更も | DevelopersIO
- いつのまにかeslint-plugin-prettierが推奨されないものになってた | K note
下記のリンクを読むと.eslintrc.jsの設定をどうすればいいのかのヒントになります。
@nuxtjs/eslint-config-typescript が有効にするESLintのルール | Yurikago Blog
決定版！イマドキの ESLint 設定！ | DevelopersIO
こちらとらゼミさんのYouTube動画です。
ESLintとPrettierだけならこちらの方が分かりやすいと思います。
【日本一わかりやすいTypeScript入門】ESLintとPrettierでコードの品質を高めよう - YouTube