Help us understand the problem. What is going on with this article?

ESLintの設定をscoped packageでnpmにあげて使い回す

More than 3 years have passed since last update.

ESLintがv2にアップデートしてからけっこう変わって、だましだましv1系の設定をいじりながら使い続きてたけどだいぶカオスになってきたので気合入れて書き直した。

https://github.com/hokaccha/eslint-config

せっかく気合入れて書いたのでプロジェクトを横断して設定を共有できるようにしたい。

ESLintの設定を使い回すのはいくつか方法が考えられる。

  1. プロジェクトごとにコピペする
  2. npmモジュールにしてextendする

さらにnpmモジュールとして利用するのはいくつか方法があって、

  1. eslint-config-hokacchaみたいにグローバルな名前でnpmにpublishして使う
  2. scoped packageとして@hokaccha/eslint-configみたいな名前でnpmにpublishして使う
  3. githubに置いといてnpm install hokaccha/eslint-configみたいにして使う

たぶん1が一番メジャーな方法で、eslint-config-airbnbとかeslint-config-standardあたりが有名どころ。そうすると.eslintrcでは

.eslintrc
{
  "extends": "airbnb"
}

みたいにするだけでその設定を使いまわせる。

http://eslint.org/docs/user-guide/configuring#extending-configuration-files

なのでeslint-config-hokacchaみたいな名前でpublishしてもいいんだけど、グローバルなネームスペースに個人の設定あげるのも何か気が引ける(個人の名前でpublishしてる人もけっこういるしそんなに問題にはならないと思うけど気持ちの問題)。

そこでscoped packageでpublishすることにした1。scoped packageについてはazuさんの記事を参照のこと。

npmで名前空間を持ったモジュールを公開する方法(scoped modules) | Web Scratch

こんな感じでnpmにpublishした。

https://www.npmjs.com/package/@hokaccha/eslint-config

インストールして

$ npm install --save-dev eslint @hokaccha/eslint-config

extendするだけ。

.eslintrc
{
  "extends": ["@hokaccha/eslint-config"]
}

これで気合入れて書いた設定を共有できるしアップデートにも追従できる。便利。


  1. 知らなかったんだけどteppeisさんに教えてもらった 

hokaccha
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away