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

動機

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

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

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

環境

• 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ルールについても、気になるものがあればまとめてみようと思います。