隨著前端工程化的日益成熟，程式碼規範化對於開發效率的提升起著很大的作用，包括後期的維護，統一的規範能節省交接的時間成本，而規範包括目錄結構、程式碼質量（命名、註釋、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. 文件類約束
文件類約束可以參考一些現有的團隊規範
未完待續...