React 脚手架推荐

代码错误和风格检查

2017-05-27 21.53.35.gif

上图是使用了 eslint , eslint-plugin-reacteslint-plugin-jsx-a11y 插件实现的效果,示例中出现4个提示:

  1. moment 这个库没有安装,提示用 npm i -S moment 进行安装
  2. 引入了 moment 这个库,但是从来没有使用过
  3. 提示 import moment from ‘moment’ 末尾要加 ‘;’
  4. 提示 import moment from ‘moment’ 下面要空一行

代码格式化

2017-05-27 21.55.43.gif

上图使用了Esformatter插件实现的效果,.esformatter.json 配置如下

{
  "extensions":
    [
      "js",
      "jsx",
      "sublime-settings"
    ],
  "options": {
    "plugins": [
      "esformatter-jsx",
      "airbnb"
    ],
    "jsx": {
      "formatJSX": true,
      // change these to your preferred values
      // refer to https://github.com/royriojas/esformatter-jsx#best-configuration for more options
      "attrsOnSameLineAsTag": false,
      "maxAttrsOnTag": 1,
      "firstAttributeOnSameLine": false,
      "alignWithFirstAttribute": true
    }
    // other esformatter options
  }
}

代码片段

2017-05-27 22.07.27.gif

使用编辑器可以自定义一些自己常用的代码片段。教程: 在 sublime text 3 添加代码片段

代码编辑器

推荐使用 sublime Text 3编辑器,以下是我的sublime 自定义配置,其中 失去焦点 自动保存,文件末尾自定添加一行等都是比较实用的配置。

{
    "auto_find_in_selection": true,
    "bold_folder_labels": true,
    "color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",
    "default_line_ending": "unix",
    "draw_minimap_border": true,
    "ensure_newline_at_eof_on_save": true,
    "fade_fold_buttons": false,
    "folder_exclude_patterns":
    [
        ".svn",
        ".git",
        ".hg",
        "CVS"
    ],
    "font_size": 15,
    "highlight_line": true,
    "highlight_modified_tabs": true,
    "ignored_packages":
    [
        "Vintage"
    ],
    "save_on_focus_lost": true,
    "tab_size": 2,
    "theme": "Material-Theme-Darker.sublime-theme",
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": true,
    "word_wrap": "true"
}

预先善其事,必先利其器。代码敲起来才更有感觉。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,256评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,539评论 25 709
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    xiaotao123阅读 9,534评论 0 27
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 46,999评论 6 342
  • 那个曾经有一点点动心的男孩 夜色里陪他找到单车 听到锁咔嚓清脆的响声 我竟很干脆地说了声再见 心动真是霎那间的事情...
    思考喵生的大饼阅读 136评论 0 0