開発のドキュメント

【WEB開発】eslint, stylelintについての個人的最適設定をまとめる

はじめに

問題意識

この記事の問題意識は

  • コード書いていると、気をつけていてもたまに書き方がバラバラになってしまう
  • バラバラの書き方のコードは後から読みにくい
  • 統一するために linter を導入したい
  • ただ、設定ファイル何書いていいかいまいちピントきてない
  • まとめておきたい

って感じです。

まる
まる

コードの書き方を全て統一して書くというのは、とてもスキルのいることです。僕にはできない。。。ので、そういう細かいことは linter にやってもらいたい

この記事のゴール

この記事のゴールは

  • eslint の設定方法がわかる
  • stylelint の設定方法がわかる

こととします。

【WEB 開発】eslint, stylelint についての個人的最適設定をまとめる

eslint, stylelint を install する

まずは、eslint, stylelint をインストールします。

以下のコードを package.json の devDependencies に貼り付けてください。

  // 20200507 時点での最新バージョンです
  "eslint": "^6.8.0",
  "eslint-config-prettier": "^6.11.0",
  "eslint-config-airbnb-base": "^14.1.0",
  "eslint-plugin-import": "^2.20.2",
  "eslint-plugin-prettier": "^3.1.3",
  "stylelint": "^13.3.3",
  "stylelint-config-standard": "^20.0.0",
  "prettier": "^2.0.5",

  // vue.jsを書く場合は、別途こちらも必要になります
  "eslint-plugin-vue": "^6.1.2",

※ react, angular などのフレームワークや、typescript などのトランスパイル言語を使用する場合は別途設定が必要です。

prettier や eslint-config-airbnb-base の選定理由

ちなみに、 prettier や eslint-config-airbnb-base の選定理由も記載しておきます。

.eslintrc.json を作成する

eslint の設定ファイルです。細かい設定はここで行なっていきます。

{
  "extends": [
    "eslint:recommend",
    "airbnb-base",
    "plugin:vue/recommended",
    "prettier",
    "prettier/vue"
  ],
  "plugins": ["import", "prettier"],
  "parserOptions": {
    "ecmaVersion": 2019
  },
  "rules": {
    "prettier/prettier": "error",
    "quotes": ["error", "single"]
  }
}

.prettierrc.json を作成する

prettier の設定ファイルです。eslint で補いきれない部分をこちらで設定します。

{
  "singleQuote": true,
  "trailingComma": "all"
}

.stylelintrc.json を作成する

stylelint の設定ファイルです。

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

.eslintignore を作成する

eslint の対象にしたくないディレクトリ、ファイルを指定します。最低限、node_modules をしておけばいいと思います。

node_modules/

package.json に script を設定する

簡単に lint 実行できるように package.json の scripts にコマンドを設定しておきます。

{
  "scripts": {
    ...

    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "lint:style": "stylelint **/*.css",
    "lint:style:fix": "stylelint --fix **/*.css"
  }
}

まとめ

  • eslint, stylelint を入れる
  • 各種設定ファイルを用意する
  • 各種コマンドを用意する
  • 定期的に実行していく or CI/CD に組み込む
まる
まる

定期的に更新して、自分なりの最高の設定ファイルを作り上げると良さそうです。

ABOUT ME
aoi maru
aoi maru
94-24/色々実験だ。音楽(@kigurumi_band)とプログラミングやってます。