Working with ESLint in the UI

Author: James9074

ui/.eslintrc

@@ -0,0 +1,34 @@
+const path = require('path');
+
+module.exports =
+  Object.assign({},{
+    "parser": "babel-eslint",
+    "extends": "airbnb-base",
+    "plugins": [
+      "flowtype",
+      "react"
+    ],
+    "rules": {
+      "curly": "off", // Ugly for one-liners
+      "no-underscore-dangle": "off", // I like this one actually, but the library we're using enforces it.
+      "semi": "off", // Where's the "force no semi" rule?
+      "comma-dangle": "off", // Ew. I get it, but ew.
+      "prefer-const": "off", // Sometimes we don't mutate, but want the ability to later on
+      "consistent-return": "off", // Often unnecessary
+      "func-names": "off", // Often Cleaner
+      "space-before-function-paren": "off", // Personal preference
+      "space-before-blocks": "off", // Personal preference
+      "no-else-return": "off", // Sometimes an if/else block looks cleaner, even if unnecessary
+      "react/jsx-uses-vars": 1,
+      "import/extensions": "off",
+      "import/first": "off",
+      "import/no-extraneous-dependencies": ["error", {"devDependencies": false, "optionalDependencies": false, "peerDependencies": false}]
+    }
+  },
+  {settings: {
+      'import/resolver': {
+        node: {
+          paths: [path.resolve(__dirname, 'src')],
+        },
+      },
+  }})

ui/.eslintrc.js

@@ -29,6 +29,7 @@
     "postcss-flexbugs-fixes": "3.0.0",
     "postcss-loader": "2.0.6",
     "promise": "7.1.1",
+    "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-apollo": "^1.4.8",
     "react-autosuggest": "^9.3.2",
@@ -50,8 +51,6 @@
   "devDependencies": {
     "eslint": "^3.19.0",
     "eslint-config-airbnb-base": "^11.2.0",
-    "eslint-plugin-flowtype": "^2.35.0",
-    "eslint-plugin-import": "^2.7.0",
     "eslint-config-react-app": "^1.0.5",
     "eslint-loader": "1.7.1",
     "eslint-plugin-flowtype": "2.34.0",

ui/package.json

@@ -1,7 +1,8 @@
+/* eslint-disable */
 .monaco-editor{
   width:100% !important;
 }
 
 .overflow-guard{
   width:100% !important;
-}
+}

ui/src/App.css

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Switch, Route } from 'react-router-dom'
 import { gql, graphql } from 'react-apollo';
@@ -17,7 +17,7 @@ import AddIcon from 'material-ui-icons/Add';
 import { MuiThemeProvider } from 'material-ui/styles';
 import { RobotTheme } from './Themes'
 import 'typeface-roboto'
