Nuxt.jsにPrettier・ESLint・Stylelintを正しく入れる

34154 ワード
テキストリンク

この記事は

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

前提条件

とりあえず環境構築

最終的な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として設定

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

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

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

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

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

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


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

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

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-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とPrettierの実行時の連携方法ですが、以前は3パターンありました。

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


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
}
【Vue】<script setup>をサクッと使ってみる
[Rust] モジュールのベストプラクティス