美文网首页ESlint前端杂货铺
Sublime text3 jsx支持(react 语法检查)

Sublime text3 jsx支持(react 语法检查)

作者: lyzaijs | 来源:发表于2016-03-28 14:10 被阅读3653次

    对这篇博文 Lint Like It’s 2015 进行压缩。

    原由:sublime text3 配置jsxhint不成功,然后在SublimeLinter-jsxhint找到

    Use ESLint and SublimeLinter-ESLint instead, which gives better errors and has fewer problems with ES6.
    JSXHint has been deprecated.

    已经是不推荐使用 SublimeLinter-jsxhint,而是改成了 ESLint。

    1. Installing eslint and babel-eslint
      home目录(windows下即为:c:\usrs\用户名 )下新建 .eslintrc(如果是windows可以用 Cygwin 建立) ,这是eslint的配置文件,并添加以下内容:
    {
      // I want to use babel-eslint for parsing!
      "parser": "babel-eslint",
      "env": {
        // I write for browser
        "browser": true,
        // in CommonJS
        "node": true
      },
      // To give you an idea how to override rule options:
      "rules": {
        "quotes": [2, "single"],
        "eol-last": [0],
        "no-mixed-requires": [0],
        "no-underscore-dangle": [0]
      }
    }
    

    在终端(terminal或是 cmd ,前提安装了node.js)中进行安装:

    npm uninstall -g eslint #安装前把以前的eslint删除
    npm install -g eslint@latest
    npm install -g babel-eslint@latest
    

    耐心等待完成,然后进行验证是否安装成功:

    eslint -v
    

    显示版本则为安装成功。

    2.配置sublime text3

    • 安装插件 SublimeLinter(eslint的依赖插件)
    • 安装插件 SublimeLinter-contrib-eslint(这里建议把SublimeLinter-jshint 与 **SublimeLinter-jsxhint ** 删除)
    • 安装插件 babel-sublime,并设置打开默认为 “JavaScript (Babel)” , 这里 contrib-eslint 会进行识别
    • syntax_map,即 SublimeLinter Settings — User(如果没有这个文件,可以将defalut下的配置复制到user中)如下:
    Paste_Image.png
    • eslint-plugin-react,这个插件可以例ESLint识别 React JSX,在先前的 .eslintrc中添加
    "plugins":[
    "react"
    ]
    
    • (可选)**Choose Lint Mode **command
    Paste_Image.png

    最终效果: oceanic-next-theme

    Paste_Image.png

    如果配置完成但是提示,无法加载 eslint ,请配置 set default,设置它的path.

    相关文章

      网友评论

      • 554a6d69097a:你好,请问下为什么按上面配置走了 一点反应都没哟丶
      • 64bf53cdf279:感谢作者, :+1: 这是我看过最全最细致的配置文章,步骤很清楚而且详细,按着来就可以搞定配置。之前搜索的文章又是那个插件又是这个插件的,安装了一通,还是无法显示出效果。
      • Amok校长:eslint-plugin-react,这个插件可以例ESLint识别 React JSX,在先前的 .eslintrc中添加
        "plugins":[
        "react"
        ]

        不太懂.eslintrc在哪
        64bf53cdf279:@kirs 这个.eslintrc是要你自己在项目中写的,在这个里面配置一些规则,然后eslint配合sublime的插件就可以对代码进行检查了,从而对你代码一则不规范的地方给出提示。一般那些规范优秀的开源项目,在它的根目录或者其他目录都有这个.eslintrc文件,里面就是作者定义的一些代码规范。
      • b27097fcf707:.eslintrc文件在windows中可以用cmd生成,执行下面命令
        echo {} > .eslintrc
        lyzaijs:@饕餮小白 谢谢补充!!学习了 :+1:

      本文标题:Sublime text3 jsx支持(react 语法检查)

      本文链接:https://www.haomeiwen.com/subject/avujlttx.html