DEV

webpack + eslint

#ESLint#webpack

webpackでeslintを使う場合、eslintとは別に、eslint-loaderをインストールする必要があります。

インストール

$ npm i -D webpack
$ npm i -D webpack-dev-server
$ npm i -D eslint
$ npm i -D eslint-loader

そして、webpack、eslintそれぞれの設定ファイルを作成します。

webpackの設定

下記のように、webpack.config.jsを設定します。 moduleのpreLoadersにeslint-loaderの設定を書きます。moduleは、eslint-loader等の-loaderを省略できます。あと、下の方にあるeslintというところで、eslintの設定ファイルを指定します。eslintrc.jsonとか、.eslintrcというファイル名であれば指定は不要かもです。

module.exports = {
  entry: './src/main.js',
  output: {
    path: __dirname + '/www/js',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: __dirname + '/www',
    port: 8080
  },
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint"
      }
    ],
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
     {
        test: /\.css$/,
         loader: "style!css"
     }
    ]
  },
  plugins: [],
  eslint: {
    configFile: './.eslintrc'
  }
};

eslintの設定

eslintのルールは沢山あって自分でルールを使うかどうか決められますが、AirBnBのルールが人気だし、そういうところに合わせておいて悪いことはないと思うので、基本AirBnBを使います。ただ、Reactとbabelを使っているときに沢山エラーがでたので、ちょっと修正しました。AirBnBのルールを使いつつ、このエラーは出なくてもいいやと思ったら、ルールを無効にして調整してます。まだ、使いだしたばかりなので、単なる一例です。

.eslintrc

{
    "extends": "airbnb",
    "plugins": [
        "react",
        "jsx-a11y",
        "import"
    ],
    "rules": {
        "import/no-extraneous-dependencies": 0
    },
    "env": {
        "browser": true,
        "node": true
    }
}

jsx拡張子に関するルール

reactはjsxを使いますが、jsxを使っているファイルの拡張子はjsxにしないと、AirBnBルールに怒られます。jsxを使っていないファイルはjsのままだと思うので、拡張子がjsとjsx共に、webpackがjavascriptに対して実行する処理を適用させるようにしてみます。

該当ファイルの拡張子をjsxに変更し、webpack.config.jsを下記のように修正します。

module.exports = {
  entry: './src/main.jsx',
  output: {
    path: __dirname + '/www/js',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: __dirname + '/www',
    port: 8080
  },
  module: {
    preLoaders: [
      {
        test: /\.jsx{0,1}$/,
        exclude: /node_modules/,
        loader: "eslint"
      }
    ],
    loaders: [
      {
        test: /\.jsx{0,1}$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
     {
        test: /\.css$/,
         loader: "style!css"
     }
    ]
  },
  plugins: []
};