美文网首页
Vue项目手动添加ESLint

Vue项目手动添加ESLint

作者: 传说中的汽水枪 | 来源:发表于2018-07-31 18:08 被阅读88次

    前置条件:
    公司的一个项目用 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的功能的安装了。

    相关文章

      网友评论

          本文标题:Vue项目手动添加ESLint

          本文链接:https://www.haomeiwen.com/subject/meghvftx.html