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?

回答1:

In your root directory, add a new file:

.jshintrc

Add the following code and save:

{
"esversion": 6;
}

回答2:

Run npm install language-babel in the terminal.
Restart Atom (if it's running)
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)

回答3:

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

Install Atom Linter if you haven't already.
Install linter-eslint.
In your project directory, install eslint locally: npm install eslint
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.

Install it via npm: npm install eslint-config-airbnb.
Put this in your .eslintrc

{
  "extends": "airbnb"
}

来源：https://stackoverflow.com/questions/38898538/how-to-add-the-es6-syntax-to-atom-editor

标签

javascript

ecmascript-6

atom-editor