怎样在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 相关文章推荐
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
js表单登陆验证示例
Oct 19 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
vue watch监控对象的简单方法示例
Jan 07 Vue.js
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
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
JavaScript this 深入理解
2009/07/30 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
Python subprocess模块学习总结
2014/03/13 Python
Python requests库用法实例详解
2018/08/14 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
python实现贪吃蛇双人大战
2020/04/18 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
关键字final的用法
2013/10/02 面试题
this关键字的作用
2016/01/30 面试题
文案策划求职信
2014/04/14 职场文书
一体化教学实施方案
2014/05/10 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
三八妇女节致辞
2015/07/31 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android