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

Question

我使用 sublime text，但现在想使用 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

但即使这样也无济于事。如何消除这些错误？

Answer 1

在你的根目录中，添加一个新文件：

.jshintrc

添加以下代码并保存：

{
   "esversion": 6
}

您可以使用 ctrl+, 打开设置并转到packages => linter-jshint（或类似的东西）找到​​设置指向.jshintrc 文件的指针。如果您的项目结构中的文件不同，您可以在此处进行更改。

Answer 2

1. 在终端中运行npm install language-babel。
2. 重新启动 Atom（如果它正在运行）
3. 从编辑器语法列表中选择 babel（左下角） 栏上的编辑器，您应该看到当前的语法语法 用过，点一下，改成babel）

Answer 3

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

1. 如果您还没有安装Atom Linter。
2. 安装linter-eslint。
3. 在你的项目目录下，本地安装eslint：npm install eslint
4. 再次在您的项目目录中，创建一个 eslint 配置文件（命名为 .eslintrc）

这是来自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

{ “扩展”：“airbnb” }