ESLintを設定してある前提です。Webpackでbundleする際に、ESLintを実行する方法です。
ESLint自体の設定は下記記事を参考にしてください。Nuxt.jsでの設置ですが、変わらず動作します。
[NUXT.JS]ESLint and Prettierの設定の方法
eslint-loaderのインストール
npm install eslint-loader --save-deveslint-loaderをconfigに設定する
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
// eslint options (if necessary)
},
},
],
},
// ...
};ただ、webpackの場合、ESLintのみloaderとして設定することは少ないと思います。
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
// option
}
},
{
loader: 'eslint-loader',
option: {
// option
}
}
]
},
],
},
// ...
};併用した場合、記載する順序が重要になります。上記のように記載した場合は、eslintからloaderが読み込まれます。
とはいえ、より厳密にbabel-loaderよりも先にeslint-loaderを実行したい場合は、下記の通りになります。
module.exports = {
// ...
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
],
},
// ...
};enforce: 'pre'をつけることで確実に先に実行することができます。
オプションについて
オプションについての簡単なまとめです。詳細はeslint-loaderのページをご確認ください。
キャッシュを利用することで、lintingに要する時間を短縮できます。
フォーマッターを使用して、自動的にコーディングルールにあわない記述を修正します。
type：String | function (default: stylish)
エラーが発生した場合、webpackのビルドを失敗させます。
type：boolean | object (default: false)
outputPathを例に記述方法を記載します。outputPathはさらにfilepathとformatterが指定できます。
module.exports = {
entry: '...',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
outputReport: {
filePath: 'checkstyle.xml',
formatter: 'checkstyle',
},
},
},
],
},
};JavaScriptおすすめの書籍
JavaScriptはonlineの情報も多く、Google検索が便利なので書籍を読む必要はないかもしれません。
ただ、これから学ぶ方は一冊簡単な本を読んだ方が理解が深まると思います。逆引き本とかも良書はあるのですが、Google検索した方がコピー＆ペーストできるので便利なのでいらないかな。
開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質
超おすすめ！Google検索では出てこないJavaScriptが学べます。これを読み終えた時、一段自分のコーディング力が上がったと思いました。
📦