webpack安装eslint插件，vscode中也有eslint插件，有啥区别？

Question

其实还有别的，比如prettier, 等等，这么多插件都是用来格式化或者语法/规范检查等。有什么区别吗，如果都安装了，配置之间不会冲突吗？

另外，安装了有的时候有.editrcconfig, .eslintrc, .prettierrc.jd 等文件，有的时候，检查个语法，格式化，为什么有这么多。功能怎么划分的，总感觉他们功能差不多，插件与插件之间不会打架吗？

---

2018/8/9 追问一下
如果项目不强制，但写的时候想规范一下，根据各位的回答，应该是只需要在vscode中安装eslint插件，我依此安装后，却提示

To use ESLint please install eslint by running 'npm install eslint' in the workspace folder admin-manage
or globally using 'npm install -g eslint'. You need to reopen the workspace after installing eslint

为什么要安装eslint的npm包，难道vscode插件也会与npm包这个之间有耦合吗？

Answer 1

webpack 里面的是在编译期给你报错用的，报错了会停止编译，直到你修复。

vscode中的是提示给你看的，方便你直接看到错误。顺便会帮你修复简单的错误。

冲突是会有的，不过都是可配置的，不会配置的话就先去拿一份别人配置好的来用

Answer 2

你要理解webpack和vscode的区别，

vscode是一个编辑器，里面的插件只是一些在你编辑代码的时候辅助的工具，而vscode中的eslint的插件是辅助你规范代码编写的，它只会提示你，而对你的程序不会有什么影响。

webpack静态模块打包器(module bundler)，如果你在其中使用eslint插件的时候，如果没有按照其中的规范写的话，会停止编译，你打开浏览器查看console是会提示你的，它是实实在在对你地程序是有影响的。

这两者的冲突准确点是指两边的配置文件不一样。比如在vscode中的配置文件你的string使用双引号，而webpack中确是单引号，那么在vscode中就不会提示你有错误，而打包的时候webpack则会报错。
检查语法，格式化代码，这些意义更多的在于多人协作开发时代码更规范。

Answer 3

楼上回答的不准确。

准确的说应该是webpack中的eslint是加载器，全名是eslint-loader。是为了处理某些文件的加载器而已,因此它本质是loader。

vscode是一个编辑器，vscode中的eslint本质上是一个vscode插件，

他会调用eslint，然后将eslint的报错反馈给vscode，仅此而已。

webpack和webpack-cli有什么区别？ 你可以对比理解一下

Answer 4

楼上已经正解。另外插件多，如果职能不同，基本也不可能打架。而一堆配置文件，只能说是历史积病，没办法。