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

对这篇博文 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.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ESLint 配置 ESlint 被设计为完全可配置的,这意味着你可以关闭每一个规则而只运行基本语法验证,或混合和...
    静默虚空阅读 41,746评论 3 14
  • 作为一个秒开的编辑器,用了就不想换呀,插件库也很强大,稍作配置就可以用了 本体 Sublime免费的,只是偶尔弹窗...
    玖零儛阅读 9,526评论 5 1
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    追風逸少丶阅读 13,875评论 1 34
  • 前言 第一次运行 Vue 项目时被浏览器中满屏的 ESLint 报错给吓到了,果断禁用了该功能! 再之后找了个时间...
    AlessiaLi阅读 12,501评论 0 4
  • ESLint简介 ESLint是一款代码规格检查工具,能够有效的保证团队的代码质量,避免低级代码。 ESlint特...
    Bilif阅读 7,941评论 0 3