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

完成形までの手順

アプリを作成

npx nuxt-create-appコマンドでアプリを作成する場合はESLint、Stylelint、Prettierにチェックを入れて作成します。
後から導入することも可能ですがまぁまぁ時間がかかります。
後から導入する場合は作成したアプリのルートディレクトリで下記を実行します

terminal

touch .eslintrc.js
touch .prettierrc
touch .stylelint.config.js
yarn add -D eslint stylelint prettier eslint-config-prettier stylelint-config-prettier

パッケージをインストール

scssを使う場合は下記パッケージをインストールします。

terminal

yarn add -D node-sass sass-loader stylelint-config-standard-scss stylelint-order stylelint-scss

VSCodeの拡張機能をインストール

下記の3つをインストールすれば特に問題なく使えると思います。
CLIコマンドに関しては今回は設定しません。

設定ファイルを追加、編集

.eslintrc.js

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: "babel-eslint",
  },
  extends: ["@nuxtjs", "prettier", "plugin:nuxt/recommended"],
  plugins: [],
  rules: {},
}

.prettierrc

.prettierrc

{
  "semi": false,
  "singleQuote": false
}

.stylelint.config.js

.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

.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が非推奨になったことを知った記事。
設定の参考にもしてます。

下記のリンクを読むと.eslintrc.jsの設定をどうすればいいのかのヒントになります。
@nuxtjs/eslint-config-typescript が有効にするESLintのルール | Yurikago Blog
決定版！イマドキの ESLint 設定！ | DevelopersIO

こちらとらゼミさんのYouTube動画です。
ESLintとPrettierだけならこちらの方が分かりやすいと思います。
【日本一わかりやすいTypeScript入門】ESLintとPrettierでコードの品質を高めよう - YouTube