怎样在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 ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
openlayers4实现点动态扩散
Aug 17 Javascript
小程序实现密码输入框
Nov 16 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
一个分页的论坛
2006/10/09 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
利用Python实现颜色色值转换的小工具
2016/10/27 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
在django模板中实现超链接配置
2019/08/21 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
一道写SQL的面试题和答案
2013/11/19 面试题
投资协议书范本
2014/04/21 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
群众路线专项整治方案
2014/10/27 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
优秀班组事迹材料
2014/12/24 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server