前端規範那些事

樹醬發表於2020-02-25
前端

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

前端規範那些事

1.eslint

一個外掛化的 javascript 程式碼檢測工具，它可以用於檢查常見的 JavaScript 程式碼錯誤，也可以進行程式碼風格檢查

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

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. 文件類約束

文件類約束可以參考一些現有的團隊規範

未完待續...

前端規範那些事

相關文章