怎样在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 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
JavaScript数组去重的五种方法
Nov 05 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 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数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
python重试装饰器示例
2014/02/11 Python
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
python 实现UTC时间加减的方法
2018/12/31 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
护士实习生自我鉴定范文
2013/12/10 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
公证书格式
2015/01/23 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
python周期任务调度工具Schedule使用详解
2021/11/23 Python