Eslint使用(webpack中使用)
一、安装
npm i -D eslint
npm i babel-eslint \
eslint-config-airbnb \ // Airbnb的编码规范是在业界非常流行的一套规范
eslint-loader \
eslint-plugin-import \
eslint-plugin-jsx-a11y \
eslint-plugin-node \
eslint-plugin-promise \
eslint-plugin-react -g
二、配置文件
新建.eslintsrc文件,在根目录下面。
对于与.eslintrc文件进行设置
1)每个环境的全局变量都不尽相同(如 nodejs 中没有 DOM 相关的全局变量)。在配置文件中可以自由的指定执行环境。
// .eslintrc.js
module.exports = {
env: {
browser: true,
node: true,
},
};
(2)全局变量。如果你想在一个源文件里使用全局变量,推荐你在 ESLint 中定义这些全局变量,这样 ESLint 就不会发出警告了。
// .eslintrc.js
module.exports = {
globals: {
var1: true,
var2: true,
},
};
(3)规则
在配置文件中可以设置一些规则。这些规则的等级有三种:
"off" 或者 0:关闭规则
"warn" 或者 1:打开规则,并且作为一个警告(不影响exit code)
"error" 或者 2:打开规则,并且作为一个错误(exit code将会是1)
也可以通过注释来取消 /* eslint-disable */
以下是简单的配置文件:
{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"parser": "babel-eslint",
"extends": "airbnb",
"parserOptions": {
"ecmaFeatures": 6,
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"camelcase": "off",
"arrow-parens": "off",
"no-console": "warn",
"no-unused-vars": "warn",
"no-return-assign": "off",
"no-param-reassign": ["error", { "props": false }],
"no-nested-ternary": "off",
"linebreak-style": 0,
"eslint-disable-next-line":0
}
}
3.webpack进行配置
我希望在项目开发的过程当中,每次修改代码,它都能够自动进行ESLint的检查。因为在我们改代
码的过程中去做一次检查,如果有错误,我们就能够很快地去定位到这个问题,由于是我们刚刚改
过的,因此立马把它修复掉就OK了。这就避免了我们每次改了一大堆代码之后,要去提交的时候,
再去跑一次ESLint,有可能有很多地方要去改,浪费我们的时间,因为你一下子就定位不到这个问
题在哪里了。同时我们每次改代码的时候去检测,也能改善我们写代码的规范性,让我们慢慢养成
规范写代码的习惯。在module下面的rules里面添加一个对象:需要加上 enforece: 'pre',
这叫预处理。
{
enforce: 'pre', // 在webpack编译之前进行检测
test: /.(js|jsx)$/,
loader: 'eslint-loader',
exclude: [ // 除去node_modules
path.resolve(__dirname, '../node_modules')
]
},
三、使用
通过命令行来启动 ,--ext命令行选项指定一个逗号分隔的扩展名列表
eslint --ext .js --ext .jsx client/webpack进行配置使用,在pagekage.json
"scripts": {
"lint": "eslint --ext .js --ext .jsx client/"
},
eslint 修复,可能在使用eslint产生很多报错,可以通过工具进行修复, npm run lint-fix,也可以使用 /* eslint-disable */注释来清除错误。
"scripts": {
"lint": "eslint --ext .js --ext .jsx client/",
"lint-fix": "eslint --fix --ext .js --ext src/"
},
四、Git提交
- 安装 husky ,
npm i husky -D - 修改package.json的scripts
"scripts": {
...
"lint": "eslint --ext .js --ext .jsx client/",
"precommit": "npm run lint"
}
五、editorconfig设置
不同编辑器对文本的格式会有一定的区别,如果不统一一些规范,可能你跟别人合作的时候,每次更新下来别人的代码就会一大堆报错。
- 新建.editconfig文件
- 文件内容
root = true // 表示当前是项目根目录
[*] // 所有文件都使用配置
charset = utf-8 // 编码格式
indent_style = space // Tab键缩进的样式,由space和table两种 一般代码中是space
indent_size = 2 // 缩进size为2
end_of_line = lf // 以lf换行 默认win为crlf mac和linux为lf
insert_final_newline = true // 末尾加一行空行
trim_trailing_whitespace = true // 去掉行尾多余空格
Eslint使用(webpack中使用)的更多相关文章
- webpack中配置eslint
首先安装eslint npm install eslint --save-dev 安装好这个工具后,初始化eslint npx eslint --init 这个时候会自动生成.eslintrc.js ...
- Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案
文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...
- webpack中利用require.ensure()实现按需加载
webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...
- webpack中实现按需加载
webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...
- [转] webpack中配置Babel
一.安装 npm install --save-dev babel-loader babel-core babel-preset-env 二.在webpack.config.js中配置module 1 ...
- [转]webpack中require和import的区别
webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require.ensure,以及webpack自己定义的require.incl ...
- webpack中插件 prerender-spa-plugin 来进行SEO优化(二十四)
vue.react对于开发单页应用来说带来了很好的用户的体验,但是同样有缺点,比如首页加载慢,白屏或SEO等问题的产生.为什么会出现这种情况呢?我们之前开发单页应用是这样开发的,比如首页 index. ...
- 如何在webpack中成功引用到图片?
打包图片时,你可曾遇到在产出目录文件夹找不到图片,即便找到了,但是页面说引用不到资源?页面上或者文件中引用的图片地址不对? 一.在webpack中引入图片需要url-loader //webpack配 ...
- webpack中如何使用vue
1.安装 vue包:npm i vue -S 2.由于在webpack中,推荐使用.vue这个组件模版文件来定义组件,不然会出现vue.js移动和一些高级语法的不支持,因此需要安装能解析这种文件的lo ...
- Webpack中publicPath设置
webpack中的path是当我们build的时候,输出项目打包文件的位置. webpack中的publicPath是我们打算放到web服务器下的目录,如果我们要放到网站的根目录下,那么就无需设置.如 ...
随机推荐
- 第54节:Java当中的IO流(中)
Java当中的IO流(中) 删除目录 // 简书作者:达叔小生 import java.io.File; public class Demo{ public static void main(Stri ...
- 《http权威指南》读书笔记4
概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...
- yarn组件通信协议简介
ResourceManager与NodeManager通过ResourceTracker协议通信. NodeManager通过NodeStatusUpdaterImpl中的ResourceTracke ...
- [原创]K8Cscan插件之Weblogic漏洞扫描&通用GetShell Exploit
[原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...
- ionic3 生成android 如何控制versionCode版本号
ionic 项目中生成 android 如何控制版本号呢. 1.在项目的配置文件下的config.xml 来我们可以看到 <widget id="com.ionicframework. ...
- C++版-剑指offer 面试题6:重建二叉树(Leetcode105. Construct Binary Tree from Preorder and Inorder Traversal) 解题报告
剑指offer 重建二叉树 提交网址: http://www.nowcoder.com/practice/8a19cbe657394eeaac2f6ea9b0f6fcf6?tpId=13&tq ...
- Log4Net在MVC下的配置以及运用线程队列记录异常信息
Log4Net是用来记录日志的,可以将程序运行过程中的信息输出到一些地方(文件.数据库.EventLog等),日志就是程序的黑匣子,可以通过日志查看系统的运行过程,从而发现系统的问题.日志的作用:将运 ...
- SpringCloud学习6-如何创建一个服务消费者consumer
上一节如何创建一个服务提供者provider已经启动了一个provider的server,提供用户信息查询接口.接下来,我们启动另一个provider,由于是同一台机器本地测试,我们换一个端口 --s ...
- 32位汇编第五讲,逆向实战干货,(OD)快速定位扫雷内存.
32位第五讲,逆向实战干货,快速定位扫雷内存. 首先,在逆向之前,大家先对OD有一个认识. 一丶OD的使用 标号1: 反汇编窗口 (显示代码的地址,二进制指令,汇编代码,注释) 标号2: 寄存器窗口( ...
- hadoop集群无法找到datanode节点问题解决
问题:在配置hadoop集群时,master的50070后台中找不到slave的datanode节点怎么办? 解决: 方法一:首先确认下master和slave的hdfs-site.xml配置中的df ...