airbnb/javascript

JavaScript Style Guide

Jordan Harband

@ljharb

we don't have that rule enabled right now.

Muhammad

@MuhammadJamaluddin

What about the (7.1 functions) section on the Github's documentation?!

& for future reference, how can I know the "currently enabled rules"?

Jordan Harband

@ljharb

not everything in the guide is linted against.

the linting config is a subset of the guide, generally.

Muhammad

@MuhammadJamaluddin

I see. Thank you, Jordan.

Muhammad

@MuhammadJamaluddin

'morgan' should be listed in the project's dependencies, not devDependencies.eslint(import/no-extraneous-dependencies)

I get this eslint error ^, why this rule is as such (morgan makes sense as a devdependency for me) & how can I overwrite it?

Muhammad

@MuhammadJamaluddin

Also, I'm getting an 'document' is not defined.eslint(no-undef) error because I'm using document.getelementById

Jordan Harband

@ljharb

@muhammadjamaluddin because it's a dev dep, and by default, most files in your repo are considered production code

what file is requiring a dev dep that isn't used in production?

as for document, you have to set browser: true in your env settings, if that applies to your project

Muhammad

@MuhammadJamaluddin

It's my express server file. I'm just using morgan in development, so it made sense to have it in the devdependenies

Yeah, thank you. I've used the env settings & it fixed the document error.

maoshuaihui

@maoshuaihui

hello

FOBABS

@fobabs

I used readLine() to read a number in a JavaScript env it worked but running it in node.js it didn’t run.
Must I use the readline() function for node.js?

Jordan Harband

@ljharb

don’t ever use inline event handlers like that; all JS goes in a separate .js file

tobslob

@tobslob

Hello, can anyone help with this challenge?

Create an application ticTacToeCheck that takes a two dimensional array representing a
finished game of tic-tac-toe (e.g. [["XO-"], ["XXX"], ["XO-"]]).
● X represents player 1 move(s).
● O represents player 2 move(s).
● Dash (-) represents no move(s).
Rules:

Return true if player 1 or player 2 win the game.
[["XO-"], ["XXO"], ["O-X"]] ➞ true
Return false if nobody won the game.
[["XXO"], ["OOX"], ["XOO"]] ➞ false
Return "Nobody moved" if nobody made a move.
[[---], [---], [---]] ➞ "Nobody moved"
Return "No/Incomplete game" if no value was received / all received arrays are void /
type of any given value is not "array".
[[], [], []] ➞ "No/Incomplete game"
[[], []] ➞ "No/Incomplete game"
[[]], [] ➞ "No/Incomplete game"
["XOX", ["XOX"], ["XOO"]] ➞ "No/Incomplete game"
["XOX", ["XOX"], []] ➞ "No/Incomplete game"
undefined ➞ "No/Incomplete game"
Return "Corrupted game" if any values differ from the expected "X", "O", "-".
[["X"], ["XX"], ["X-"]] ➞ "Corrupted game"
[["AAA"], ["BBA"], ["ABB"]] ➞ "Corrupted game"
[["XOX"], ["XOO"], [undefined]] ➞ "Corrupted game"
[["XXX"], ["XOX"], [""]] ➞ "Corrupted game"
[["XXX"], ["XOX"], [1,2,3]] ➞ "Corrupted game"

Muhammad

@MuhammadJamaluddin

when I import sub-components into a parent component or any component within a test file to test it, I use the jsxextension in the import statement. That causes eslint to throw this error:
Unexpected use of file extension "jsx" for "./components/Reviews.jsx"eslint(import/extensions)

Why is that?

Jordan Harband

@ljharb

always omit extensions in the path

node looks those up for you.

Muhammad

@MuhammadJamaluddin

node? I'm using import not require

Jordan Harband

@ljharb

you're using babel

which converts it to require.

Muhammad

@MuhammadJamaluddin

I see. didn't know that, so node looks it up to know whether it's a js or a jsx file... right?

Jordan Harband

@ljharb

yes

Muhammad

@MuhammadJamaluddin

Thanks, Jordan ❤

OmarAlmaqtri

@OmarAlmaqtri

how to print web page with css in js ..

i want print page with Style and table

Muhammad

@MuhammadJamaluddin

I'm trying to map the reviews array, but I get 2 eslint warnings:

render() {
    const reviews = this.state.reviews.map((review, index) => (
      <div key={index} className="review">
      </div>
    ));
}

1- Must use destructuring state assignmenteslint(react/destructuring-assignment)
2- Do not use Array index in keyseslint(react/no-array-index-key

What's the suggested solution to fix these 2 warnings in this situation?

I tried assigning the key to an _id property , but I got this eslint warning:
Unexpected dangling '_' in '_id'.eslint(no-underscore-dangle)

Muhammad

@MuhammadJamaluddin

I fixed the second warning by including this rule: "no-underscore-dangle": ["error", { "allow": ["_id"] }], in my .eslintrc.js file as suggested by Jordan on this thread (airbnb/javascript#1408)

But I still don't know what to do about the first warning...

Muhammad

@MuhammadJamaluddin

Never mind :D... I also fixed the first warning by destructuring first:

render() {
    let { reviews } = this.state;
    reviews = reviews.map((review, index) => (
      <div key={index} className="review">
      </div>
    ));
}

I am not sure though about the reason behind the destructuring rule

Jordan Harband

@ljharb

const { reviews } = this.state, for one

but then also, don't reassign it.

i'm not sure what _id would be for tho

(unless you're using mongo, which you shouldn't be - but that override's the way to do it if so)

Muhammad

@MuhammadJamaluddin

If I won't reassign it what should I do?
I needed the new array returned from map here:
```
return (
    <div id="reviews">
      {reviews} <----------
    </div>
  );
```
Yes, i'm using mongoDB (which I shouldn't be?... not sure I get what you mean).

Jordan Harband

@ljharb

you should either make a new variable name, or inline the .map

and i mean you should use a real database, like mysql or similar.

Muhammad

@MuhammadJamaluddin

Gotcha. Thanks for explaining ❤.

Muhammad

@MuhammadJamaluddin

I have a like method in my Reviews component that just uses the event.target object & sends an AJAX request accordingly. I get this eslint error:
Expected 'this' to be used by class method 'like'.eslint(class-methods-use-this)
What's the suggested approach in this case?

jiaweri

@jiaweri

怎么翻墙呢

Muhammad

@MuhammadJamaluddin

Why this is considered an error & how would I add whitespaces in JSX otherwise:

<p>{review.reviewer_name} <time>{review.review_date}</time></p>

the eslint error I mean:
{review.reviewer_name} must be placed on a new lineeslint(react/jsx-one-expression-per-line)

1point7point4

@1point7point4

Consider doing it like so (if this does the same thing, I'm not exactly sure how HTML does its thing with whitespace:

<p>
  {review.reviewer_name}
  <time> {review.review_date}</time>
</p>

Where communities thrive

People

Repo info

Activity