How do I get linting working for React?

reactjs
linting

#1

I’m seeing warnings for missing semi-colons that I’d like to not be warned about, but errors like missing spaces before closing tags and missing newlines at the end of files are not getting flagged.


#2

Hi,

We only have certain rules enabled by default. You can easily add your own rules by creating a file named “.eslintrc” in your workspace. Please note that you need to have the setting “Show hidden files” enabled to see the new file.

You can use any of the following rules: https://github.com/yannickcr/eslint-plugin-react . The IDE will pick them up automatically. You can also use other rules from: http://eslint.org/docs/rules/ .

A format example for your file would be:

ecmaFeatures:
    jsx: true

plugins: 
  - react
  
rules:
    jsx-curly-spacing: 1
    no-did-mount-set-state: 1
    no-did-update-set-state: 1
    no-direct-mutation-state: 1
    no-is-mounted: 1
    no-unknown-property: 1
    prefer-es6-class: [1, "never"]
    prop-types: 1
    react-in-jsx-scope: 1
    self-closing-comp: 1
    sort-comp: 1
    wrap-multilines: 1
    jsx-boolean-value: [1, "always"]
    jsx-equals-spacing: 1
    jsx-indent-props: 1
    jsx-key: 1
    jsx-indent: 1
    jsx-max-props-per-line: [1, { maximum: 5 }]
    jsx-no-bind: 1
    jsx-no-duplicate-props: 1
    jsx-no-undef: 1
    jsx-pascal-case: 1
    jsx-uses-react: 1

Hope this helps! Happy coding!

Dana