Vue项目手动添加ESLint
2018-07-31 本文已影响88人
传说中的汽水枪
前置条件:
公司的一个项目用 vue cli创建的时候,没有安装ESLint功能
项目进展到现在,所以需要添加ESLint功能,此篇文章就是记录该如何给一个Vue项目手动添加ESLint。
目标项目:一个没有ESLint的Vue项目
Demo项目:使用vue cli创建一个带有ESLint功能的项目
package.json
在Demo项目中package.json文件中找到 "devDependencies"中的

分别copy红色框1和红色框2,把他们粘贴到目标项目package.json文件中的位置
框1的千万不要漏掉!
执行 cnpm install
分别观察Demo项目和目标项目下的文件夹 node_modules
会发现Demo项目有如下的文件:

而目标项目没有。
这个时候在目标项目下执行cnpm install
完成后,也会有同样的文件了。
如果执行失败,那就删除整个node_modules
.eslintignore和.eslintrc.js
把Demo项目中的文件
.eslintignore
.eslintrc.js
copy到目标项目
config/index.js

把Demo项目中的红色框中的内容copy到目标项目的相关位置
build/webpack.base.conf.js
把Demo项目中的如下内容copy到文件中的相关位置

Demo项目中的rules红框内容1

目标项目中的rules红框内容2:

是一定要把内容2替换成内容1,不能把内容1直接粘贴在内容2上面,否则会出现意想不到的问题
这样最终就可以完成ESLint的功能的安装了。