参考网址:https://segmentfault.com/a/1190000003698071
安装 sublime text3 编译插件，他可以编译 ES6 也可以编译 JSX 的 (这个环节出现了很多 Bug) 实际上是有两个插件可以使用的，其实感觉上像是版本不同的一个东西
参考网址：https://www.cnblogs.com/imwtr/p/6010550.html#babel
Babel 插件
- 直接在 sublime 编辑器中输入快捷键
ctrl + shift + p，接着在弹出的输入域中输入Package Install之后回车，再在又弹窗的输入域中输入Babel直接回车就直接进行安装了
- 需要注意的是这个插件的使用方法是有些麻烦的
- 先在当前项目目录中新建一个
.babelrc编译的配置文件并输入下面的配置代码并保存
{"presets": ["es2015","react","stage-3"],"plugins": []}
- 之后在命令行中进入当前的项目目录中并安装配置文件中使用的三个包 ``` cd Desktop/ReactTest npm install —save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-3
> 5. 之后再在编辑器中进行编译操作，先将当前 `.es` 文件默认的打开方法修改为当前的 `babel` 这样代码便可以高亮显示了> 6. 需要注意的是如果你此时直接编译的话提示了如下图所示的错误> - 主要原因是 `Babel` 插件默认设置的命令路径与你本机的路径不一致，造成了找不到该命令的情况，所以需要修改默认的 `Babel` 设置将其更改为你安装的 `babel-cli` 包的目录路径，下图中是我已经做了修改之后的> 7. 之后便可以正常使用了，下面是使用方法- 方法一：在顶部菜单中找到编译命令并执行> - 方法二：`ctrl + shift + p` 输入 `Babel Transform` 回车即可自动编译> - 其实像上面这样配置了 .baelrc 文件也安装了依赖的包也可以直接在命令行中使用 `babel` 命令来编译文件了下面是示例代码（前提是你的全局安装了 `babel-cli`）> babel-cli 使用参考地址：[http://babeljs.io/docs/usage/cli/](http://babeljs.io/docs/usage/cli/)
//全局安装 babel-cli npm install babel-cli -g //编译 index2.js 并输出到自动新建的 index3.js 文件中 babel index2.js -o index3.js
#####babel-sublime 插件> [https://github.com/babel/babel-sublime/releases](https://github.com/babel/babel-sublime/releases) 编译插件下载网址1. 官网下载> 2. 下载完成之后解压> 3. 再将解压之后的文件夹直接复制到 sublime 编辑器的包管理文件夹中，之后再重启编辑器即可> 4. 编译插件的使用方法> 这个使用方法与第一个插件的一模一样<br />####配置 sublime-react 快捷生成 React 代码片段<br />github 网址:[https://github.com/facebookarchive/sublime-react#](https://github.com/facebookarchive/sublime-react#)1. 安装方法> 直接在 sublime 编辑器中输入快捷键 `ctrl + shift + p`，接着在弹出的输入域中输入 `Package Install` 之后回车，再在又弹窗的输入域中输入 `ReactJS` 直接回车就直接进行安装了<br />2. 使用方法：直接在页面中输入 `rcc` 之后按 `tab` 键即可> ####配置 Emmet 插件1. 安装方法> 直接在 sublime 编辑器中输入快捷键 `ctrl + shift + p`，接着在弹出的输入域中输入 `Package Install` 之后回车，再在又弹窗的输入域中输入 `Emmet` 直接回车就直接进行安装了2. 这里需要参照下面的网址自行配置一下> 参照网站：[http://blog.csdn.net/crper/article/details/52023838](http://blog.csdn.net/crper/article/details/52023838)- 在编辑器顶部菜单依次选择 - 首选项 - 快捷键设置 之后将下面的代码片段复制进 [] 中即可 记得要在 {} 前面加一个逗号；我的是 windows 系统，如果是 MAC 在顶部菜单依次选择的是 Preferences -> Package Settings -> Emmet ->key bindings – user> - 代码片段
{ “keys”: [“tab”], “command”: “expand_abbreviation_by_tab”,
// put comma-separated syntax selectors for which // you want to expandEmmet abbreviations into “operand” key // instead of SCOPE_SELECTOR. // Examples: source.js, text.html - source “context”: [ { “operand”: “source.js”, “operator”: “equal”, “match_all”: true, “key”: “selector” },
// run only if there's no selected text{"match_all": true,"key": "selection_empty"},// don't work if there are active tabstops{"operator": "equal","operand": false,"match_all": true,"key": "has_next_field"},// don't work if completion popup is visible and you// want to insert completion with Tab. If you want to// expand Emmet with Tab even if popup is visible --// remove this section{"operand": false,"operator": "equal","match_all": true,"key": "auto_complete_visible"},{"match_all": true,"key": "is_abbreviation"}
] }
3. 之后就可以自行的测试了，下面的操作依次是 rcc - tab div.xiaochuan{小船} - tab> ####配置 [JsFormat](https://github.com/jdc0589/JsFormat) 格式化 js 代码 (只对 .js 格式的文件有效)> jsformat 是 sublime 上 js 格式化比较好用的插件之一，通过修改它的e4x 属性可以使它支持 jsx。1. 安装> PC上`ctrl+shift+p`（Mac`Cmd+shift+p`）打开面板输入`JsFormat` 安装.2. 使用> 首先需要配置<br />Windows 依次选择：首选项 -> Package Setting -> JsFormat -> Setting Default<br />MAC 依次选择： preferences -> Package Settings -> JsFormat -> Setting - User<br />将下面的代码复制保存，之后即可保存时自动格式化，并支持 jsx 类型文件.
{ “e4x”: true, // jsformat options “format_on_save”: true, }
> 3. 测试效果图，这里是从别的地方复制过来的代码片段，下面的操作依次是 ctrl + v -> ctrl + s，之后便会自动的进行格式化了
switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: n 与 case 1 和 case 2 不同时执行的代码 }
> #### 配置 [sublimeLinter-jsxhint](https://github.com/SublimeLinter/SublimeLinter-jsxhint) 插件> 常用于编写默认react语法的JSX 代码审查，实时提示语法错误, 帮助快速定位错误点<br />####在全局 Node 环境下装包并进行使用1. 安装> 首先在电脑上安装 [NodeJS ](https://nodejs.org/dist/v8.9.4/node-v8.9.4-x64.msi)<br />再在命令行中使用 `npm` 命令全局安装 `jsxhint`
npm install -g jsxhint
2. 按照上面的步骤全局安装之后就可以在命令行中通过编译命令来审查代码了- index.jsx 源码
var React = require(‘react’);
var index = React.createClass({
render: function() {return (<div className="xiaochuan">小船</div>);}
});
module.exports = index;
- 命令行中执行命令
//先进入项目目录中 cd Desktop\ReactTest\ //审查 .jsx 文件 jsxhint index.jsx
- 编译时命令行会有下面的提示语，我觉得这个是版本的问题，暂时没有找到解决方法> - 下面是命令行中完整的提示，后两句是对使用的引入方法的报错，因为其并没有识别出来> 3. 接下来故意将 index.jsx 文件中的源码改成错误的并保存> - 之后再在命令行中进行编译
jsxhint index.jsx
- 命令行中非常清晰的提示到了是哪一行出现了错误> ####为了更好的去检查 jsx 文件，安装 `eslint`> eslint 可以支持js、jsx、es6(es2015)等代码的检测> github 网址：[https://github.com/roadhump/SublimeLinter-eslint](https://github.com/roadhump/SublimeLinter-eslint)<br />使用教程参考网址：[https://www.jianshu.com/p/e826e13c67ec](https://www.jianshu.com/p/e826e13c67ec)<br />#####使用方法1. 先使用 Node 在命令行中全局安装包
npm install -g eslint
2. 在命令行中进入项目目录下，设置一个配置文件
//进入项目目录下 cd Desktop/ReactTest //初始化生成一个配置文件 //需要注意的是：如果项目根目录下没有 package.json 文件，它会提示你先使用 npm init 来初始化一个 package.json 文件 eslint —init
```
eslint --init会提示你选择使用的代码样式
- 你可以根据需求进行选择，这里我的选择如下：
- 之后会在项目中自动生成一个
.eslintrc.js配置文件
之后集成 Sublime Text3 中
- 需要配置两个插件
- sublimeLinter
- SublimeLinter-contrib-eslint
- 在 Sublime Text3 编辑器中进行插件的安装
PC上
ctrl+shift+p（MacCmd+shift+p）打开面板输入sublimeLinter安装
PC上ctrl+shift+p（MacCmd+shift+p）打开面板输入SublimeLinter-contrib-eslint安装
- 下图中的操作依次是：视图 -> 显示/隐藏控制台 下面的控制台会将出现的错误输出出来
若有收获，就点个赞吧
0 人点赞
