怎样在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 相关文章推荐
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
实例讲解React 组件
Jul 07 Javascript
angular共享依赖的解决方案分享
Oct 15 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
PHP 查找字符串常用函数介绍
2012/06/07 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
PHP简单遍历对象示例
2016/09/28 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
使用python求解二次规划的问题
2020/02/29 Python
预备党员政审材料
2014/02/04 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
企业贷款委托书格式
2014/09/12 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
八达岭长城导游词
2015/01/30 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
初中团支书竞选稿
2015/11/21 职场文书