关于使用create-react-app 创建 React 整合 ESLINT

 

    最近一段时间感觉前端知识极度匮乏，这就想着学习什么框架，充充电，VUE？ Angular? NO！！！

    It is React !!!!  好吧！我的确是感觉facebook好一点 ，倒不是瞧不起 VUE、或者Google 哈。。。。

    喜欢这个框架多半是之前喜欢Android 所以HAHA，虽然React Native 没学过，不过没关系，我要杠上React,

    感觉就像在写JAVA，我用的ECMASCRIPT 6 哈，我本身就是后端程序员，但是要学会前后端的路还很长，我还是萌新，

    React 官网说得好，我们做这个东西是自顶向下的传递数据流，以便于管理状态，注意，它不像VUE 双向绑定，它不是MVVM

    框架，如果想实现双向数据绑定，可以使用onChange 事件嘛！！！哈哈，这是最简单的、最有效的办法了，通过修改state中的      值，来实现你想要的效果，你们其实不用看视频的，官网有中文的，这里不提供，百度一搜，能出来，放心，这还是有的。。。

    所有的信息官网都有，不说多了，直奔主题，我这几天一直在弄这个ESLINT,总是感觉这个网友们发的教程差了好多，可能人家     觉得超级简单，就发主要步骤，我去，我这等才接触React 不到一个月的人????? 我去～～～～ 没办法，吧。。。。

   科学上网了解一下 咦嘻嘻 果然找到一篇不错的，还有一篇，感觉有点一般，就不贴了

   https://alligator.io/react/linting-react/

   具体步骤如下

   先创建React 启动一哈！！！（我认为就是看看成果 我没启动）

这一步是把webpack的控制权转交给用户，不可逆，生产别这么干！！！！！因为React 模块里面引用了webpack

下一步安装以下依赖 这个就是你生成的那个工程的文件夹下

$ npm install --save-dev eslint eslint-loader babel-loader babel-eslint eslint-plugin-react

记得一个一个装，npm install --save-dev 不变 后面依次变化

 

 因为我用的是ubuntu18.04的系统 (因为windows蓝屏太讨厌了，MAC太贵，mmp)

看下图

这个命令就是创建一个叫    .eslintrc   的文件   注意加粗的地方 有一个点，别忘了写。。。

下面该干什么，当然是放一些规则之类的东西了，显然我不够专业，但是它提供了，我就当回cv工程师。。。

{
  "parser": "babel-eslint",
  "plugins": [
    "react"
  ],
  "rules": {
    "no-console": "off", //后加的
    "space-in-parens": [ 0, "always" ],
    "template-curly-spacing": [ 2, "always" ],
    "array-bracket-spacing": [ 2, "always" ],
    "object-curly-spacing": [ 2, "always" ],
    "computed-property-spacing": [ 2, "always" ],
    "no-multiple-empty-lines": [ 2, { "max": 1, "maxEOF": 0, "maxBOF": 0 } ],
    "quotes": [ 1, "single", "avoid-escape" ],
    "no-use-before-define": [ 2, { "functions": false } ],
    "semi": [0, "never"],
    "prefer-const": 1,
    "react/prefer-es6-class": 0,
    "react/jsx-filename-extension": 0,
    "react/jsx-curly-spacing": [ 2, "always" ],
    "react/jsx-indent": [ 2, 4 ],
    "react/prop-types": [ 1 ],
    "react/no-array-index-key": [ 1 ],
    "class-methods-use-this": [ 1 ],
    "no-undef": [ 1 ],
    "no-case-declarations": [ 1 ],
    "no-return-assign": [ 1 ],
    "no-param-reassign": [ 1 ],
    "no-shadow": [ 1 ],
    "camelcase": [ 1 ],
    "no-unused-vars":"off",    //后加的
    "no-underscore-dangle" : [0, "always"],
  }
}
我还加了点后查的 具体含义上eslint 中文官网，自己看，给自己学习，DO BETTER YOURSELF！！！！！

然后你在运行 npm start 哈哈，他们官方写的也不规范，改不起就删掉，自己写呗，注意src下面的都可以删，别把src删了就行，，，，，， eslint有一些严格的缩进控制，狠有趣哦。。。然后你就会看到成功后的页面

OJBK 累到不行，好了，good luck !!!