代碼錯誤和風(fēng)格檢查
2017-05-27 21.53.35.gif
上圖是使用了 eslint , eslint-plugin-react 和 eslint-plugin-jsx-a11y 插件實現(xiàn)的效果讼载，示例中出現(xiàn)4個提示:
- moment 這個庫沒有安裝齐遵，提示用 npm i -S moment 進(jìn)行安裝
- 引入了 moment 這個庫歌粥，但是從來沒有使用過
- 提示 import moment from ‘moment’ 末尾要加 ‘;’
- 提示 import moment from ‘moment’ 下面要空一行
代碼格式化
2017-05-27 21.55.43.gif
上圖使用了Esformatter插件實現(xiàn)的效果陨溅，.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"
}
預(yù)先善其事愚铡，必先利其器蛉签。代碼敲起來才更有感覺胡陪。
