如何将es6语法添加到atom编辑器中

时间:2016-08-11 14:01:15

标签: javascript ecmascript-6 atom-editor

我使用的是sublime文本,但现在想使用atom.io编辑器。我有这些代码:

// 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>

虽然这段代码运行正常。我在atom.io编辑器中收到这些错误。我添加了.jshintrc文件,其中包含以下行:

{
    "esnext": true
}

语法也设置为:Babel E6 Javascript

但即便如此也无济于事。如何删除这些错误?

3 个答案:

答案 0 :(得分:4)

在根目录中,添加一个新文件:

.jshintrc

添加以下代码并保存:

{
"esversion": 6;
}

答案 1 :(得分:3)

  1. 在终端中运行npm install language-babel
  2. 重启Atom(如果正在运行)
  3. 从编辑语法列表中选择babel(左下角) 在栏上编辑你应该看到当前的语法语法 使用,点击它并将其改为babel)

答案 2 :(得分:2)

以下是如何使用Atom安装ESLint并将其配置为具有ES6语法:

  1. 如果您还没有安装Atom Linter
  2. 安装linter-eslint
  3. 在项目目录中,在本地安装eslint:npm install eslint
  4. 再次在项目目录中,创建一个eslint配置文件(将其命名为.eslintrc
  5. 以下是eslint website中的.eslintrc示例 - 如果您想使用Airbnb风格指南,请参阅下文:

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

    或者,您可以使用Airbnb ES6 styleguide

    1. 通过npm:npm install eslint-config-airbnb安装。
    2. 将其放入.eslintrc
    3. {
        "extends": "airbnb"
      }