Visual Studio Code or Atom extensions

This might sound like a newbie question, but I’m usually working in CodePen, and I’d really like to be able to work offline in Visual Studio Code or Atom. I am curious what extensions I would need to get started writing React.js, D3.js and using ES2015 syntax, or is it ready to go out of the box? Or should I go download React.js and D3.js from the web-sites??

Thank you in advance :slight_smile:

It’s not so much about the code editor or its extensions.

For React and D3, these are libraries that you need to either reference or import into your code base. This will work with any code editor.

The simplest route may be to add the following lines into your index.html file.

<!-- React --> 
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<!-- D3 -->
<script src="https://d3js.org/d3.v4.min.js"></script>

For React, Visual Studio Code supports the JSX syntax out-of-the-box, Atom may require an extension (aka “Package” in Atom-speak) called, “react” https://atom.io/packages/react

For ES2015, if you are targeting current browsers and don’t care about supporting older browser versions, you can use ES2015 out-of-the-box. If you care about older browsers, you’ll need to use a transpiler like Babel https://babeljs.io

See the docs on the Babel site for usage instructions.

2 Likes

Thank you so much! Your answer is really helpful…I will be implementing this soon into my projects :slight_smile: Thanks again.

2 Likes