Vue项目手动添加ESLint

前置条件:
公司的一个项目用 vue cli创建的时候,没有安装ESLint功能
项目进展到现在,所以需要添加ESLint功能,此篇文章就是记录该如何给一个Vue项目手动添加ESLint。
目标项目:一个没有ESLint的Vue项目
Demo项目:使用vue cli创建一个带有ESLint功能的项目

package.json

在Demo项目中package.json文件中找到 "devDependencies"中的


image.png

分别copy红色框1和红色框2,把他们粘贴到目标项目package.json文件中的位置

框1的千万不要漏掉!

执行 cnpm install

分别观察Demo项目和目标项目下的文件夹 node_modules
会发现Demo项目有如下的文件:


image.png

而目标项目没有。
这个时候在目标项目下执行cnpm install
完成后,也会有同样的文件了。
如果执行失败,那就删除整个node_modules

.eslintignore和.eslintrc.js

把Demo项目中的文件

.eslintignore
.eslintrc.js

copy到目标项目

config/index.js

image.png

把Demo项目中的红色框中的内容copy到目标项目的相关位置

build/webpack.base.conf.js

把Demo项目中的如下内容copy到文件中的相关位置


image.png

Demo项目中的rules红框内容1


image.png

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

是一定要把内容2替换成内容1,不能把内容1直接粘贴在内容2上面,否则会出现意想不到的问题

这样最终就可以完成ESLint的功能的安装了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容