airbnb/javascript

JavaScript Style Guide

Muhammad

@MuhammadJamaluddin

& 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>

Seems to work on chrome

Manuk

@ManukMinasyan

Hello dear developers,
When entering for the first time IE 11 loaded the site correctly you can see it in the first picture.
After refreshing the page we see that the page is not being loaded(see the second picture).
If you can help me, I will be grateful.
Thanks.

Images`

Where communities thrive

People

Repo info

Activity