前端規範

以期提升代碼的可讀性和可維護性，要求前端代碼規範，利用vscode編輯器和eslint代碼檢查工具能夠輔助咱們編寫符合規範的前端代碼，在保存代碼時按照eslint配置自動格式化後保存代碼

eslint + vscode

1. 安裝 ESLint 擴展
2. 配置vscode設置(用戶設置 工做區設置 文件夾設置)如下只列出了 用戶設置， 如針對工做區和文件夾有特殊需求能夠再自行設置

{
  "workbench.startupEditor": "newUntitledFile",
  "search.followSymlinks": false,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.fontSize": 18,
  "window.zoomLevel": 1,
  "files.associations": {
      "*.cjson": "jsonc",
      "*.wxss": "css",
      "*.wxs": "javascript"
  },
  "emmet.includeLanguages": {
      "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  "eslint.autoFixOnSave": true
}
複製代碼

2. 在package.json中安裝了eslint的依賴

"eslint": "^4.18.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
複製代碼

3. 在咱們項目跟目錄添加.eslintrc.js 文件，用於校驗代碼，編寫eslint相關規則

//off warn error 對應的數字 0 1 2

module.exports = {
  parser: "babel-eslint",
  extends: [
    'airbnb',
  ],
  rules: {
    'semi': [2, 'never'], // 每行結束 不加引號（能夠自動修復）
    'max-len' : [1, 80, 2], // 每行的最長長度
    'indent': [2, 2], // 縮進 2 個空格 
    'quotes': [1, 'single'],
    'eqeqeq': 0,
    'no-unused-expressions': 0, // 三目和短路求值
    'no-nested-ternary': 1, // 警告使用嵌套的三目運算
    'no-restricted-globals': 1, // 特定的全局變量
    'object-shorthand': 1, // 對象字面量縮寫語法
    'no-trailing-spaces': 1, // 不容許在語句後存在多餘的空格
    'no-plusplus': 1, // 一元++和--
    'comma-dangle': 2, // 尾隨逗號（會自動修復）
    'arrow-body-style': 0, //
    'prefer-destructuring': 0, // 不強制使用解構
    'import/first': 2, // import 徹底寫到文件最前面的關係
    'object-curly-newline': 0, // 非強制對象大括號和其餘令牌內部的換行符
    'no-shadow': 2, // 禁止 局部變量與其包含範圍內的變量共享相同名稱
    'no-tabs': 0, // 不容許使用製表符
    'no-mixed-spaces-and-tabs': 0, // 容許製表符和空格來縮進
    'no-param-reassign': 2, // 賦值給聲明爲函數參數的變量可能會引發誤解
    'global-require': 2, // 全部調用require()都位於模塊的頂層
    'arrow-parens': [2, 'always'], // 禁止箭頭函數能夠省略括號
    'no-console': 1,
    'keyword-spacing': [1, { "before": true, 'after': true }],  // 關鍵字先後空格 能夠自動修復
    'eol-last': [1, 'always'], // 建議尾隨換行符
    'no-unused-vars': 1, // 消除未使用的變量，函數和函數的參數 自動修復
    'space-before-blocks': 2, //塊以前的間距一致性
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'consistent-return': 0, //忽略該規則 return語句老是或永遠不指定值
    'default-case': 0, // 忽略該規則 switch case 必須有default
    'no-return-assign': 1,  // return 語句 不建議使用賦值
    "no-restricted-globals": 0, // **指定您不但願在應用程序中使用的全局變量名稱
    "no-unused-expressions": 1, // 消除對程序狀態沒有影響的未使用的表達式
    "no-nested-ternary": 0, // 則不容許嵌套的三元表達式。
    'import/no-unresolved': 0, //webpack 定義別名 因此這個地方不要拼接路徑
    'import/extensions': 0, //後綴擴展
    'import/prefer-default-export': 0, //當輸出只有一個變量時，須要添加default
    'import/no-extraneous-dependencies': 0, //dependencies devdependencies
    'react/no-array-index-key': 0,  //用索引當作key值
    'react/no-danger': 1,   //直接插入html
    // 禁止在使用了 dangerouslySetInnerHTML 的組件內添加 children
    'react/no-danger-with-children': 0,
    'react/no-string-refs': 1, //直接使用ref屬性獲取元素
    'react/jsx-no-bind': 0, // 使用bind
    'react/prefer-stateless-function': 0, //無狀態React組件做爲純函數寫入
    'react/react-in-jsx-scope': 2,// 使用JSX時防止丟失React
    'react/jsx-filename-extension': 0, //文件擴展名
    'react/jsx-wrap-multilines': 0, 
    "react/sort-comp": 0, // React中函數的前後順序 
    'jsx-a11y/label-has-for': 0, //label標籤必需要有for
    'jsx-a11y/anchor-is-valid': 0, //容許使用錨點路由
    'jsx-a11y/no-static-element-interactions': 0,  // 容許很是用的節點不使用role="button"增長點擊事件
    'jsx-a11y/click-events-have-key-events': 0, // 容許定義點擊事件的時候不加上onKeyDown、onKeyUp等來區分
  },
  "globals":{
    "document": true,
    "localStorage": true,
    "window": true,
    "location": true,
  }
}
複製代碼

更加深刻解釋說明

1. no-unused-expressions

這條規則有兩個子規則： 一個是是否容許短路求值(allowShortCircuit) 還有一個是是否容許三目運算符(allowTernary)

因此你在eslint的配置文件裏rules規則裏面設定下就好了，短路求值和三目運算都容許：

'no-unused-expressions': 0 想要單獨禁止某一項，好比下面是容許三目，不容許短路：

'no-unused-expressions': [2, { 'allowShortCircuit': false, 'allowTernary': true }]

2. object-shorthand

Here are a few common examples using the ES5 syntax:

// properties
var foo = {
    x: x,
    y: y,
    z: z,
};

// methods
var foo = {
    a: function() {},
    b: function() {}
};
複製代碼

Now here are ES6 equivalents:

/*eslint-env es6*/

// properties
var foo = {x, y, z};

// methods
var foo = {
    a() {},
    b() {}
};
複製代碼

Each of the following properties would warn:

/*eslint object-shorthand: "error"*/
/*eslint-env es6*/

var foo = {
    w: function() {},
    x: function *() {},
    [y]: function() {},
    z: z
};
In that case the expected syntax would have been:

/*eslint object-shorthand: "error"*/
/*eslint-env es6*/

var foo = {
    w() {},
    *x() {},
    [y]() {},
    z
};
複製代碼

3. space-before-blocks

此規則將強化塊以前的間距一致性。它只適用於不以新行開始的塊。

此規則忽略介於=>和塊之間的間距。間距由arrow-spacing規則處理。 此規則忽略關鍵字和塊之間的間距。間距由keyword-spacing規則處理。

其餘通用規範

Css代碼規範

一、每一個css屬性佔用一行，不要在一行羅列屬性，例：

.my-class {
    width: 100px;
    height: 50px;
}
複製代碼

二、屬性名和屬性值都使用小寫字母（雖然不區分大小寫，可是爲了規範仍是要所有寫成小寫）

三、選擇器儘可能使用類選擇器，不要對某一dom下的無心義標籤進行樣式設置（好比：div、span），沒法預知樣式影響範圍

/* 不推薦 */

.my-class div {
    width: 100px;
    height: 50px;
}
複製代碼

四、屬性名和屬性值之間要有冒號，屬性值後面要有分號，冒號後要有空格（css裏的空格位置參考js），選擇器前若是有內容須要添加空行

.my-class {
    width: 100px;
    height: 50px;
}
 
.next-section {
    color: #fff;
}
複製代碼

五、0不要添加單位，字符串屬性值使用單引號

jsx代碼規範

1. 組件的命名和引用均使用大寫字母開頭，每一個組件的定義都須要起一個不一樣的名字，以便出現問題時能快速定位到出問題的組件

class Header extends Component { }
 
class Footer extends Component { }

複製代碼

2. 使用組件時，每一個自定義的組件標籤都要有關閉標籤或關閉的斜線

<Header />
<Button>test</Button>
複製代碼

3. 自定義屬性的命名使用駝峯式命名，小寫字母開頭，不要和html標籤的原生屬性衝突

<Button onClickTest={} title="test" >test</Button>
複製代碼

4. 屬性值的大括號先後不須要加空格（區別於js，屬性值內的對象和js風格相同）

<Component prop={{ key: 'value' }} />
複製代碼

5. 每一個循環生成的dom片斷，都須要添加一個惟一的key屬性，推薦使用和其綁定的數據中的惟一值做爲key，不推薦使用數組的索引，索引和其對應的記錄並無直接的綁定關係

let dataList = [
    { key: 'add', title: '添加' },
    { key: 'edit', title: '編輯' },
    { key: 'delete', title: '刪除' }
]
 
dataList.map(item => {
    return <Button key={item.key} >{item.title}</Button>
})
複製代碼

6. 在render函數中（或某些周期函數）不要改變state的值，形成循環渲染

7. 將較爲獨立的模塊抽離，封裝成一個獨立的組件，保證單個組件不會變的臃腫

8. 在進行對象賦值的時候，儘可能使用deep copy，避免在傳遞屬性或修改狀態時對其餘組件產生影響

9. 多行的jsx使用' ( ) '包裹

dataList.map(item => {
    return (
        <div key={item.key} > <Button>{item.title}</Button> <span>{item.title}</span> </div>
    )
})
複製代碼

10. 事件和事件處理函數用on和handle來命名

<Button onClickTest={this.handleClickTest} >test</Button>
複製代碼

11. 使用函數式組件

function Greeting() {
  return <div>Hi there!</div>;
}
<!--從函數參數中得到props-->

function Greeting(props) {
  return <div>Hi {props.name}!</div>;
}
複製代碼

12. 解構props

function Greeting({name}) {
  return <div>Hi {name}!</div>;
}
複製代碼

13. 條件式渲染

// if
{
  condition && <span>Rendered when `truthy`</span>;
}
// unless
{
  condition || <span>Rendered when `falsy`</span>;
}
// if-else
{
  condition ? (
    <span>Rendered when `truthy`</span>
  ) : (
    <span>Rendered when `falsy`</span>
  );
}
複製代碼

參考文檔

參考文檔1： 騰訊eslint文檔

參考文檔2： airbnb 規範

參考文檔2： eslint文檔