代碼縮進
- 4個空格
分號
- 除代碼塊外的語句末尾都加分號
不推薦
let baz = { a: 1 }
function foo() { return true };
if (foo) { bar = 0 };
推薦
let baz = { a: 1 };
function foo() { return true; }
if (foo) { bar = 0; }
命名
變量名/屬性名
- 駝峰式 name / firstName / lastName
- 標志型的體現(xiàn)標志 isLoading / hasLoaded
- 全局變量命名語義化，盡量詳細 globalCityName
函數(shù)名/方法名
- 駝峰式 goIndex
- 體現(xiàn)功能 getValue / setValue / sortResult
樣式名
- 下劃線 mod_info
- 體現(xiàn)層級關(guān)系 city / city_name
組件名/類名
- 首字母大寫 Order
- 駝峰式 OrderList / OrderDetail
文件名
- 中劃線 order.js / order-list.js / order-detail.js
- 體現(xiàn)功能 order-reducer.js / order-action.js
空行
代碼塊之間空行
- 方法與方法之間空行
- import與class之間空行
拖尾換行
- 文件末尾留一空行
在非空文件中，存在拖尾換行是一個常見的 UNIX 風格，它的好處是可以方便在串聯(lián)和追加文件時不會打斷 Shell 的提示。在日常的項目中，保留拖尾換行的好處是，可以減少版本控制時的代碼沖突。
空格
操作符空格
- 操作符前后都需要添加空格
不推薦
let sum=1+2
推薦
let sum = 1 + 2
關(guān)鍵字空格
- 關(guān)鍵字后面加空格
不推薦
if(condition) { ... }
推薦
if (condition) { ... }
行末空格
- 行末不留空格
不推薦
let a = 1;
推薦
let a = 1;
函數(shù)命名/調(diào)用空格
- 函數(shù)聲明與調(diào)用相同：參數(shù)左小括號前不加空格，右小括號后加空格
不推薦
function func () {
// do something
}
func ()
推薦
function func() {
// do something
}
func()
逗號，冒號，分號空格
- 后面使用空格，前面不加空格
注意行末不留空格
不推薦
[1,2,3]
let baz = { a:1 }
for (let a = 1;a <= 10;a++) { }
推薦
[1, 2, 3]
let baz = { a: 1 }
for (let a = 1; a <= 10; a++) { }
單行代碼塊空格
- 在單行代碼塊中使用空格，左花括號后與右花括號前空格
不推薦
function foo() {return true;}
if (foo) {bar = 0}
推薦
function foo() { return true; }
if (foo) { bar = 0 }
圓括號空格
- 圓括號間不留空格
不推薦
getName( name );
推薦
getName(name);
注釋首尾空格
- 注釋首尾留空格
不推薦
//comment
/*comment*/
推薦
// comment
/* comment */
空格個數(shù)
- 除了縮進，不要使用多個空格。
不推薦
const id = 1234;
推薦
const id = 1234;
無子元素組件閉合
- 使用單標簽
不推薦
<View></View>
推薦
<View />
字符串
- 單引號
- 拼接變量統(tǒng)一ES6模板字符串
順序
函數(shù)內(nèi)代碼區(qū)域排序
- const/let/var
- 代碼塊內(nèi)變量需提前聲明
模塊js文件代碼區(qū)域排序
- import
- const/let/global
- Class
- export
React生命周期方法與其他方法順序問題
constructor() { }
componentWillMount() { }
render() { }
componentDidMount() { }
componentWillReceiveProps() { }
shouldComponentUpdate() { }
componentWillUpdate() { }
componentDidUpdate() { }
componentWillUnmount() { }
// 其他方法...
目錄結(jié)構(gòu)
非公共模塊
不同模塊的組件文件、樣式文件、圖片使用相同的目錄存儲
公共模塊
每個模塊使用自己獨立的組件目錄、樣式目錄、圖片目錄（便于移植）
換行問題
- 一行代碼字符過多時酌情換行處理（不要出現(xiàn)橫向滾動條？）
溫馨提示
- 短路操作符
&&||在特定情境下需要轉(zhuǎn)換為布爾值，否則可能會報錯
{!!length && <View />}
- 條件語句內(nèi)合理使用隱式轉(zhuǎn)換
禁止 a == false / a == null / a == 0 / a == '' / a == undefined
