代碼縮進(jìn)
- 4個(gè)空格
分號
- 除代碼塊外的語句末尾都加分號
不推薦
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
- 標(biāo)志型的體現(xiàn)標(biāo)志 isLoading / hasLoaded
- 全局變量命名語義化榔昔，盡量詳細(xì) 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之間空行
拖尾換行
- 文件末尾留一空行
在非空文件中，存在拖尾換行是一個(gè)常見的 UNIX 風(fēng)格稍途，它的好處是可以方便在串聯(lián)和追加文件時(shí)不會(huì)打斷 Shell 的提示魄宏。在日常的項(xiàng)目中缘揪，保留拖尾換行的好處是，可以減少版本控制時(shí)的代碼沖突。
空格
操作符空格
- 操作符前后都需要添加空格
不推薦
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 */
空格個(gè)數(shù)
- 除了縮進(jìn)，不要使用多個(gè)空格剧劝。
不推薦
const id = 1234;
推薦
const id = 1234;
無子元素組件閉合
- 使用單標(biāo)簽
不推薦
<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)
非公共模塊
不同模塊的組件文件橄登、樣式文件、圖片使用相同的目錄存儲(chǔ)
公共模塊
每個(gè)模塊使用自己獨(dú)立的組件目錄讥此、樣式目錄拢锹、圖片目錄（便于移植）
換行問題
- 一行代碼字符過多時(shí)酌情換行處理（不要出現(xiàn)橫向滾動(dòng)條？）
溫馨提示
- 短路操作符
&&||在特定情境下需要轉(zhuǎn)換為布爾值萄喳，否則可能會(huì)報(bào)錯(cuò)
{!!length && <View />}
- 條件語句內(nèi)合理使用隱式轉(zhuǎn)換
禁止 a == false / a == null / a == 0 / a == '' / a == undefined
