转载 webstrom识别 React语法
对于程序员而言：驼峰和下划线之间是一场宗派战争；大括号是否换行会成为一种党派；逗号写在行尾还是行首的人来自不同星球……
然而，无规矩不成方圆，任何一个团队，要想有高质量的产出，第一步必须要对一些基本的代码风格达成共识，否则用不了多长时间，你就会发现没人愿意维护某些代码了，因为那些代码散发出半年以上没冲过的马桶的味道，而更可怕的是团队成员之间的冲突和内耗会远超你的想象。
好了，言归正传，我们进入正题：
首选开发工具WebStorm
工欲善其事必先利其器，对于程序员而言，一款趁手的编辑器将像屠龙宝刀一样珍贵，许多程序员终其一生都在追寻更好的硬件、软件、工作流程等。作为前端团队，我们强烈推荐使用 WebStorm 。大体上，它长这样：
关于怎么下载，怎么安装，以及其他类似问题请自行Google。
新建项目
Talk is cheap. Show me the code. 好了，废话少说，我们赶紧上代码：
是的，我们的教程并不是手把手的，按上图操作后将弹出输入框，填入你所得到的git仓库地址，并按照个人喜好选择路径和命名后 WebStorm 将会自动拉取我们最新的项目代码。
初始设置
因为我们使用了最新最潮的ES6语法，并借助了React.js 来开发这个项目，所以我们需要进行一些小设置来保证 WebStorm 能够正常识别我们所写的代码。
按上图所示进入设置面板：
在 Languages & Frameworks > JavaScript 条目下开启JSX语法支持。
展开 JavaScript > Libraries ，勾选 ES6 语法支持。
我们使用ESlint来检查基本的语法错误，请继续展开 "JavaScript > Libraries > Code Quality Tools > ESLint" 菜单启用 ESLint。 ESLint 规则以 airbnb 为基础，考虑到中国国情以及团队习惯，我们进行了部分细节调整：
{
"extends": "airbnb",
"rules": {
"comma-dangle": [1, "never"], // 不对数组或对象末尾逗号做强制要求
"spaced-comment": [0, "always"], // 不对注释前的空格做强制要求
"func-names": 0 // 允许使用匿名函数
}
}其他完全沿用airbnb，详见 https://github.com/airbnb/javascript
代码风格设置
为了让编辑器产生的代码能够顺利通过ESLint的校验，我们在airbnb开源的基础上定制了自己的代码风格： 
在 "Editor > Code Style" 菜单中点击 "Manage..." 按钮；
在弹出来的对话框里选择 "Import..."
点击确定后会出现文件选择对话框，选择本项目根目录下的 .jscsrc 文件
建议命名为KM，以便和其他代码风格区分。 本代码风格总体依然沿用 airbnb，同样对部分细节做了调整：
{
"preset": "airbnb",
"excludeFiles": [
"dist/**", "node_modules/**", "webpack*", "styleguide.js"
],
"requirePaddingNewLinesBeforeLineComments": null, // 不强制注释前空行
"requireTrailingComma": null, // 不强制要求末尾逗号
"validateQuoteMarks": null, // 字符串单引号，React 属性双引号
"validateIndentation": {
"value": 2,
"allExcept": [
"comments" // 忽略注释中的缩进
]
},
"maximumLineLength": {
"value": 80, // 单行最长80个字符，注释除外
"allExcept": [
"comments", "urlComments", "functionSignature"
]
},
"requirePaddingNewLinesAfterBlocks": null,// 区块之间不强制空行
"disallowEmptyBlocks": {
"allExcept": "comments" // 不把注释当成空处理
}
}调整后规则的直观体现见 styleguide.html
快速启动
-
首先请确保你已经安装好了 node 和 npm，建议使用
iojs/2.5.0并配置国内源 -
进入工作目录新建分支
请尽量以本次需要开发的功能或解决的问题进行分支命名，我们提倡使用 GitHub Flow 进行分支管理。 -
点击编辑器底部的 'Terminal'面板，并输入
npm i && npm start后回车
当显示 webpack: bundle is now VALID.字样时表示已经正常启动
4.建议使用Chrome浏览器，访问 http://localhost:8000/ 即可。
5.修改JS文件，浏览器内容将自动发生变化（页面不会整体刷新）
目录结构
[./]
| -- .editorconfig #编辑器配置，声明缩进方式
| -- .eslintignore #ESLint忽略名单
| -- .eslintrc #ESLint配置
| -- .gitignore # Git忽略名单
| -- .jscsrc #JavaScript Code Style 配置
| -- README.md
| -- [css]
| | -- index.styl
| -- [dist] #打包后目录
| | -- daefde64ebc9619286d8.js
| | -- fb5456ea68c860c4a4c93c71b1142220.css
| | -- index.html
| -- [docs] #说明文档
| | -- [img]
| | -- styleguide.html
| -- [js]
| | -- app-router.js
| | -- [components] # 组件
| | | -- dashboard.js
| | | -- login.js
| | | -- main.js
| | -- index.js
| | -- [utils] # 各种辅助小工具
| | | -- ajax.js
| | | -- auth.js
| -- package.json
| -- server.js # 开发调试用
| --