webpack 添加eslint代码审查
npm i --save-dev babel-eslint
npm i --save-dev eslint-loader
npm info "eslint-config-airbnb@latest" peerDependencies
{ eslint: '^5.16.0 || ^6.1.0',
'eslint-plugin-import': '^2.18.2',
'eslint-plugin-jsx-a11y': '^6.2.3',
'eslint-plugin-react': '^7.14.3',
'eslint-plugin-react-hooks': '^1.7.0' } npm i --save-dev eslint@5.16.0
npm i --save-dev eslint-plugin-import@2.18.2
npm i --save-dev eslint-plugin-jsx-a11y@6.2.3
npm i --save-dev eslint-plugin-react@7.14.3
npm i --save-dev eslint-plugin-react-hooks@1.7.0
在根目录创建.eslintrc文件 .eslintrc文件内容如下

1). 添加包
- npm install eslint --save-dev
- npm install eslint-loader --save-dev
- npm install eslint-plugin-html --save-dev
- 该插件用与检查写在script标签中的代码
- npm install babel-eslint --save-dev
- babel-eslint解析器是一种使用频率很高的解析器,现在很多项目都使用了es6,为了兼容性考虑基本都使用babel插件对代码进行编译。而用babel编译 后的代码使用babel-eslint这款解析器可以避免不必要的麻烦
- npm install eslint-plugin-react --save-dev
- npm install eslint-config-airbnb --save-dev
- npm install eslint-plugin-import --save-dev
- npm install eslint-plugin-jsx-a11y --save-dev
2)eslint 配置项
- root :
- 限定配置文件的使用范围
- parse:
- 指定eslint的解析器
- parserOptions:
- 设置解析器选项
- extends:
- 指定eslint规范
- extends可以使用eslint官方推荐的,也可以使用第三方的,如:aribnb, google, standard。
使用第三方的airbnb
- plugins:
- 引用第三方的插件
- env:
- 指定代码运行的宿主环境
- rules:
- 启用额外的规则或覆盖默认的规则
/**
* "off" 或 0 - 关闭规则
* "warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出),
* "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
*/
- globals:
- 声明在代码中的自定义全局变量
4)eslint官方提供了3种预安装包
- eslint-config-google:
- Google标准
- npm install eslint eslint-config-google -D
- eslint-config-airbnb
- Airbnb标准,它依赖eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y等插件,并且对各个插件的版本有所要求
- 你可以执行以下命令查看所依赖的各个版本:
- npm info "eslint-config-airbnb@latest" peerDependencies
- 你会看到以下输出信息,包含每个了每个plugins的版本要求
-
{ eslint: '^5.16.0 || ^6.1.0',
'eslint-plugin-import': '^2.18.2',
'eslint-plugin-jsx-a11y': '^6.2.3',
'eslint-plugin-react': '^7.14.3',
'eslint-plugin-react-hooks': '^1.7.0' }
-
- 知道了每个plugins的版本要求后,代入以下命令执行安装即可使用
- npm install eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.# -D
- npm install eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.# -D
- eslint-config-standard
- Standard标准,它是一些前端工程师自定的标准
- npm install eslint-config-standard eslint-plugin-standard eslint-plugin-promise -D
3). 在工程根目录下创建.eslintrc文件
{
"parser": "babel-eslint",
"extends": "airbnb",
"rules": {
"generator-star-spacing": [0],
"consistent-return": [0],
"react/forbid-prop-types": [0],
"react/jsx-filename-extension": [1, { "extensions": [".js"] }],
"global-require": [0],
"import/prefer-default-export": [0],
"react/jsx-no-bind": [0],
"react/prop-types": [0],
"react/prefer-stateless-function": [0],
"no-else-return": [0],
"no-restricted-syntax": [0],
"import/no-extraneous-dependencies": [0],
"no-use-before-define": [0],
"jsx-a11y/no-static-element-interactions": [0],
"no-nested-ternary": [0],
"arrow-body-style": [0],
"import/extensions": [0],
"no-bitwise": [0],
"no-cond-assign": [0],
"linebreak-style": [0],
"import/no-unresolved": [0],
"require-yield": [1],
"prefer-template":[0],
"no-undef":[0],
"no-param-reassign":[0],
"no-useless-escape":[0],
"no-plusplus":[0],
"no-mixed-operators":[0],
"object-shorthand":[0],
"no-console": [0],
"no-loop-func":[0],
"class-methods-use-this":[0],
"radix":[0],
"no-trailing-spaces":[0],
"comma-dangle": [0],
"no-underscore-dangle": [0],
"react/require-default-props": [0],
"no-unused-expressions": [0],
"react/sort-comp":[0],
"max-lines": [2,500],
"max-len": [2,125],
"react/jsx-boolean-value": [0],
"react/react-in-jsx-scope": [0],
"operator-assignment": [0],
"no-fallthrough": [0],
"react/no-array-index-key": [0],
"eqeqeq": [0],
"react/no-multi-comp": [0],
"react/no-unused-prop-types": [0],
"prefer-const": [0]
},
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true
}
}
}
webpack 添加eslint代码审查的更多相关文章
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- vue-cli构建的项目手动添加eslint配置
一.package.json里配置添加 1.scripts里添加快捷eslint检查命令 "lint": "eslint --ext .js,.vue src" ...
- vue + iview 怎样在vue项目下添加ESLint
参考:https://segmentfault.com/a/1190000012019019?utm_source=tag-newest 使用iview框架的MenuGroup标签,vscode报红, ...
- 在React项目中添加ESLint
1. 安装eslint npm install eslint --save-dev // 或者 yarn add eslint --dev 2. 初始化配置文件 npx eslint --init / ...
- 在vue项目中如何添加eslint
随着vue的越做越好,更多的开发者选择使用vue,本篇记录如何在vue项目中添加eslint. 首先第一种就是在vue项目创建初始时就选择了创建,随着初始化一起代入到了项目当中,那么要是一开始觉得es ...
- webpack+vue+Eslint+husky+lint-staged 统一项目编码规范
一. Eslint: 为什么我们要在项目中使用ESLint ESLint可以校验我们写的代码,给代码定义一个规范,项目里的代码必须按照这个规范写. 加入ESLint有非常多的好处,比如说可以帮助我们避 ...
- react+webpack+babel+eslint+redux+react-router+sass 环境快速搭建
本文中的例子支持webpack-dev-server自动刷新及react热替换,使用了redux管理state,用react-router切换路由,用babel实现ES6语法书写,同时支持async/ ...
- 给vue项目添加ESLint
eslint配置方式有两种: 注释配置:使用js注释来直接嵌入ESLint配置信息到一个文件里 配置文件:使用一个js,JSON或者YAML文件来给整个目录和它的子目录指定配置信息.这些配置可以写在一 ...
- atom添加eslint插件
在atom编辑器里添加插件,操作步骤如下:以atom-ide-vue插件为例 //切换到插件目录cd /Users/name/.atom/packages //将需要下载插件的源代码拉下来git cl ...
随机推荐
- 【JVM】内存区域
程序运行时,有六个地方都可以保存数据: 1. 寄存器:这是最快的保存区域,因为它位于和其他所有保存方式不同的地方:处理器内部.然而,寄存器的数量十分有限,所以寄存器是根据需要由编译器分配.我们对此没有 ...
- Django基础--Django基本命令、路由配置系统(URLconf)、编写视图、Template、数据库与ORM
web框架 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构. 使用框架可以帮你快速开发特定的系统. 简单地说,就是你用别人搭建好的舞台来做表演. 尝试搭建一个简单 ...
- parse_str()函数怎么用?
php parse_str()函数 语法 parse_str()函数怎么用? php parse_str()函数表示将字符串解析成多个变量,语法是parse_str(string,array),如果未 ...
- webpack 兼容低版本浏览器,转换ES6 ES7语法
ES6,ES7真的太棒了,async +await+Promise,让我阅读代码的时候不用再从左拉到右了(异步太多,一层套一层真的太头痛) 但是有个问题,打包后低版本浏览器运行不了,还有我用了一些混淆 ...
- Linux Bash Shell快速入门(一)
BASH 的基本语法· 最简单的例子 —— Hello World! · 关于输入.输出和错误输出 · BASH 中对变量的规定(与 C 语言的异同) · BASH 中的基本流程控制语法 · 函数的使 ...
- nginx防止SQL注入规则
$request_uriThis variable is equal to the *original* request URI as received from the client includi ...
- 探索Redis设计与实现10:Redis的事件驱动模型与命令执行过程
本文转自互联网 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial ...
- SpringMVC架构实现原理
SpringMVC架构实现原理 一.SpringMVC介绍 Spring mvc是一个基于mvc的web框架.其中核心类是DispatcherServlet,它是一个Servlet,顶层是实现的Ser ...
- android.os.NetworkOnMainThreadException异常 (转)
转:http://blog.csdn.net/wotoumingzxy/article/details/7797295 这个异常大概意思是在主线程访问网络时出的异常. Android在4.0之前的版本 ...
- P3203 [HNOI2010]弹飞绵羊(LCT)
弹飞绵羊 题目传送门 解题思路 LCT. 将每个节点的权值设为\(1\),连接\(i\)和\(i+ki\),被弹飞就连上\(n\),维护权值和\(sum[]\).从\(j\)弹飞需要的次数就是\(sp ...