webpack项目使用eslint建立代码规范实现


Posted in Javascript onMay 16, 2019

首先当然是新建一个项目了。假设项目已经建好了,下面开始配置

1. 安装eslint

如果你还没有全局安装 eslint ,第一件事当然是安装 eslint

npm i -g eslint

2. 初始化 eslint

eslint --init

这个命令会生成一个 .eslintrc 的文件,有几种形式。选自己习惯的形式就行,我的生成的是一个 .eslintrc.js 文件,如下:

module.exports = {
 "extends": "standard"
};

然后就可以简单的lint某个文件了:

eslint yourfile.js

在项目里新添加 eSLint

然后找到 package.json ,把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",

执行 npm install 就好了

修改默认规则

关于 eslint 配置文件的详解,可以点击这里查看,这里只简单说下eslint规则详情

extends

继承某个已配置好的规则,从某个现有的规则上进行扩展。一般比较流行的eslint规则有三种:Google 标准、airbnb标准、standard标准。

Google 标准安装

npm install eslint eslint-config-google -g

airbnb标准安装

airbnb 标准,它依赖 eslint , eslint-plugin-import , eslint-plugin-react , and eslint-plugin-jsx-a11y 等插件,并且对各个插件的版本有所要求。

你可以执行以下命令查看所依赖的各个版本:

npm info "eslint-config-airbnb@latest" peerDependencies

你会看到以下输出信息,包含每个了每个plugins的版本要求

{ eslint: '^3.15.0',
 'eslint-plugin-jsx-a11y': '^3.0.2 || ^4.0.0',
 'eslint-plugin-import': '^2.2.0',
 'eslint-plugin-react': '^6.9.0'
}

知道了每个plugins的版本要求后,代入以下命令执行安装即可使用:

npm install eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.# -g

standard标准安装

Standard标准,它是一些前端工程师自定的标准。

npm install eslint-config-standard eslint-plugin-standard eslint-plugin-promise -g

rules

eslint 启用的规则列表。你可以重写 eslint 的规则,定义级别:

module.exports = {
 rules: {
  'no-console': 1
 }
};

左边是规则,右边是级别。1为警告,2为报错,0为关闭。 规则详情请参考这里

React使用eslint

1. 安装 eslint-plugin-react

npm i eslint-plugin-react

2. 修改 .eslintrc.js

修改 .eslintrc 的代码:

module.exports = {
 "extends": "standard",
 "env": {
  "browser": true,
  "es6": true,
 },
 "parser": "babel-eslint",
 "parserOptions": {
  "ecmaFeatures": {
   "experimentalObjectRestSpread": true,
   "jsx": true
  },
  "sourceType": "module",
  "ecmaVersion": 2018
  },
  "plugins": [
  "react"
  ],
}

参考文章:

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

Javascript 相关文章推荐
js jquery数组介绍
Jul 15 Javascript
jQuery图片播放8款精美插件分享
Feb 17 Javascript
JS 两个字符串时间的天数差计算
Aug 25 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
vue better scroll 无法滚动的解决方法
Jun 07 Javascript
Angular异步变同步处理方法
Aug 13 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
详解js常用分割取字符串的方法
May 15 #Javascript
elementUI table表格动态合并的示例代码
May 15 #Javascript
You might like
JAVA/JSP学习系列之二
2006/10/09 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
Javascript 刷新全集常用代码
2009/11/22 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
python @classmethod 的使用场合详解
2019/08/23 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
Python 串口通信的实现
2020/09/29 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
线程同步的方法
2016/11/23 面试题
国际经济贸易专业推荐信
2013/11/06 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
综合实践教学反思
2014/01/31 职场文书
暑假学习心得体会
2014/09/02 职场文书
2015新学期家长寄语
2015/02/26 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python