代码错误和风格检查

2017-05-27 21.53.35.gif
上图是使用了 eslint , eslint-plugin-react 和 eslint-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"
}

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