参考にさせて頂いたページ
eslint-loaderについて
.eslintrcについて
今日の環境
- Windows10
- node 8.11.1
- npm 5.8.0
- webpack 4.8.1
プロジェクトディレクトリを作成
mkdir webpack_4_eslint_introduction
npm init する
npm init
全てそのままenterを押してデフォルト値が設定されたpackage.jsonが生成されました。
グローバルにインストール
npm install -g webpack webpack-cli eslint
プロジェクトにインストール
npm install --save-dev eslint eslint-loader
今回webpack_4_eslint_introductionディレクトリ内に作成するディレクトリ構造とファイル
- .eslintrc.json
- package.json
- package-lock.json
- webpack.config.js
- node-modules/*
- src/index.js
- dist/bundle.js
webpack.config.jsの作成とその記述内容
module.exports = { mode: 'production', // entry point entry: './src/index.js', // 出力するパスは絶対パスで書きます output: { path: `${__dirname}/dist`, filename: 'bundle.js' }, // webpack4はlordersではなくなりました module: { rules: [ // 拡張子.jsのファイルに対する設定 { test: /\.js$/, exclude: /node_modules/, use: [ { loader: 'eslint-loader', }, ] }, ] }, }
.eslintrc.jsonの作成とその記述内容
eslint:recommendedをextendして、セミコロンを忘れるとエラーになるルールを追加で設定しています。
{ "extends": ["eslint:recommended"], "plugins": [], "parserOptions": {}, "env": {"browser": true}, "globals": {}, "rules": { "semi": "error" } }
./src/index.jsの作成とその記述内容
参考にさせていただいたページに倣って以下の通りです。
二行目は構文チェックでエラーになるようにセミコロンを忘れた状態です。
function hello(name) { document.body.textContent = "Hello, " + name + "!" } hello("World");
webpackでビルドをしてみる
webpackコマンドでビルドします。
webpack
以下のようなエラーが表示されました。
./src/index.js の二行目の55文字目に semi のルールによるエラーがあることがわかります。
ERROR in ./src/index.js /Users/motomichi/Desktop/webpack_4_eslint_introduction/src/index.js 2:55 error Missing semicolon semi ✖ 1 problem (1 error, 0 warnings) 1 error, 0 warnings potentially fixable with the `--fix` option.
エラーが表示されたので./src/index.jsを修正する
以下のように修正してみます。
function hello(name) { document.body.textContent = "Hello, " + name + "!"; } hello("World");
もう一度webpackでビルドをしてみる
webpack
エラーが出ずに、./dist/bundle.jsが書き出されました。