react语法在sublime下高亮

最新推荐文章于 2024-08-24 10:16:31 发布

原创最新推荐文章于 2024-08-24 10:16:31 发布 · 5.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react #高亮 #插件

其他专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Sublime Text 3中安装和设置插件，如babel-react、sublime-react-es6等，以实现React JSX语法的高亮显示。文章提到了在安装插件后，需要将.js和.jsx文件的默认语法设置为babel，并且在引用jsx文件时指定type=text/babel。此外，还强调了在JSX语法中使用`<script>`标签的注意事项，以及React开发中`react`, `react-dom`和`babel-preset-react`库的重要性。" 133330863,19673395,编程实现Kerberos身份验证事件ID生成,"['网络安全', '身份验证协议', '编程实践']

首先安装插件：babel-react（具体的可以查看github离线安装babel-sublime），sublime-rect-es6，jsfmt，jsxhint，emmet，jsformat sublime-react（里此案代码提示插件可以离线安装，对应的github sublime-react）；

居体的设置方法可以参照这篇好文：Sublime Text3关于react的插件——react语法提示&代码格式化；

或者参考这个：Sublime Text 3 搭建 React.js 开发环境；

当安装完以上的插件后，你会发现其实react在这个编辑器下，还是不会高亮，这个时候你只需要进行一下设置就可以了：

打开.js, .jsx 后缀的文件;
打开菜单view， Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel)，选择babel为默认 javascript 打开syntax；
注意，一般在编写react代码的时候，引用jsx文件的时候，type = text/babel，而不是text/jsx；不建议直接写jsx语法在html文件中

在练习的时候，一般采用直接引用文件的方式搭建react应用的开发环境，

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

上面代码有两个地方需要注意。首先，最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。

其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。