Nuxt.js(2系)にPrettier・ESLint・Stylelintを正しく入れる

この記事は

Nuxt.jsに2022/4時点でPrettier・ESLint・Stylelintを適切に追加する方法を調べてまとめたものです。

前提条件

• nuxt@2.15.8
• nuxt@2.15.8のwebpackは4.46.0
• eslint@8.8.0
• prettier@2.5.1
• stylelint@14.3.0
• sass@1.49.7

とりあえず環境構築

最終的なpackage.json

{
  (中略)
  "scripts": {
    (中略)
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:style": "stylelint \"**/*.{vue,css}\" --ignore-path .gitignore",
    "lint": "yarn lint:js && yarn lint:style"
  },
  "dependencies": {
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/stylelint-module": "^4.1.0",
    "nuxt": "^2.15.8"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.16.3",
    "@nuxtjs/eslint-config": "^8.0.0",
    "eslint": "^8.4.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^3.1.0",
    "postcss-html": "^1.3.0",
    "prettier": "^2.5.1",
    "sass": "^1.43.4",
    "sass-loader": "^10.2.0",
    "stylelint": "^14.1.0",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-recess-order": "^3.0.0",
    "stylelint-config-standard-scss": "^3.0.0"
  }
}

1. Prettierのインストール

yarn add -D prettier

2. ESlint等のインストール

yarn add @nuxtjs/eslint-module

yarn add -D eslint eslint-config-prettier
@babel/eslint-parser eslint-plugin-nuxt @nuxtjs/eslint-config

3. Stylelint等のインストール

共通部分

yarn add @nuxtjs/stylelint-module

yarn add -D stylelint stylelint-config-prettier

異なる部分
cssを使う場合

yarn add -D stylelint-config-order stylelint-config-standard

scssを使う場合

yarn add -D sass sass-loader@^10.2.0
stylelint-config-recess-order stylelint-config-standard-scss

設定

1. ESLintの設定

最終的な.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
    node: true
  },
  extends: ['@nuxtjs', 'plugin:nuxt/recommended', 'prettier'],
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false
  },
  plugins: [],
  rules: {
    semi: [2, 'never'],
    'no-unused-vars': 'off',
    'no-console': 'off',
    'no-sparse-arrays': 'off',
    'array-callback-return': 0,
    'import/no-named-as-default': 0,
    // vue settings
    'vue/script-setup-uses-vars': 0,
    'vue/attribute-hyphenation': 0,
    'vue/no-v-html': 0,
    'vue/multi-word-component-names': 0,
    // nuxt settings
    'nuxt/no-globals-in-created': 0,
    'nuxt/no-env-in-hooks': 0
  }
}

1-1. ESLint自体の設定

概要

