WebエンジニアためのNuxt.jsのオススメLint設定まとめ

こんにちは!のせっち@nosecchi01です。

前回『マークアップエンジニアがNuxtでLP制作をする』ためのまとめ記事を投稿しました。

Nuxtでは、プロジェクトを作成する際に、Lint系ツールを一緒に入れることができます。
こちらの内容を解説しきれなかったのでこちらで紹介します!

本記事では最低限こうできたらいいよね、というLint環境を目指します。

  • ルールを厳しくしすぎずエラー祭りにならないようにする
  • vs codeでscss保存時に自動整形してもらう

Nuxtインストール時にstylelint、Prettier、ESLintにチェック

nuxt-create-app時にESLint、Prettier、Stylelintにチェックを入れておきます。

? Choose linting tools 
 ◉ ESLint
 ◉ Prettier
 ◯ Lint staged files
 ◉ StyleLint

そうすると、自動的に .eslintrc.js、.prettierrc、stylelint.config.jsができているはずです。

デフォルトでは下記のような感じ

module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
  // add your custom config here
  // https://stylelint.io/user-guide/configuration
  rules: {},
}
{
  "semi": false,
  "singleQuote": true
}
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  extends: [
    '@nuxtjs',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended',
  ],
  plugins: ['prettier'],
  // add your custom rules here
  rules: {},
}

こちらをカスタマイズしていきます。

ESLint、Stylelintをカスタマイズします。Prettierはとりあえずこのままです。

ルールを厳しくしすぎずエラー祭りにならないようにする

.eslintrc.jsでは、下記を追加しておきます。

  • jQueryの$をエラー判定しない。
  • 変数名はキャメルケースじゃなくてもOKにする。

結果はこちら

module.exports = {
  'globals': {
    '$': false,
  },
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  extends: [
    '@nuxtjs',
    'prettier',
    'prettier/vue',
    'plugin:nuxt/recommended',
  ],
  plugins: [],
  // add your custom rules here
  rules: {
    'camelcase': 'off',
  },
}

jQueryを使わない方は不要ですが、マークアップエンジニアさんにとってはまだまだjQueryは活躍するケースも多いと思います。

キャメルケース強制は、アンダースコア派の人にとっては邪魔になるので念の為記載しています。

vs codeでscss保存時に自動整形してもらう

vs codeと連携させることで保存時の自動整形が可能です。

まずは設定から

NuxtでSCSSを使えるようにする

パッケージをインストールします。

npm i -D node-sass sass-loader

nuxt.config.js側でscssを読み込みます。

export default {
  css: [
    { src: '~/assets/scss/app.scss', lang: 'scss' }
  ],
}

scssを自動整形するための下準備

パッケージをインストールします。

npm i -D stylelint-config-standard-scss stylelint-order stylelint-scss

stylelint.config.jsを編集していきます。

module.exports = {
  plugins: ["stylelint-order", "stylelint-scss"],
  extends: [
    '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, // @の前に空行を入れるかどうか
  }
}

設定はお好みですが、"at-rule-no-unknown"は入れておいた方がよさそうです。

vs codeの拡張機能をインストールする

vs codeで保存時に自動整形してもらうために、拡張機能をインストール&設定していきましょう。

vs codeの拡張機能からstylelint.vscode-stylelintをインストールします。

僕は長いことstylelint-plusを使っていたのですが、vs codeが公式にサポートしているのがこちらのようですね。

stylelintのVSCode拡張はどれ使えば良いのか

https://qiita.com/ota-meshi/items/1599fa6e7042f00635d5

stylelint-plusは一手間入れないと、エラーが出るので乗り換えてよかったです。

インストールできたら、vs codeのpreference → settings → setting.jsonを開きます。

Settingsの画面で検索窓に”setting.json”と入力すればすぐ見つかります。

vs code側の自動整形をOFFに

vs codeに組み込まれている自動整形とstylelintで2重にエラー警告されることを防ぐために、built-inの方はオフにしておきます。

"css.validate": false,
"scss.validate": false

公式の方でもOptional(but recommended) setupとして紹介されていますね!

保存時の自動整形をOnに

続けてsetting.jsonを編集します。

"editor.codeActionsOnSave": {
  "source.fixAll.stylelint": true,
},

これでscss保存時に自動整形することができます。

お疲れ様でした!

まとめ

・Nuxtインストール時にESLint、Prettier、Stylelintを選択すれば最低限の設定ファイルを渡してくれる
・あとは必要な設定を追加していけばOK!

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
現在は、主にバンコクでWeb制作、物販を中心に生きています。