配置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 相关文章推荐
页面中js执行顺序
Nov 09 Javascript
不同浏览器的怪癖小结
Jul 11 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
js仿微信抢红包功能
Sep 25 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 Javascript
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
PHP类的封装与继承详解
2015/09/29 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
python中sets模块的用法实例
2014/09/30 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
使用TensorFlow实现SVM
2018/09/06 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
python binascii 进制转换实例
2019/06/12 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
python编写计算器功能
2019/10/25 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
Java面试笔试题大全
2016/11/23 面试题
电大自我鉴定范文
2013/10/01 职场文书
二手房买卖协议书
2014/04/10 职场文书
毕业典礼致辞
2015/07/29 职场文书
运动会主持人开幕词
2016/03/04 职场文书
导游词之峨眉山
2019/12/16 职场文书