您现在的位置:首页 >> 前端 >> 内容

webpack+react+eslint

时间:2017/3/21 9:29:00 点击:

  核心提示:webpack+react+eslint,eslint目标是以可扩展,每条规则独立,不内置编码风格为理念的lint工具,用户可以定制自己的规则做成公共包。eslint主要有以下特点:1)默认规则包含所...

webpack+react+eslint,eslint目标是以可扩展,每条规则独立,不内置编码风格为理念的lint工具,用户可以定制自己的规则做成公共包。

eslint主要有以下特点:

1)默认规则包含所有的jslint,jshint中存在的规则易迁移

2)规则可配置性高,可设置警告,错误两个error等级,也可以直接禁用

3)包含代码风格检测的规则

4)支持插件扩展,自定义规则

针对react开发者,eslint已经可以很好的支持jsx语法了。

我们从react应用中怎么配置开始说起,还是基于上一个博客的demo(https://blog.csdn.net/jasonzds/article/details/63326342)项目说起,首先npm安装必要的包

npm i eslint eslint-loader --save-dev

接着安装3个第三方配制好的插件,在这里使用airbnb开发配置合集eslint-config-airbnb这个配置有3个插件

npm i eslint-config-airbnb --save-dev

npm i eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev

5)配置.eslintrc文件

{ "extends":"airbnb", "rules":{ "comma-dangle":["error","never"] } }

意思就是直接继承airbnb的配置规则,同时也可以写入自己的特定规则,后面的内容会覆盖默认的规则,

把eslint加入web pack

preloaders:[ { test:/\.js?$/, loaders:['eslint'], include:APP_PATH } ],

最后的web pack.config.js文件是

varpath=require('path'); varwebpack=require('webpack'); varHtmlwebpackPlugin=require('html-webpack-plugin'); varROOT_PATH=path.resolve(__dirname); varBUILD_PATH=path.resolve(ROOT_PATH,'build'); varAPP_PATH=path.resolve(ROOT_PATH,'app');

module.exports={ entry:{ app:path.resolve(APP_PATH,'app.js') }, output:{ path:BUILD_PATH, filename:'[name].bundle.js' }, resolve:{ extensions:['','.js','.jsx'], root:APP_PATH }, module:{ preloaders:[ { test:/\.js?$/, loaders:['eslint'], include:APP_PATH } ], loaders:[ { test:/\.js?$/, loaders:['babel-loader'], include:APP_PATH } ] }, plugins:[ newHtmlwebpackPlugin({ title:'demo', filename:'index.html' }), ] }

 

Tags:WE EB BP PA 
作者:网络 来源:jasonzds的博
  • 上一篇:清除浮动的几种方式
  • 下一篇:Array.from()