• 最低限必要なのはeslint、@nuxtjs/eslint-configの二つ
  @nuxtjs/eslint-configは@nuxtjsとして設定

  eslint-loaderは非推奨です。代わりにeslint-webpack-pluginを使ってください。
  Nuxtにおいては、@nuxt/eslint-module@3.0.2にeslint-webpack-plugin@2.4.1は内包されているので、@nuxt/eslint-moduleを入れておけばOK

  以前はnuxt.config.jsのbuildに下記を追加していたが@nuxt/eslint-moduleにより不要となった。

  build: {
    extend(config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
  

• vue用の設定ファイルとしてeslint-plugin-nuxt(plugin:nuxt/recommendedとして設定)

• prettierとの競合ルールをoffにするためeslint-config-prettier(末尾にprettierとして設定)

• babel用の設定ファイルとして@babel/eslint-parser

  babel-eslintは非推奨です。代わりに@babel/eslint-parser(eslint@v8対応)を使ってください。

1-2. ESLintとPrettierの連携のための設定

まず、ESLintとPrettierを連携するには競合するルールをオフにする必要があります。
競合するルールをオフにするライブラリとして以下の２つがよく挙がります。

• eslint-plugin-prettier

  2022/5現在、eslint-plugin-prettierは非推奨です。

• eslint-config-prettier
  • 下記のように設定します。
    json { "extends": ['prettier'] // 末尾に記述する v8.0.0からは 'prettier'のみでOK }
    
    

続いて、ESLintとPrettierの実行時の連携方法ですが、以前は2パターンありました。

1. prettier-eslint を使って、PrettierからESLintを呼び出す
2. 純粋にprettierコマンド実行後に、eslintコマンドを実行する

   しかし、prettier-eslintが非推奨になり、prettier-eslint の作者ももう使ってないとのことなので、現在は2番の方法一択となります。

2. Stylelintの設定

最終的な.stylelintrc.js

module.exports = {
  customSyntax: 'postcss-html',
  extends: [
    'stylelint-config-standard-scss',
    'stylelint-config-recess-order',
    'stylelint-config-prettier'
  ],
  plugins: [],
  ignoreFiles: ['**/node_modules/**', '**/.nuxt/**', '**/dist/**'],
  rules: {
    'at-rule-no-unknown': false,
    'scss/at-rule-no-unknown': true,
    'scss/comment-no-empty': null,
    'string-quotes': 'single',
    'block-no-empty': null,
    'number-leading-zero': null,
    'color-hex-length': 'short',
    'color-no-invalid-hex': true,
    indentation: 2,
    'length-zero-no-unit': true,
    'media-feature-name-no-vendor-prefix': true,
    'shorthand-property-no-redundant-values': true,
    'no-invalid-position-at-import-rule': null,
    'no-irregular-whitespace': null,
    'selector-class-pattern': null,
    'property-no-unknown': null,
    // prettierのインラインスタイルの末尾のコロンを削除するとコンフリクトするため、回避設定
    'declaration-block-trailing-semicolon': null,
    // ::v-deepエラー回避
    'selector-pseudo-class-no-unknown': null
  }
}

2-1. stylelint自体の設定

概要

• 最低限必要なのは、stylelintと@nuxtjs/stylelint-moduleの二つ
• vueファイルを解釈するためにpostcss-html
• scssを使うのであればstylelint-scss
• prettierとの競合ルールをoffにするためstylelint-config-prettier(末尾に設定)
• stylelint@14系を入れるなら、stylelint@14系は内部でpostcss@7系を使っており、一方でpostcss-scssがpostcss@8系を必要としているため、トップレベルでpostcss@8系のインストールが必要

文法チェックルールセット

• スタンダードな設定：stylelint-config-standard

  {
    "extends": ["stylelint-config-standard"]
  }
  

• ちょっと緩めな設定：stylelint-config-recommended

  {
    "extends": ["stylelint-config-recommended"]
  }
  

並び替えルールセット

• スタンダードな並び替え：stylelint-order
  詳しいルール設定方法はこちら

  {
    "plugins": ["stylelint-order"],
    "rules": { "order/properties-alphabetical-order": true } //ABC順に並べる
  }
  

• recessに則った並び替え：stylelint-config-recess-order

  {
    "extends": ["stylelint-config-recess-order"]
  }
  

2-2. stylelintとprettierの連携のための設定

まずはESLint同様、Prettierと連携するには競合するルールをオフにする必要があります。

• stylelint-config-prettierを使います。

続いて、StylelintとPrettierの実行時の連携方法ですが、以前は3パターンありました。

1. stylelint-prettierを使ってStylelintからPrettierを呼び出す
2. prettier-stylelintを使ってPrettierからStylelintを呼び出す
3. 純粋にprettier実行後にstylelintコマンドを呼び出す方法

2022/5現在、stylelint-prettierが非推奨です。また、prettier-stylelintも実行速度が遅いと言われているため使用を勧めません。ESLint同様,3番を個人的には勧めます。

Typescript対応

• @nuxtjs/eslint-configより@nuxtjsを@nuxtjs/eslint-config-typescriptに置き換え
• @babel/eslint-parserは@typescript-eslint/parserに置き換え

{
  "root": true,
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "@nuxtjs/eslint-config-typescript",
    "plugin:nuxt/recommended",
    "prettier"
  ],
  "parserOptions": {
    "ecmaVersion": 13,
    "parser": "@typescript-eslint/parser",
    "requireConfigFile": false
  }
}

おまけ

settings.json

{
  "typescript.format.insertSpaceAfterSemicolonInForStatements": false,
  "javascript.format.insertSpaceAfterSemicolonInForStatements": false,
  "editor.tabSize": 2,
  "editor.hover.enabled": false,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true,
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "vetur.format.enable": false,
  "editor.guides.bracketPairs": true,
  "git.ignoreLimitWarning": true,
  "stylelint.validate": ["css", "scss"],
  "css.validate": false,
  "scss.validate": false
}