Vscode-docs: Advice / Best Practices request: React / JSX / eslint setup

[egamma]

_From @MrSkinny on July 22, 2016 18:12_

• VSCode Version: 1.3.1
• OS Version: 10.11.5

I really like VSC and it's interesting when you start a Typescript project how everything seems to light up in terms of linter/debugging without any config.

But using ES6, JSX, etc. I'm having a really hard time getting the editor to cooperate. Would love to see a Best Practice guide here for what is a common great setup for a React JSX project (not exactly an 'under-the-radar' tech).

I tried the popular ESLint extension and out of the box it's popping up annoying "React is defined but never used" because JSX calls React.createElement but that's obviously not present in the file. Even if this is an ESLint problem, I'd love to hear the VSC community's solutions for this.

Sorry if Github Issues ain't the right place for this, but Idea Board only suggests here for discussions.

_Copied from original issue: Microsoft/vscode#9633_

[egamma]

@MrSkinny we have some documentation on this:
https://code.visualstudio.com/docs/languages/javascript

https://code.visualstudio.com/docs/languages/javascript#_javascript-linters-eslint-jshint
https://code.visualstudio.com/docs/languages/javascript#_jsx-and-react-native

Does this cover your needs? If not what is missing?

[egamma]

_From @vanflymen on July 28, 2016 18:48_

@egamma, the javascript documentation is convoluted and (in parts) vague for someone starting out. It may be better to have a separate section/page for React that explicitly explains how to set up VSCode for a React project.

For example, could you please clarify what this means:

If your project has a jsconfig.json file, then make sure that typings is contained in the project context defined by the location of the jsconfig.json file. If you have no jsconfig.json, then you need to manually add a /// reference to the .d.ts from each JavaScript file.

[egamma]

Thanks for the feedback, moving the issue over to vscode-docs.

[egamma]

@vanflymen Regarding your question.

There are two different project kinds supported and the way you reference the .d.ts file depends on the project kind. We should clarify this in the docs (@gregvanl). The two project kinds are described here https://code.visualstudio.com/docs/languages/javascript#_javascript-projects-jsconfigjson.

If you have a jsconfig.json then all you need to make sure is that the .d.ts is contained in the folder of the jsconfig.json or a subfolder (this is the project context defined by the location of the jsconfig.json).

app.js
jsconfig.json
typings/
    some.d.ts

If you have no jsconfig.json then you need to refer in each .js file to the .d.ts file

inside app.js you have a comment like this:

/// <reference path="typings/some.d.ts" />

My recommendation is to use a jsconfig.json file.

[gregvanl]

@waderyan Wade is interested in this topic.

[gregvanl]

Reassigning to Wade per our website planning discussion this morning. Fits with his JavaScript doc work.

[sivid]

As someone relatively new to the javascript ecosystem, I've spent quite some time trying to setup vscode and eslint and react together, perhaps adding a link to
https://github.com/yannickcr/eslint-plugin-react
in here
https://code.visualstudio.com/docs/languages/javascript#_linters
would be beneficial.
Specifically, put this in a .eslintrc.json:
{"extends": ["eslint:recommended", "plugin:react/recommended"]}
or equivalently in a .eslintrc.yml:

extends: 
  - "eslint:recommended"
  - "plugin:react/recommended"

[chrisdias]

our jsx documentation is pretty out of date:

https://code.visualstudio.com/docs/languages/javascript#_common-questions

• it references the typings tool where we use @types/react now
• you need a jsconfig.json for javascript react to work, but there are no docs on what should go into jsconfig.json

[abumalick]

This one has nice configurations for react:
https://github.com/skolmer/react-hot-boilerplate-vscode
I usually use bnb eslint config
https://github.com/airbnb/javascript

This seems interesting too but I didn't give it a try yet:
https://github.com/feross/standard

[abumalick]

By the way, keep up the good work, vscode seems really promising.

[gregvanl]

See new React tutorial https://code.visualstudio.com/docs/nodejs/reactjs-tutorial