原博客地址：

前言

了解eslint基础用法，若想更进一步了解其，请查阅以及相关资料()

若有问题请指出或加群264591039与我讨论。

初始化项目

使用create-react-app 创建项目（此过程不做详解），然后运行npm run eject使其暴露webpack等配置文件

自定义eslint

上述步骤并没有暴露react脚手架封装的eslint操作，为了使得项目统一规范化，添加jsx-eslint操作

• 在项目根目录下添加.eslintrc文件

• 在根目录找到config文件夹，并找到文件夹下的webpack.config.dev.js文件

• webpack.config.dev.js文件添加如下代码：

enforce: 'pre',use: [{  // @remove-on-eject-begin  // Point ESLint to our predefined config.  options: {    //configFile: path.join(__dirname, '../.eslintrc'),    useEslintrc: true  },  // @remove-on-eject-end  loader: 'eslint-loader'}],

• 运行npm start,此时，你编写的jsx文件都是经过.eslintrc的配置限制

.eslintrc文件基本规范配置

ps: 配置的value对应的值： 0 : off 1 : warning 2 : error

{  "extends": "react-app",  "rules": {    "no-multi-spaces": 1,    "react/jsx-space-before-closing": 1,        // 总是在自动关闭的标签前加一个空格，正常情况下也不需要换行    "jsx-quotes": 1,    "react/jsx-closing-bracket-location": 1,    // 遵循JSX语法缩进/格式    "react/jsx-boolean-value": 1,               // 如果属性值为 true, 可以直接省略    "react/no-string-refs": 1,      // 总是在Refs里使用回调函数    "react/self-closing-comp": 1,    // 对于没有子元素的标签来说总是自己关闭标签    "react/jsx-no-bind": 1,          // 当在 render() 里使用事件处理方法时，提前在构造函数里把 this 绑定上去    "react/sort-comp": 1,            // 按照具体规范的React.createClass 的生命周期函数书写代码    "react/jsx-pascal-case": 1        // React模块名使用帕斯卡命名，实例使用骆驼式命名  }}