no-use-before-define

[benjick]

trafficstars

Would it be possible to have some rule that StyleSheet.create-variables can be used before defined? If I understand correctly that is the best practice and that collides with no-use-before-define

[Intellicode]

Hi @benjick, can you provide an example? If I add the following testcase to the testsuite, it works fine:

{
    code: [
      'const Hello = React.createClass({',
      '  render: function() {',
      '    return <Text textStyle={styles.name}>Hello {this.props.name}</Text>;',
      '  }',
      '});',
      'const styles = StyleSheet.create({',
      '  name: {}',
      '});',
    ].join('\n'),
    parser: 'babel-eslint',
    ecmaFeatures: {
      classes: true,
      jsx: true,
    },
  }

Is that what you are looking for?

[benjick]

Hey, sorry for not replying. What happens if you run that code with this rule? http://eslint.org/docs/rules/no-use-before-define

[aarongreenwald]

I have this problem as well - no-use-before-define doesn't like the common pattern of putting styles at the bottom of the component file. @Intellicode I think @benjick is suggesting a new rule to replace no-use-before-define that would make an exception for this case. In my own code, I disable no-use-before-define because I don't think it's that important, but I'm not sure how others feel about this.

[benjick]

@aarongreenwald Ah yes, thank you for explaining, you are correct

[Intellicode]

I understand now, personally I define my styles at the top, but I guess it makes sense to define them at the bottom since they are closer to where they are used (the render method). I can add a rule that creates an exception for style sheets.

[prithsharma]

Is this done yet?

[Intellicode]

@prithsharma nope.

[ColCh]

@aarongreenwald +1 to You. See also .eslintrc from react-native team: https://github.com/facebook/react-native/blob/8baaad9b0fbda2b02bb1834452aa63cac7910dc5/.eslintrc#L162 They just turned the rule off Ok, I will just follow them and turn it off too.

[cwRichardKim]

https://stackoverflow.com/questions/42981070/eslint-no-use-before-define This is probably a better solution: "no-use-before-define": ["error", { "variables": false }]. Makes it target variables only

[oovz]

Feel it's kinda important from a C++ dev side 😢 Maybe python devs won't agree Would that be possible to make exception only for special objects or variable names?

[niksajanjic]

Maybe instead of just boolean: "no-use-before-define": ["error", { "variables": false }]

There could also be regex option: "no-use-before-define": ["error", { "variables": '/styles/' }]

Not sure how hard it is to implement this. I know stylelint allows this for multiple rules.

[Aung-Myint-Thein]

I just bumped into one of the situations that no-use-before-define saved my day. Please take a look at following codes.

This won't work. This won't trigger playSoundFile and I didn't know what went wrong. The code has no warning. Then I checked my linter config and I needed to added "no-use-before-define": ["error", { "variables": false }] and voila!

import React, { useState, useEffect, useCallback } from "react";
import "./styles.css";

export default function App({ pid }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    function getAPIData() {
      const fakeData = { pid: pid, soundFileLink: "abc.mp3" };
      setData(fakeData);
    }

    getAPIData();
  }, [pid]);

  useEffect(() => {
    playSounFile();
  }, [playSounFile]);

  const playSounFile = useCallback(() => {
    if (data) {
      console.log(
        "Will pretend to play the sound file at " + data.soundFileLink
      );
    }
  }, [data]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

This will work:

import React, { useState, useEffect, useCallback } from "react";
import "./styles.css";

export default function App({ pid }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    function getAPIData() {
      const fakeData = { pid: pid, soundFileLink: "abc.mp3" };
      setData(fakeData);
    }

    getAPIData();
  }, [pid]);

  const playSounFile = useCallback(() => {
    if (data) {
      console.log(
        "Will pretend to play the sound file at " + data.soundFileLink
      );
    }
  }, [data]);

  useEffect(() => {
    playSounFile();
  }, [playSounFile]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

I needed to declare playSounFile first before using it and I think Hook needs this kind of order. Happy coding!

Here is the code sandbox: https://codesandbox.io/s/pedantic-lamport-842me

[bryanprimus]

"no-use-before-define": ["error", { "variables": '/styles/' }]

this would be nice to have

[metuuu]

I also stumbled at this.