欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

sublime 搭建React.js开发环境

程序员文章站 2022-07-05 16:03:21
...

sublime 搭建React.js开发环境

1. babel

该插件支持ES6, React.js, jsx代码高亮,对 JavaScript, jQuery 也有很好的扩展
下载:
sublime 搭建React.js开发环境
输入 install 选择点击
sublime 搭建React.js开发环境
输入 babel 选择babel 点击等待其下载完毕
sublime 搭建React.js开发环境
sublime 搭建React.js开发环境
安装完毕之后,打开打开.js, .jsx 后缀的文件;
sublime 搭建React.js开发环境

打开菜单view, Syntax -> Open all with current extension as… -> Babel -> JavaScript (Babel),选择babel为默认 javascript 打开syntax
之后,代码就成功显示为
sublime 搭建React.js开发环境

2. 代码检查

1.首先安装SublimeLinter、SublimeLinter-jshint、SublimeLinter-jsxhint、SublimeLinter-contrib-eslint插件。
安装:
1. 这些插件是基于sublimeLinter,所以要先安装sublimeLinter,再安装SublimeLinter-jshint、SublimeLinter-jsxhint、SublimeLinter-contrib-eslint.(具体安装步骤如上)
2. 在sublime中安装完上面两个插件之后,还需要在node.js中安装如下包才能生效

npm install -g eslint
npm install -g babel-eslint
npm install -g eslint-plugin-react
npm install -g jsxhint
  1. 以检查ES6代码为例。在项目工程根目录新建.eslintrc,输入
{
"parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
},
"rules": {
    "semi": ["error", "always"]
    }
}

具体的eslint详细配置请参考:eslint配置

4.打开Sublime3,菜单->Tools->SublimeLinter->Toggle Linter…就可以打开js、jsx、es6检查规则。注意:当使用es6开发时务必把jshint关掉,否则报一堆警告错误。
sublime 搭建React.js开发环境
点击图上任意选项,可关闭/开启

3. 修改Emmet兼容jsx文件

emmet 作为前端开发必备插件之一非常方便快捷,默认情况下使用快捷键ctrl+e可以自动扩展成适应于react className形式。而使用tab来默认拓展则需要通过修改sublime快捷键,如下所示:
sublime 搭建React.js开发环境
1. 安装emmet插件
2. 打开Preferences>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"
    }
  ]
},

4. Jsformat

jsformat 是 sublime 上 js 格式化比较好用的插件之一,通过修改它的e4x 属性可以使它支持 jsx。
1. 安装jsformat插件
2. 打开preferences -> Package Settings -> JsFormat -> Setting - Users
将下列代码复制到里面

{
  "e4x": true,
  // jsformat options
  "format_on_save": true,
}
好了。基本配置差不多了,接下来可以愉快地撸react代码了
相关标签: sublime react