简单配置使用eslint校验代码
发布于 9 年前 作者 zhangmingkai4315 13745 次浏览 最后一次编辑是 8 年前 来自 分享
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文档

回到顶部