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

How to add the es6 syntax to atom editor

本文关键字:atom 编辑器 添加 语法 es6      更新时间:2023-09-26

我使用崇高的文本,但现在想使用原子。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>

虽然这段代码运行良好。我在原子中得到了这些错误。io编辑器。我已经添加了.jshintrc文件,有以下几行:

{
    "esnext": true
}

语法设置为:Babel E6 Javascript

但即使这样也没有帮助。如何消除这些错误?

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

.jshintrc

添加以下代码并保存:

{
   "esversion": 6
}

你可以在ctrl+中找到设置,打开设置并进入packages =>linter-jshint(或类似的东西),并找到指向.jshintrc文件的指针。如果您的项目结构中的文件不同,您可以在这里更改。

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

下面是如何使用Atom安装ESLint并将其配置为ES6语法的方法:

  1. 安装Atom Linter
  2. 安装linter-eslint。
  3. 在你的项目目录中,安装eslint: npm install eslint 在你的项目目录中,创建一个eslint配置文件(命名为.eslintrc)

下面是eslint网站上的一个.eslintrc示例,如果你想使用Airbnb的样式指南,请参阅下面的示例:

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

或者,你可以使用Airbnb ES6样式指南。

  1. 通过npm: npm install eslint-config-airbnb安装把这个放到你的.eslintrc
<>之前{"扩展":"airbnb"}