eslint的引入,以及选择性的忽略eslint校验

Author: introvert-y

.eslintignore

@@ -0,0 +1,9 @@
+# service-center/src/views/ServiceAgreement.vue
+# service-landing/src/views/ServiceAgreement.vue
+# service-landing/src/views/RealName.vue
+serviceWorker.js
+history.js
+src/router/index.js
+src/page/echartBox/index.js
+src/page/heightEchart/index.js
+src/page/chinaMap/index.js

.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+    "extends": "airbnb",
+    "rules": {
+        "react/jsx-filename-extension": "off",
+        "react/forbid-prop-types": "off",
+        "jsx-a11y/anchor-is-valid": "off",
+        "jsx-a11y/click-events-have-key-events": "off",
+        "jsx-a11y/no-static-element-interactions": "off",
+        "jsx-a11y/interactive-supports-focus": "off",
+        "jsx-a11y/anchor-is-valid": "off",
+        "react/no-array-index-key": "off",
+    },
+    "env": {
+        "browser": true,
+    }
+};

package.json

@@ -21,6 +21,8 @@
     "dotenv": "6.2.0",
     "dotenv-expand": "4.2.0",
     "echarts": "^4.3.0",
+    "eslint": "^6.6.0",
+    "eslint-config-airbnb": "^18.0.1",
     "eslint-config-react-app": "^5.0.0",
     "eslint-loader": "2.2.1",
     "eslint-plugin-flowtype": "3.13.0",
@@ -45,6 +47,7 @@
     "postcss-normalize": "7.0.1",
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "4.0.1",
+    "prop-types": "^15.7.2",
     "react": "^16.9.0",
     "react-app-polyfill": "^1.0.2",
     "react-app-rewired": "^2.1.4",
@@ -75,11 +78,6 @@
     "build": "node scripts/build.js",
     "test": "node scripts/test.js"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
-  },
   "eslintConfig": {
     "extends": "react-app"
   },

src/App.test.js

@@ -1,9 +1,19 @@
 // 验证路由传参
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
-function Page({location}) {
-  return (<h2>About: { location.query ? location.query.name : 'No Click' }</h2>);
+function Page({ location }) {
+  return (
+    <h2>
+      About:
+      { location.query ? location.query.name : 'No Click' }
+    </h2>
+  );
 }
 
-export default Page;
+Page.propTypes = {
+  location: PropTypes.object.isRequired,
+};
+
+export default Page;

src/page/About/index.js

@@ -1,44 +1,47 @@
 import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
 import React from 'react';
 
-const mapStateToProps = (state) => {
-  // console.log('state对象', state);
-  return {
-    value: state.count,
-    phone: state.phone,
-  }
-}
- 
+const mapStateToProps = (state) => ({
+  value: state.count,
+  phone: state.phone,
+});
+
 const mapDispatchToProps = {
-  onIncreaseClick: () => {
-    return {
-      type: 'increase',
-      count: 10,
-    }
-  },
-  onDecreaseClick: () => {
-    return {
-      type: 'decrease',
-      count: 10,
-    }
-  },
-  changeMessageCount: () => {
-    return {
-      type: 'changeMessageCount',
-    }
-  },
-}
+  onIncreaseClick: () => ({
+    type: 'increase',
+    count: 10,
+  }),
+  onDecreaseClick: () => ({
+    type: 'decrease',
+    count: 10,
+  }),
+  changeMessageCount: () => ({
+    type: 'changeMessageCount',
+  }),
+};
 
-function Page({ value, phone, onIncreaseClick, onDecreaseClick, changeMessageCount }) {
+
+function Page({
+  value, phone, onIncreaseClick, onDecreaseClick, changeMessageCount,
+}) {
   return (
     <div style={{ marginLeft: 50 }}>
       <h1>{value}</h1>
-      <button onClick={onIncreaseClick}>+</button>
-      <button style={{ marginLeft: 50 }} onClick={onDecreaseClick}>-</button>
-      <button style={{ marginLeft: 50 }} onClick={changeMessageCount}>redux异步</button>
+      <button type="button" onClick={onIncreaseClick}>+</button>
+      <button type="button" style={{ marginLeft: 50 }} onClick={onDecreaseClick}>-</button>
+      <button type="button" style={{ marginLeft: 50 }} onClick={changeMessageCount}>redux异步</button>
       <h2 style={{ marginTop: 20 }}>{phone}</h2>
     </div>
-  )
+  );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Page);
+Page.propTypes = {
+  value: PropTypes.number.isRequired,
+  phone: PropTypes.number.isRequired,
+  onIncreaseClick: PropTypes.func.isRequired,
+  onDecreaseClick: PropTypes.func.isRequired,
+  changeMessageCount: PropTypes.func.isRequired,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Page);

src/page/Counter/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import style from './index.module.css'
+import style from './index.module.css';
 
 const StyledDiv = styled.div`
   width: 300px;
@@ -21,4 +21,4 @@ function Page() {
   );
 }
 
-export default Page;
+export default Page;

src/page/CssTest/index.js

@@ -1,4 +1,5 @@
-import React from "react";
+import React from 'react';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 function mapStateToProps(state) {
@@ -11,4 +12,7 @@ function Page({ num }) {
   return (<h1>{num}</h1>);
 }
 
+Page.propTypes = {
+  num: PropTypes.number.isRequired,
+};
 export default connect(mapStateToProps)(Page);

src/page/Single/index.js

@@ -10,7 +10,7 @@ const { TextArea } = Input;
 /**
  * 用户名弹窗
  */
-function Page({form}) {
+function Page({ form }) {
   const { getFieldDecorator, validateFields, getFieldValue } = form;
   useEffect(() => {
     message.success('111');
@@ -43,9 +43,9 @@ function Page({form}) {
           <TextArea placeholder="请输入拒绝原因，必填" />,
         )}
       </Form.Item>
-      <Button onClick={() => onSubmit()} disabled={getFieldValue('text') ? false : true }>提交</Button>
+      <Button onClick={() => onSubmit()} disabled={!getFieldValue('text')}>提交</Button>
     </Form>
-  )
+  );
 }
 
 Page.propTypes = {

src/page/form/index.js

@@ -1,17 +1,24 @@
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
-function MyComponent({name}) {
+function MyComponent({ name }) {
   /* 使用 props 渲染 */
   console.log('子组件渲染了');
   return (
     <div>
       {name}
     </div>
-  )
+  );
 }
-function areEqual(prevProps, nextProps) {
-  //true则不重新渲染， 相反则重新渲染
+function areEqual() {
+  // areEqual(prevProps, nextProps)
+  // true则不重新渲染， 相反则重新渲染
   return true;
 }
+
+MyComponent.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
 export default React.memo(MyComponent, areEqual);