配置eslint规范项目代码风格


Posted in Javascript onMarch 11, 2019

为什么要使用eslint

你在接手一个项目的维护迭代任务,阅读代码的时候是否会因为项目中充斥着各种风格的代码而感到头疼?没错,eslint就是为了解决这类问题

eslint能做什么?

1.代码风格错误提示

配置好eslint后,如果代码风格与配置描述的不符,eslint会提示代码中存在的风格问题;一般提示的情形有:
1.编辑器内,大多数编辑器配置好后能读取eslint配置文件并在文件中进行相应提示
2.eslint-loader配合webpack-dev-server能在页面中弹出相应错误内容
3.eslint通过命令号对代码进行风格检查

2.修复相应风格问题

eslint --fix 命令能修复一部分代码风格问题;能修复的范围见https://cn.eslint.org/docs/rules/中带工具图标的部分

常见问题

如何在局部禁用eslint

/* eslint-disable no-alert, no-console */

alert('foo');
console.log('bar');

/* eslint-enable no-alert, no-console */

以下是详细配置

{
 root: true,// 直接在根目录读取配置文件,能提高eslint性能
 "env": {
  "node": true,// 允许使用nodejs相关的变量,下同
  "es6": true,
  "browser": true,
  "commonjs": true
 },
 "extends": "standard", // 继承eslint-config-standard中的配置,可以在rules中覆盖
 "parser": "babel-eslint", // 为eslint制定parser,默认的Esprima只允许已纳入es标准的内容
 "plugins": "vue",// 使用eslint-plugin-vue,使eslint能对vue语法进行处理,相应rules见https://eslint.vuejs.org/rules/
 "rules": {
  "no-alert": 2,
  "indent": ["error", 4, {
   "SwitchCase": 1,
   "VariableDeclarator": 1,
   "outerIIFEBody": 1,
   "MemberExpression": 1,
   "FunctionDeclaration": { "parameters": 1, "body": 1 },
   "FunctionExpression": { "parameters": 1, "body": 1 },
   "CallExpression": { "arguments": 1 },
   "ArrayExpression": 1,
   "ObjectExpression": 1,
   "ImportDeclaration": 1,
   "flatTernaryExpressions": false,
   "ignoreComments": false
  }]
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
FileUpload上传图片(图片不变形)
Aug 05 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
JQuery工具函数汇总
Jun 15 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 #Javascript
vue基础之事件v-onclick="函数"用法示例
Mar 11 #Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 #Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 #Javascript
angular 实现下拉列表组件的示例代码
Mar 09 #Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 #Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 #Javascript
You might like
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
js实现动态时钟
2020/03/12 Javascript
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
Python处理CSV与List的转换方法
2018/04/19 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
超市5.1促销活动
2014/01/15 职场文书
论文致谢词范文
2015/05/14 职场文书
后天观后感
2015/06/08 职场文书