CODEWITHSUNDEEP
javascriptecmascript-6atom-editor
Kakar
Kakar

Reputation: 5599

How to add the es6 syntax to atom editor

I was using sublime text, but now would like to use the atom.io editor. I have these lines of code:

// error: Missing semicolon.
import React, { Component } from 'react'

export default class RegisterName extends Component {
    constructor(props) {

        // error: Missing semicolon.
        super(props)
        this.state = {
            firstName: '',
            lastName: '',
            displayError: false,
            error: 'Please provide a valid name'

        //error: Missing semicolon.
        }
    }


    // error: Class property must be methods. Expected '(' but saw instead '='....
    next = () => {
        console.log('next')
        console.log(this.state.firstName, this.state.lastName)
    }

    render() {
        return(
            <View style={styles.container}>
                <View>
                    <TouchableOpacity style={styles.logoContainer}>
                        <Icon name="md-analytics" size={60} color="#2ec76e" />

                    // error: Unclosed regular expression
                    </TouchableOpacity>

Although this code is working fine. I'm getting these errors in atom.io editor. I have added the .jshintrc file, with these lines:

{
    "esnext": true
}

Also the grammar is set to: Babel E6 Javascript

But even this is not helping. How do I remove these errors?

Upvotes: 4

Views: 9441

Answers (3)

sharedev
sharedev

Reputation: 419

In your root directory, add a new file:

.jshintrc

Add the following code and save:

{
   "esversion": 6
}

You can find the settings in using ctrl+, to open the settings and go to packages => linter-jshint (or something like that) and find the pointer to the .jshintrc file. If the file in your project structure differs, you can change that here.

Upvotes: 5

Arian
Arian

Reputation: 7719

  1. Run npm install language-babel in the terminal.
  2. Restart Atom (if it's running)
  3. Choose babel from the list of Editor Grammars (bottom-left side of the editor on the bar you should see the current syntax grammar being used, click on it and change it to babel)

Upvotes: 3

nathanhleung
nathanhleung

Reputation: 516

Here's how you can install ESLint with Atom and configure it to have ES6 syntax:

  1. Install Atom Linter if you haven't already.
  2. Install linter-eslint.
  3. In your project directory, install eslint locally: npm install eslint
  4. Again in your project directory, create an eslint config file (name it .eslintrc)

Here's an example .eslintrc from the eslint website—see below if you want to use the Airbnb styleguide:

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": 2
    }
}

Alternatively, you could use the Airbnb ES6 styleguide.

  1. Install it via npm: npm install eslint-config-airbnb.
  2. Put this in your .eslintrc
{
  "extends": "airbnb"
}

Upvotes: 1

Related Questions