2020-09-07に更新

Nuxt.jsにlintを導入してみた

動機

以前からなんとなくeslintは導入してあーだこーだしてたのですが、ポートフォリオサイトやブログサイトをNetlifyからFirebaseに移植する際に、github actions(CI)を使うようになり、せっかくだからもう少し本格的にlintやtestを導入してみようということで、色々調べて導入してみました。

その手順を初心者なりに備忘録としてまとめてみました。
(だいぶ我流な部分もありますが多めに見ていただければ幸いです)

アドバイスなどは大歓迎です。

知識が増えたら随時更新します。

https://blog.taka1156.site

https://github.com/taka1156/nuxt-blog - アトミックデザインの形にプロジェクトを見直し中

↑ブログのプロジェクトで導入してみました。(Nuxt.js + Firebase + microCMS 構成)

環境

  • mac OS Catalina
  • Node.js v12.16.1
  • npm v6.14.3
  • yarn v1.22.0

手順

  1. これらをインストール

    • eslint関連
      yarn add eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue babel-eslint

    • stylelint関連
      yarn add stylelint stylelint-config-standard stylelint-config-prettier stylelint-prettier

    • prettier
      yarn add prettier

    ※ なんでprettierを入れたか
    eslintだけだとエラーは出すが修正はしない項目(コード整形関連)もあるので併用する。
    (逆にprettierは細かい命名規則や処理に関するエラーは出さない?)

  2. 設定ファイルを書く

    • .eslintrc.json
    {
        "parserOptions": {
            "parser": "babel-eslint",
            "sourceType": "module"
        },
        "extends": [
            "eslint:recommended",
            "plugin:vue/recommended",
            "plugin:prettier/recommended",
            "prettier/vue"
        ],
        "plugins": [
            "vue"
        ],
        "env": {
            "jest": true,
            "browser": true,
            "es6": true,
            "node": true
        },
        "globals": {},
        "rules": {
            "camelcase": [2,{"properties": "always"}],
            "quotes": [2,"single", { "avoidEscape": true } ],
            "eqeqeq": [2, "always", {"null": "ignore"}],
            "prefer-const": 2,
            "vue/component-name-in-template-casing": "off",
            "vue/no-v-html": "off"
        }
    }
    
    • .stylelintrc.json
    {
        "extends": ["stylelint-config-standard", "stylelint-prettier/recommended"],
        "rules": {
            "color-no-invalid-hex": true,
            "color-hex-case": "lower",
            "selector-class-pattern": "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$"
        }
    }
    
    • .eslintignore, .stylelintignore
      ※ storybook-static、coverage は storybookやjestを導入していると生成されるファイル
    # ビルドファイル
    dist
    storybook-static
    coverage
    
    # 設定、モジュール
    .nuxt
    .storybook
    node_modules
    
    • .prtteirrc.json
    {
        "printWidth": 85,
        "tabWidth": 2,
        "singleQuote": true,
        "semi": true,
        "bracketSpacing": true,
        "arrowParens": "avoid"
    }
    
  3. scriptsを追加

    "scripts": {
        "lint-js": "eslint --ext .js,.vue .",
        "lint-style": "stylelint \"**/*.vue\" \"**/*.css\"",
        "lint-js:fix": "eslint --ext .js,.vue . --fix",
        "lint-style:fix": "stylelint \"**/*.vue\" \"**/*.css\" --fix",
        "lint:check": "yarn lint-js & yarn lint-style",
        "lint:fix": "yarn lint-js && yarn lint-style",
        ...
    }
    
  4. お好みでvscode設定を追加
    保存時に勝手にlint処理が走るようになるので便利
    (vscode/setting.jsonに記述)

    {
        "comments": "保存時にeslint、stylelintを自動実行",
        "eslint.alwaysShowStatus": true,
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
            "source.fixAll.stylelint": true
        },
    }
    

まとめ

eslint、stylelintについてざっくりと使い方やルールの指定方法についてわかってきたので、
積極的に活用して読みやすいコードを意識していきたいですね。

また、eslintルールについても、気になるものがあればまとめてみようと思います。

ツイッターでシェア
みんなに共有、忘れないようにメモ

taka1156

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

関連記事

コメント