airbnb/javascript

JavaScript Style Guide

superchow

@superchow

Ghost

@ghost~57cbaf6040f3a6eec0634f49

Heya, is there any spreadsheet inline editor using angular js which gives an option to copy and paste the whole row or column. There are many others which gives all the features except copy and pasting data in bulk. I have gone through UI-Grid but this feature is not present there. Anyone worked on such stuff????

Gopal Singh

@gopalsingh

how can we resolve CORB Issue in Chrome ??

Bojan Dimitrovski

@bdimitrovski

hi all! would anyone know how background (or background-image) can be transitioned "painlessly" for FF, IE and the likes? it seems ages passed since webkit browsers started supporting this, but still no sign of native support for gecko and the .. ehrm others with the I word :D

Muhammad

@MuhammadJamaluddin

This is my first time using a style guide in my workflow. I was wondering what is the best way to incorporate Airbnb's style guide within my workflow? should I just refer back to the documentation & read the corresponding section or is there a tool/a configuration file that could help (please elaborate & give details)... Thanks in advance.

Jordan Harband

@ljharb

@muhammadjamaluddin add eslint to CI, and prevent merges unless it passes

Muhammad

@MuhammadJamaluddin

I don't get any eslint errors/warnings when I use function declarations or even mix them with function expressions, any idea why?

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).

Where communities thrive

People

Repo info

Activity