webpack+react+eslint

前端之家收集整理的这篇文章主要介绍了webpack+react+eslint前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

eslint主要有以下特点:

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

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

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

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

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

我们从react应用中怎么配置开始说起,还是基于上一个博客的demo(http://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文件

var path= require( 'path');
var webpack= require( 'webpack');
var HtmlwebpackPlugin= require( 'html-webpack-plugin');
var ROOT_PATH= path. resolve( __dirname);
var BUILD_PATH= path. resolve( ROOT_PATH,'build');
var APP_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:[
{
test: /\.js? $ /,
loaders:[ 'babel-loader'],
include: APP_PATH
}
]
},
plugins:[
new HtmlwebpackPlugin({
title: 'demo',
filename: 'index.html'
}),
]
}

猜你在找的React相关文章