Nuxt + TypeScript に Stylelint + ESLint + Prettier を導入 - inokawablog

Nuxt + TypeScript に Stylelint + ESLint + Prettier を導入

Nuxtの環境にLinterとFormatterを導入して開発環境を快適にします。

prettier

$ yarn add -D prettier

VSCodeの設定

保存時自動整形の方が作業が捗るので、やりたい方は以下の設定を。

vscodeを使用している場合は,settings.jsonを以下のように設定すると保存時に自動で保存されます。

{
  "editor.formatOnSave": false,
  "css.validate": false,
  "scss.validate": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }
}

stylelint

stylelintの導入

$ yarn add -D node-sass sass-loader stylelint @nuxtjs/stylelint-module stylelint-config-standard stylelint-config-recess-order stylelint-scss stylelint-config-recommended-scss stylelint-prettier stylelint-config-prettier

プロパティの並び順はstylelint-config-recess-orderに準拠します。

@nuxtjs/stylelint-moduleを読み込みます

export default {
  buildModules: ['@nuxtjs/stylelint-module']
}

stylelint.config.js

// https://toragramming.com/programming/nuxt-js/nuxt-stylelint-prettier-vscode-format-scss-on-save/
module.exports = {
  extends: [
    // Google や Airbnb のスタイルガイドなどが含まれた一般的なスタイル規則
    'stylelint-config-standard',
    // SCSS 用ルールセット
    'stylelint-config-recommended-scss',
    // stylelint-config-で適応したルールとprettierが競合するルールを後ろからオフにする
    // そのためstylelint-prettier/recommendedは必ず最後に記述する
    'stylelint-config-prettier',
    'stylelint-config-recess-order',
    'stylelint-prettier/recommended'
  ]
}

eslint

$ yarn add -D eslint-config-airbnb-base babel-plugin-module-resolver babel-eslint eslint-config-prettier eslint-import-resolver-alias eslint-plugin-import eslint-import-resolver-babel-module eslint-plugin-nuxt eslint-plugin-prettier

それぞれの詳細

コーディング規約はairbnbのルールに従います。

eslint-config-airbnb-base

Airbnbのベースの.eslintrcを提供しています。

babel-plugin-module-resolver

プロジェクトのrequire / importパスを簡略化できます

babel-eslint

Babelのコードをlintします

eslint-config-prettier

不要またはPrettierと競合する可能性のあるすべてのルールをオフにします。

eslint-import-resolver-alias

Node.jsモジュール解決、モジュールエイリアス/マッピング、カスタムファイル拡張子をサポートしています

eslint-plugin-import

インポート/エクスポート構文のリンティングをサポートしています

eslint-import-resolver-babel-module

eslint-plugin-importのためのリゾルバ

eslint-plugin-nuxt

Nuxt.js用のESLintプラグイン

eslint-plugin-prettier

PrettierをESLintルールとして実行し、差異を個々のESLint問題として吐き出す。

.eslintrc.js

module.exports = {
    root: true,
    parser: 'vue-eslint-parser',
    env: {
        browser: true,
        node: true
    },
    parserOptions: {
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    extends: [
        '@nuxtjs/eslint-config-typescript',
        'plugin:prettier/recommended',
        'plugin:nuxt/recommended',
        'prettier/vue',
        'airbnb-base',
        'prettier'
    ],
    plugins: [
        'prettier'
    ],
    rules: {
        // DOC: https://eslint.org/docs/rules/no-debugger
        // debuggerの使用を禁止するかどうか
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        // DOC: https://eslint.org/docs/rules/no-console
        // consoleの使用を禁止するかどうか
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        // eslint-config-airbnb利用時のeslintのエラーを解消するため。no-extraneous-dependenciesというeslint-config-airbnbのルールと衝突するため
        'import/no-extraneous-dependencies': ['error', {
            devDependencies: true,
            optionalDependencies: false,
        }],
        '@typescript-eslint/no-unused-vars': 'error',
        // DOC: https://eslint.org/docs/rules/lines-between-class-members
        // クラスの関数の間を改行
        'lines-between-class-members': 'off',
        // DOC: https://eslint.org/docs/rules/no-unused-expressions
        // 未使用の式を許可しない
        'no-unused-expressions': 'off',
        // DOC: https://eslint.org/docs/rules/no-underscore-dangle
        // アンダースコアを許可
        'no-underscore-dangle': 'off',
        // DOC: https://eslint.org/docs/rules/complexity
        // 循環的複雑度の制限(ネストの深さ)
        "complexity": ["error", 10],
        // DOC: https://eslint.org/docs/rules/consistent-return
        // return時に常に値を指定
        'consistent-return': 'off',
        // DOC: https://eslint.org/docs/rules/no-duplicate-imports
        // 重複するインポートを許可しない
        'import/no-unresolved': 0,
        // DOC: https://eslint.org/docs/rules/no-plusplus
        // 単項演算子++と--を許可
        'no-plusplus': 'off',
        // https://eslint.org/docs/rules/comma-style
        // 末尾カンマ禁止
        'comma-style': ["error", "last"],
        // https://eslint.org/docs/rules/no-useless-escape
        // エスケープの使用を許可。docでの</script>を許可するため
        'no-useless-escape': 'off'
    },
    settings: {
        'import/core-modules': ['vue', 'vuex', 'axios'],
        "import/no-extraneous-dependencies": [
            "error", {
                "devDependencies": true
            }
        ],
        'import/resolver': {
            'babel-module': {
                "root": ".",
                "alias": {
                    "~": "./src",
                    "@": "./src",
                    "~~": ".",
                    "@@": "."
                }
            }
        }
    }
}