CODEWITHSUNDEEP
javascripteslintcreate-react-applint
codedog
codedog

Reputation: 2508

Disable check for key sorting in JS objects

I have an application created with create-react-app. By default it seems to check that object keys are sorted alphabetically. This is not too bad when I'm typing the code myself, but it's crazy when I copy'n'paste from other sources. Here's an example:

const styles = theme => ({
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    })
  },
  appBarShift: {
    marginLeft: drawerWidth,
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen
    })
  },
  content: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.default,
    padding: theme.spacing.unit * 3
  },
  drawerPaper: {
    position: 'relative',
    whiteSpace: 'nowrap',
    width: drawerWidth,
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen
    })
  },
  drawerPaperClose: {
    overflowX: 'hidden',
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    }),
    width: theme.spacing.unit * 7,
    [theme.breakpoints.up('sm')]: {
      width: theme.spacing.unit * 9
    }
  },
  hide: {
    display: 'none'
  },
  menuButton: {
    marginLeft: 12,
    marginRight: 36
  },
  root: {
    flexGrow: 1,
    height: 430,
    zIndex: 1,
    overflow: 'hidden',
    position: 'relative',
    display: 'flex'
  },
  toolbar: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: '0 8px',
    ...theme.mixins.toolbar
  }
});

I sorted the first level keys but it seems to check the nested ones too! Now I'm getting 

C:/Source/portal/src/components/MenuAppBar.js
(19,5): The key 'transition' is not sorted alphabetically

I can't seem to find a way to enable the JS linting. There were hints about disabling tslint but I'm not using Typescript in this case.

I am using VS Code and have tried Sort JS object keys as well as Sort JSON objects. Unfortunately neither of them sort nested keys.

Upvotes: 0

Views: 3817

Answers (1)

Parth Chokshi
Parth Chokshi

Reputation: 652

/* eslint sort-keys: 0 */

Add this on the top of the styles file

Upvotes: 2

Related Questions