简单配置使用eslint校验代码 - CNode技术社区

1.编辑器安装

sublime 安装:

sublimeLinter-contrib-eslint

2.两个配置例子

例一:使用eslint-plugin-react支持react,es6的代码校验

npm install --save-dev eslint-plugin-react eslint

创建eslintrc .eslintrc 配置文件:

{
 "env": {
 "node": 1,
 "browser": 1,
 "mocha": true
 },
"ecmaFeatures": {
	
	"jsx": true,
	
	"es6": true
},
"plugins": [
 	"react"
 ]
"extends": ["eslint:recommended", "plugin:react/recommended"]
}

例二 使用airbnb的代码规范:

npm install --save-dev eslint-config-airbnb eslint-plugin-react eslint

.eslintrc配置文件:

{
 "extends": "airbnb",
 "env": {
 "browser": true,
 "node": true,
 "mocha": true
 },
 "ecmaFeatures": {
 "forOf": true,
 "jsx": true,
 "es6": true
 },
 "rules": {
 "comma-dangle": 0,
 "indent": [2, 2, {"SwitchCase": 1}],
 "react/prop-types": 0
 }
}

3.使用webpack

使用webpack我们需要先下载对应的webpack loader

npm install --save-dev eslint-loader

在配置文件中加入:

...
module:{
	preLoaders: [
 {test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/}
 ],
	loaders:[
	{
		test:/\.jsx?$/,
		exclude:/node_modules/,
		loader:'react-hot!babel'
	},
	{
		test:/\.css$/,
		loaders:['style','css'],
		include:'/dist'
	}]
},
eslint: {
 failOnWarning: true
 } 
...

对于其中的一些规则,可查看对应的eslint文档