Recently I began sailing in the React JS waters using my favorite editor Atom and immediately started writing down my list of "must have" packages to work with React ecosystem, e.g., es6, HTML, jsx, babel, and others.
As a simple rule of thumb for choosing an Atom package from the many available in the community, you might look at the number of downloads; the popularity often means an excellent quality package.
Let's begin with our package tour!.
The package also provides
automatic indentation of JSX.
- JSX tag closure and JSX HTML element completion suggestions.
- Context-aware commenting out of JSX elements.
- Additional newline insertion between JSX tag pairs.
- Babel transpilation on file saves (optional).
- Babel transpile of all files in a directory or directories.
- Babel transpiled code preview.
- Support for styled-components CSS inside tagged template strings including auto-completion.
- Support for GraphQL code highlighting
- Support for adding other language grammars to highlight code inside template literal strings.
As usual, when coding using React as our front-end framework, we're writing ES6 code, which is not strongly typed nor compiled ahead, so it's easy to introduce syntax errors that are not evident until execution time, to solve these problems, eslint is a must have tool, checking the most common types of errors as you write.
Autocomplete for require/import statements. It makes easier the process of adding new modules from the directory tree.
The only drawback is not being linter complaint.
autoclose-html is a simple package that does a single task, closing tags in HTML markup. However, as simple as it sounds it's something missing in a plain Atom installation and makes your life easier when writing web content.
Thank you for reading these recommendations and enjoy coding!. See you next time.