前端規範那些事

隨着前端工程化的日益成熟，代碼規範化對於開發效率的提高起着很大的做用，包括後期的維護，統一的規範能節省交接的時間成本，而規範包括目錄結構、代碼質量（命名、註釋、JS規範、CSS規範、縮進等）

1.eslint

一個插件化的 javascript 代碼檢測工具，它能夠用於檢查常見的 JavaScript 代碼錯誤，也能夠進行代碼風格檢查

使用到兩個擴展包（airbnb規範 & eslint-plugin-vue）

• eslint-plugin-vue (vue官方eslint插件,檢測vue語法) 官方文檔連接🚀

• airbnb規範標準： 官方文檔連接 🚀

1.1 如何安裝eslint

npm install -g eslint 
複製代碼

1.2 如何將eslint集成到項目中

• 方式1: packjson中配置eslintConfig

以上涉及到的rule規則在擴展包的基礎上作了調整，基於兩個規範作了修改適合你的規範規則

• 方式2:手動建立.eslintrc.js

  將方式1中的eslintconfig內容拷貝到.eslintrc.js文件中去

• 方式3:用eslint 的命令行工具初始化後再修改.eslintrc

1.3 如何使用

1.3.1在packjson中scripts加入腳本命令

• vue-cli 3中的使用

"lint":"vue-cli-service lint"
複製代碼

• 其餘方式

"lint":"eslint --ext .js,.vue src" 
複製代碼

🙆檢測正確的提示

🙅錯誤的提示

1.3.2如何屏蔽沒必要要的檢測（如單元測試、本地mock等）

建立.eslintignore

1.4 如何集成到CI/CD

集成到部署環節中的代碼掃描環節，規範不經過則發佈失敗

在Jenkinsfile文件中加入

1.5 常見的eslint規則

1.5.1 常見js規則

eslint官方 點我🚀

rules:{
 "no-unused-vars": "warn", //是否支持存在未使用的變量
 'no-debugger': process.env.NODE_ENV === 'production' ? 'error': 'off', //是否禁止debugger
 'no-console': process.env.NODE_ENV === 'production' ? 'error': 'off', //是否禁止console.log
  "no-var": "warn", 
  "no-eval": "warn",//禁止使用eval
}

複製代碼

1.5.2 Vue 相關（eslint-plugin-vue）

參考 Vue官方風格指南, 點我🚀

rules:{
  "vue/prop-name-casing": ["error", "camelCase"],// prop名大小寫：在聲明 prop 的時候，其命名應該始終使用 camelCase
  "vue/name-property-casing": ["error", "PascalCase"], // JS/JSX 中的組件名應該始終是 PascalCase 的
  "vue/require-prop-types": "error", // props定義儘可能詳細
  "vue/require-v-for-key": "error", // v-for設置鍵值，與key結合使用
   "vue/no-use-v-if-with-v-for": ["error", {
    "allowUsingIterationVar": false
  }], //不要把 v-if 和 v-for 用在同一個元素上
  "vue/max-attributes-per-line": ["error", {
    "singleline": 1,
    "multiline": {
      "max": 1,
      "allowFirstLine": false
    }
  }], //多個特性的元素應該分多行撰寫，每一個特性一行
}

複製代碼

1.5.3 啓用禁用

• 「off」 或 0 - 關閉規則
• 「warn」 或 1 - 開啓規則，使用警告級別的錯誤：warn (不會致使程序退出)
• 「error」 或 2 - 開啓規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出)

2. Prettier

Prettier 是格式化代碼工具。用來保持團隊的項目風格統一

2.1 如何配置

• 方式1 ：根目錄建立.prettierrc

• 方式2: package.json中新建prettier屬性。

//方式1 

module.exports = {
  "printWidth": 160, //一行的字符數，若是超過會進行換行，默認爲80
  "tabWidth": 2, //一個tab表明幾個空格數
  "useTabs": false, //是否使用tab進行縮進，默認爲false，表示用空格進行縮減
  "singleQuote": false, //字符串是否使用單引號，默認爲false，使用雙引號
  「useEditorConfig」: false, // 是否使用項目中的.editorconfig文件
  "semi": true, //行位是否使用分號，默認爲true
  "bracketSpacing": true, //對象大括號直接是否有空格，默認爲true，效果：{ foo: bar }
}
複製代碼

2.2 如何使用

使用eslint-plugin-prettier插件來添加prettier做爲ESLint的規則配置，在ESLint運行Prettier

2.2.1 安裝

安裝eslint-plugin-prettier

npm install --save-dev eslint-plugin-prettier
複製代碼

2.2.2 配置 eslint

// packjson
"eslintConfig": {
    "extends": [
      "plugin:vue/essential",
      "@vue/airbnb",
      "prettier"
    ],
    "plugins": [
      "prettier"
    ],
    "rules": {
      "prettier/prettier": "error",
     }
 }
複製代碼

ps🏆: Prettier分別引入到extends與plugins中是爲了防止eslint配置的rules與Prettier配置的rules衝突

3. 文檔類約束

文檔類約束能夠參考一些現有的團隊規範

• 京東凹凸實驗室代碼規範
• clean-code-javascript
• Airbnb團隊
• 百度fex團隊

未完待續...