-import css from './App.css'
+import css from './App.css' // eslint-disable-line no-unused-vars
 
 @graphql(gql`query { me { displayName username imageUrl } }`)
 class App extends Component {
@@ -27,44 +27,44 @@ class App extends Component {
 
   state = {
     hoveredTooltip: false,
-    loginModalOpen:false,
+    loginModalOpen: false,
   }
 
-  addNew = (event, index) => {
-    if(!this.props.data.me)
-      this.setState({loginModalOpen:true})
+  addNew = () => {
+    if (!this.props.data.me)
+      this.setState({ loginModalOpen: true })
     else
       this.context.router.history.push('/lambdas/new')
   };
 
   render() {
     const theme = RobotTheme;
-    if(!this.props.data || this.props.data.loading){
+    if (!this.props.data || this.props.data.loading){
       return <FullPageLoader theme={theme}/>
     }
     return (
         <MuiThemeProvider theme={theme}>
-    
+
             <div className="App" >
-              <AppToolbar 
-                onRef={ref => (this.child = ref)}
+              <AppToolbar
+                onRef={ref => (this.child = ref)} //eslint-disable-line
                 loading={false}
                 {...this.props} />
-              <Grid container gutter={0} justify="center" style={{padding: '0 15px 0 15px', marginTop: '60px', backgroundColor:theme.canvasColor[900]}}>
+              <Grid container gutter={0} justify="center" style={{ padding: '0 15px 0 15px', marginTop: '60px', backgroundColor: theme.canvasColor[900] }}>
                 <Grid item xs={12} sm={10} lg={8}>
                   <Grid item xs={12}>
                     <Switch>
-                      <Route path='/lambdas/new' render={(props) => ( <NewLambdaPage appData={this.props.data}/> )}/>
+                      <Route path='/lambdas/new' render={<NewLambdaPage appData={this.props.data}/>}/>
                       <Route path='/users/:user' component={User} appData={this.props.data}/>
                       <Route path='/:slug' component={LambdaPage} appData={this.props.data}/>
                       <Route path='/' component={Lambdas} appData={this.props.data}/>
                     </Switch>
                   </Grid>
 
-                  {this.context.router.route.location.pathname.indexOf("/lambdas/new") === -1 && (<Button onClick={this.addNew} fab color="primary" style={{position: 'fixed',right: '15px', bottom: '15px'}}>
+                  {this.context.router.route.location.pathname.indexOf('/lambdas/new') === -1 && (<Button onClick={this.addNew} fab color="primary" style={{ position: 'fixed', right: '15px', bottom: '15px' }}>
                     <AddIcon />
                   </Button>)}
-                  <LoginModal onClose={()=>this.setState({loginModalOpen:false})} 
+                  <LoginModal onClose={() => this.setState({ loginModalOpen: false })}
                     isOpen={this.state.loginModalOpen}
                     returnTo='/lambdas/new' />
                 </Grid>
@@ -75,4 +75,4 @@ class App extends Component {
   }
 }
 
-export default App;
+export default App;

ui/src/App.js

@@ -1,4 +1,5 @@
-import React from 'react';
+/* eslint-disable */
+
 import ReactDOM from 'react-dom';
 import App from './App';
 

ui/src/App.test.js

@@ -47,7 +47,7 @@ export const RobotThemeDark = createMuiTheme({
 export const MainTheme = createMuiTheme({
   palette: createPalette({
     type: 'light',
-    primary: { 
+    primary: {
       50: '#757495',
       100: '#5E5D83',
       200: '#474671',
@@ -58,13 +58,13 @@ export const MainTheme = createMuiTheme({
       700: '#030132',
       800: '#03012D',
       900: '#020127',
-      'A100': '#5E5C8F',
-      'A200': '#47457F',
-      'A400': '#19175F',
-      'A700': '#020041',
-      'contrastDefaultColor': '#88003C'
+      A100: '#5E5C8F',
+      A200: '#47457F',
+      A400: '#19175F',
+      A700: '#020041',
+      contrastDefaultColor: '#88003C'
     },
     accent: blue,
     error: red,
   }),
-});
+});

ui/src/Themes.js

@@ -1,5 +1,5 @@
 export function getRandomInt(min, max) {
   min = Math.ceil(min);
   max = Math.floor(max);
-  return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
-}
+  return Math.floor(Math.random() * (max - min)) + min; // The maximum is exclusive and the minimum is inclusive
+}

ui/src/Util.js

@@ -1,12 +1,9 @@
 // @flow
 
-import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'material-ui/styles';
 import Grid from 'material-ui/Grid';
 import Paper from 'material-ui/Paper';
-import Typography from 'material-ui/Typography';
-//import Breadcrumbs from 'components/breadcrumbs'
 import styles from './styles'
 import ViewLambda from 'components/viewLambda'
 
@@ -16,7 +13,7 @@ function lambdaPage(props, context) {
   return (
     <Grid container gutter={0} justify="flex-start" className={classes.card}>
       <Grid item xs={3} >
-        {/*<Breadcrumbs />*/}
+        {/* <Breadcrumbs /> */}
       </Grid>
       <Grid item xs={12}>
         <Paper className={classes.root}>
@@ -37,5 +34,3 @@ lambdaPage.contextTypes = {
 };
 
 export default withStyles(styles)(lambdaPage);
-
-

ui/src/components/_lambdaPage/index.js

@@ -1,7 +1,7 @@
 import { createStyleSheet } from 'material-ui/styles';
 
 export default createStyleSheet('lambdaPage', theme => ({
-  root:{
-    padding:'15px'
+  root: {
+    padding: '15px'
   },
-}));
+}));