怎样在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 文件传参及处理技巧分析
May 13 Javascript
javascript常用对话框小集
Sep 13 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
请求时token过期自动刷新token操作
Sep 11 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的引用计数机制
2013/06/14 PHP
解析php5配置使用pdo
2013/07/03 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
python设计模式大全
2016/06/27 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
python 两个数据库postgresql对比
2019/10/21 Python
详解Python中的Lock和Rlock
2021/01/26 Python
python os.listdir()乱码解决方案
2021/01/31 Python
英国电子专家:maplin
2019/09/04 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
介绍一下grep命令的使用
2012/06/28 面试题
Unix控制后台进程都有哪些进程
2016/09/22 面试题
倡导文明标语
2014/06/16 职场文书
保险公司开门红口号
2014/06/21 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸
SQL Server Agent 服务无法启动
2022/04/20 SQL Server