Eslint如何不忽略node_modules里检测（vue+webpack项目）

背景：

        我们项目里的业务组件是以单独的仓库子模块的形式，通过安装包的形式install到主项目里node_modules里的。主项目是开启了eslint检测的，但是发现对node_modules里的内容是不起作用的，但因为公司的质量检测组要扫描我们的代码，所以必须要让子模块的代码也能被eslint检测。

        一开始我的想法是应该是eslint会有个配置，配置一下应该就可以，但是百度了好久没有找到我想实现的这种效果，然后又开始研究是不是在webpack里有个配置可以配置，结果发现这条路也走不通，然后我就找到eslint的官方文档（附eslint中文官网链接Configuring ESLint - ESLint中文ESLint中文官网, ESLint中英文对照, JavaScript代码检测, JavaScript代码风格检测, JavaScript代码自动格式化,A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.http://eslint.cn/docs/user-guide/configuring）一字一句的读，结果发现了重要的一点：

注意到了最后一句提醒了没，和我一开始的猜想一样 ，eslint是自动忽略node_modules的，再结合它的语法：以 ! 开头的行是否定模式，它将会重新包含一个之前被忽略的模式。

解决方法

1、所以我打开项目的.eslintignore文件（项目里没有这个文件的可自行百度添加）添加了最后一行代码，让eslint不要忽略node_modules里的检测

/build/
/config/
/dist/
/*.js
/test/unit/coverage/
!node_modules/*

2、现在eslint已经会不忽略node_modules了，但是因为它还是会以webpack里对eslint的配置进行文件检测，所以接下来要在webpack上做点文章了。不然如果webpack没有配置eslint要解析子模块的路径也仍然不起作用。找到项目build文件夹下的webpack.base.conf.js文件，在eslint配置相关的地方的include参数里增加resolve('node_modules/xxx/你需要校验eslint的子模块路径')

	module: {
		rules: [
			...(config.dev.useEslint? [{
				test: /\.(js|vue)$/,
				loader: 'eslint-loader',
				enforce: 'pre',
				include: [resolve(`main`),resolve('node_modules/xxx/你需要校验eslint的子模块路径')], // 加到这里
				exclude: excludeEslint,
				options: {
					formatter: require('eslint-friendly-formatter'),
					emitWarning: !config.dev.showEslintErrorsInOverlay
				}
			}] : []),
			{
				test: /\.vue$/,
				loader: 'vue-loader',
				options: vueLoaderConfig,
				// include: [resolve(`main`),resolve(`node_modules/@submodules`)]
				// exclude: [/node_modules/],
			},
			{
				test: /\.js$/,
				loader: 'babel-loader',
				exclude: excludeBabelLoader,
				include: [resolve(`submodule`), resolve(`main`)]
			}
		]
	}

 3、这个时候你再npm run dev就能看到子模块也被eslint检测到并在控制台报错啦，按照它的提示进行eslint修复就可以了。

修复ESlint

说到修复eslint，大家都知道编辑器可以右键自动修复，也就是右键的这个菜单Fix ESLint Problems(没有的可自行百度如何设置编辑器)

但是我发现如果你不用编辑器单独打开子模块，只是打开主模块开发的话，在node_modules里子模块你右键的时候是不会出现这个右键菜单的，我比较懒不想单独打开，也是受到一个同事的启发，所以我的解决方法是将主模块node_modules里安装的关于eslint的包复制到子模块新建的node_modules文件夹下，这个时候你在子模块右键就能看到Fix ESLint Problems菜单了，由于自动修复有些有限，所以自动修复还不满足的需要你自己根据提示手动修复，这样就节省了很大一部分时间。后面新开发的实时注意控制台有没有eslint报错及时修复就好了。

 小插曲（npm run dev与npm run lint的差异）

当我通过npm run dev 看到控制台已经没有eslint报错之后，就把代码提交给了公司的质量部扫描，不幸的是公司那边的报告却是扫描出来好多eslint不合格的错误，

我有点奇怪，我本地明明已经没有错误了啊，难道是前面的那些方法不对？它会有漏检测文件的现象？带着疑问我查看了公司统计的报错详情，但确实那些文件是还存在错误的。这是咋回事？本着刨根问底的精神，我开始想找出这个中间的原因。

一开始我还以为是vue组件大小写的问题，因为报错的几个组件的首字母恰好是大写，后来经过实验发现不是大小写的原因，因为在测试过程中我发现我在主模块新建的vue文件也仍然在npm run dev之后看不到错误，和同事咨询后一句话点醒了我，是不是这个新建的vue文件没用被引用？我赶紧引用试了一下，果然这个时候控制台开始报错了。我仿佛看到了希望，想到那公司检测出来的报错文件是不是也是这个情况，经验证，对，没错！就是因为那些文件没用被引用过，所以我这边没有发现，那解决办法就是我删掉了那些没有被引用的文件就可以了。

也许你以为这样就到此结束了，毕竟问题已经解决了，但我又陷入了不安，那为什么我这边没用被引用的文件eslint就不检测，公司质量部那边就检测呢？如果以后有同事又不小心创建了文件最后没使用呢？带着疑问我又继续查资料，我的猜测是eslint是不是有个配置可以控制检测是否被引用的文件，但是几乎没有看到我这个问题的提问，所以我就咨询了下质量部部署这个检测的同事，经过对比也没找到原因，因为我俩的eslint规则配的都是一样的，但是他最后的一句话他说那他看看脚本，我突然想到是不是我们俩使用的命令不一样？

 小插曲小结：果然通过验证，npm run dev是不会检测未被引用的文件是否符合eslint，而npm run lint是独立的是会检测所有要检测的文件，包括未被引用的。至于更深的原因我就没再继续追究，猜测公司质量部那边大概是使用的npm run lint进行的检测

最后总结：

要想实现node_modules里的文件也被eslint检测，需要eslint的配置和webpack的配置相结合才能达到目的，网上搜索不到解决方法的时候要仔细去读官网文档，也许你就能找到答案。