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分页代码(简洁实用)
Nov 05 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
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
收集的PHP中与数组相关的函数
2007/03/22 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
PHP7 windows支持
2021/03/09 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
jquery map方法使用示例
2014/04/23 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
Python实现的爬虫功能代码
2017/06/24 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
python多进程控制学习小结
2018/10/31 Python
Python3标准库总结
2019/02/19 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
Python for循环与range函数的使用详解
2019/03/23 Python
Python自动抢红包教程详解
2019/06/11 Python
django表单的Widgets使用详解
2019/07/22 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
如何通过python计算圆周率PI
2020/11/11 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
电台实习生求职信
2014/02/25 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
党员评议自我评价
2015/03/03 职场文书
简单的辞职信模板
2015/05/12 职场文书
任长霞观后感
2015/06/16 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
muduo TcpServer模块源码分析
2022/04/26 Redis
CSS的calc函数用法小结
2022/06/25 HTML / CSS