怎样在vue项目下添加ESLint的方法


Posted in Javascript onMay 16, 2019

简易搭建

ESLint官网网址

ESLint中文官网

如果你是想在自己的项目里搭建ESLint,就可以按照官网的指示,

以全局安装举例,

npm install -g eslint

然后初始化

eslint --init

它会问你一些问题,你可以按照你的喜好进行配置,我选的是popular下面的standard,生成的文件是js格式,那么就会创建出eslintrc.js文件:

module.exports = {
"extends": "standard"
};

然后就可以简单的lint某个文件了:

$ eslint yourfile.js

在vue的项目里新添加ESLint

有的时候,早期的时候,我们建立vue项目的时候,可能图简便,并没有初始化ESLint、单元测试等等模块,那么就需要后添加进去。

如果是现在新建一个项目,通过vue-cli的问答就可以轻松初始化ESLint的配置。

这里说一下怎样在老项目里新添加ESLint。

首先,我先用vue-cli创建了一个新项目,在初始化的时候,选择安装eslint,

选择standard规则,然后就生成了eslintrc.js,把生成的这个文件拷贝到要加ESlint的老项目里。

// https://eslint.org/docs/user-guide/configuring
module.exports = {
 //默认情况下,ESLint 会在所有父级目录里寻找配置文件,一直到根目录。如果你想要你所有项目都遵循一个特定的约定时,这将会很有用,但有时候会导致意想不到的结果。为了将 ESLint 限制到一个特定的项目,在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件里的 eslintConfig 字段下设置 "root": true。ESLint 一旦发现配置文件中有 "root": true,它就会停止在父级目录中寻找。
 root: true,
 parser: 'babel-eslint',
 parserOptions: {
  sourceType: 'module'
 },
 env: {
  browser: true,
 },
 // https://github.com/standard/standard/blob/master/docs/RULES-en.md
 extends: 'standard',
 // required to lint *.vue files
 plugins: [
  'html'
 ],
 // add your custom rules here
 'rules': {
  // allow paren-less arrow functions 要求箭头函数的参数使用圆括号
  'arrow-parens': 0,
  // allow async-await 强制 generator 函数中 * 号周围使用一致的空格
  'generator-star-spacing': 0,
  // allow debugger during development
  'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
 }
}

然后找到package.json,把ESLint相关的依赖加进去(也可以一个一个进行安装,或者有更好的办法。。)

怎样在vue项目下添加ESLint的方法

"babel-eslint": "^7.1.1",  "eslint": "^3.19.0",

  "eslint-friendly-formatter": "^3.0.0",
  "eslint-loader": "^1.7.1",
  "eslint-plugin-html": "^3.0.0",
  "eslint-config-standard": "^10.2.1",
  "eslint-plugin-promise": "^3.4.0",
  "eslint-plugin-standard": "^3.0.1",
  "eslint-plugin-import": "^2.7.0",
  "eslint-plugin-node": "^5.2.0",

然后在webpack.base.conf.js的rules里添加

{
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
    options: {
     formatter: require('eslint-friendly-formatter')
    }
   },

npm install一下,应该就可以了。

这里的编辑器推荐用vscode,可以非常智能的显示出哪里出错,方便修改。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
eslint 的三大通用规则详解
May 16 #Javascript
webpack项目使用eslint建立代码规范实现
May 16 #Javascript
Vue项目中使用jquery的简单方法
May 16 #jQuery
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 #Javascript
详解vue2.0模拟后台json数据
May 16 #Javascript
详解Vue-Router源码分析路由实现原理
May 15 #Javascript
微信小程序select下拉框实现效果
May 15 #Javascript
You might like
239军机修复记
2021/03/02 无线电
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
pymysql 开启调试模式的实现
2019/09/24 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
职业生涯规划书基本格式
2014/01/06 职场文书
大学生军训广播稿
2014/01/24 职场文书
小学三年级学生评语
2014/04/22 职场文书
工作检讨书怎么写
2015/01/23 职场文书
2016年度创先争优活动总结
2016/04/05 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang