前言
JavaScript 是一個(gè)動態(tài)的弱類型語言，在開發(fā)中比較容易出錯(cuò)。因?yàn)闆]有編譯程序，為了尋找 JavaScrip 代碼錯(cuò)誤通常需要在執(zhí)行過程中不斷調(diào)試。像 ESLint 可以讓程序員在編碼的過程中發(fā)現(xiàn)問題而不是在執(zhí)行過程中，幫助我們提高開發(fā)效率。
為什么要做代碼約束？
-
提高代碼整體的可讀性、可維護(hù)性、可復(fù)用性
-
保證代碼風(fēng)格的一致性\多人協(xié)作時(shí)代碼代碼語法、規(guī)范、風(fēng)格強(qiáng)制統(tǒng)一
-
完善代碼規(guī)范
-
提升團(tuán)隊(duì)整體開發(fā)效率
基礎(chǔ)概念
-
eslint是什么： 檢查代碼質(zhì)量與風(fēng)格的工具，主要功能總結(jié)為兩點(diǎn)：①代碼質(zhì)量檢查可以發(fā)現(xiàn)代碼中存在的可能錯(cuò)誤，如使用未聲明變量、聲明而未使用的變量、修改 const 變量、代碼中使用debugger等等；②代碼格式化可以用來統(tǒng)一團(tuán)隊(duì)的代碼風(fēng)格，比如加不加分號、使用 tab 還是空格、字符串使用單引號 等等
-
prettier是什么：代碼格式化工具,能夠使輸出代碼保持風(fēng)格一致
-
stylelint是什么: 樣式規(guī)范工具
-
EditorConfig是什么： 幫助開發(fā)人員在不同的編輯器 和 IDE 之間定義和維護(hù)一致的編碼樣式。
-
husky是什么： 操作git hook的工具，主要實(shí)現(xiàn)代碼提交前 eslint 校驗(yàn)和 commit 信息的規(guī)范校驗(yàn),也可以避免多人合作時(shí)代碼格式化不統(tǒng)一造成的沖突
-
lint-staged是什么： 可以在git staged階段的文件上執(zhí)行Linters。也就是只對git add之后的暫存區(qū)代碼進(jìn)行校驗(yàn)?？梢酝ㄟ^配置文件來指定對不同的文件執(zhí)行不同的檢驗(yàn)。
-
commitlint是什么： 要是對提交信息Commit Message的檢查。是一款檢查工具和husky一起配合使用。只有當(dāng)提交信息符合規(guī)則的時(shí)候，才能夠提交。
Eslint(代碼規(guī)范工具)
一：在Vscode中的配置eslint
-
在vscode中下載ESLint插件
-
點(diǎn)擊設(shè)置找到setting.json配置文件
-
在setting.json文件中添加有關(guān)eslint的配置
"eslint.enable":true, "eslint.run":"onType", "eslint.options":{ "extensions":[ ".js", ".vue", ".jsx", ".tsx" ] }, "editor.codeActionsOnSave":{ "source.fixAll.eslint":true }
二：下載相關(guān)插件
根據(jù)項(xiàng)目具體需求下載依賴（以下是eslint常用依賴）
-
在vscode中下載ESLint插件
// npm 安裝 npm install eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser -D // yarn 安裝 yarn add eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser -D //eslint-plugin-vue插件主要是增加eslint檢驗(yàn)規(guī)則對vue文件的支持
| 依賴 |
作用描述 |
|---|---|
| eslint |
ESLint 核心庫 |
| eslint-config-prettier |
關(guān)掉所有和 Prettier 沖突的 ESLint 的配置 |
| eslint-plugin-prettier |
將 Prettier 的 rules 以插件的形式加入到 ESLint 里面 |
| eslint-plugin-vue |
為 Vue 使用 ESlint 的插件 |
| @typescript-eslint/eslint-plugin |
ESLint 插件，包含了各類定義好的檢測 TypeScript 代碼的規(guī)范 |
| @typescript-eslint/parser |
ESLint 的解析器，用于解析 TypeScript，從而檢查和規(guī)范 TypeScript 代碼 |
三：創(chuàng)建.eslintignore文件
該文件配置不需要eslint規(guī)則校驗(yàn)的目錄名稱
node_modules
dist四：創(chuàng)建.eslintrc.js文件
//.eslintrc.js
// 這只是初始版本，幫助大家理解eslint的一些配置屬性，若要形成eslint的配置文件規(guī)范，還有待完善
module.exports = {
root:true,//默認(rèn)情況下，Eslint會在所有父級目錄中尋找配置文件，一直到根目錄。為了將Eslint限制在一個(gè)特定的項(xiàng)目，設(shè)置root:true,Eslint一旦發(fā)現(xiàn)配置文件中有 “root":true.它就會停止在父級目錄中尋找
//env:指定腳本的運(yùn)行環(huán)境
env:{
//預(yù)定義的全局變量，這里是瀏覽器環(huán)境
browser:true,
node:true,
//會自動開啟es2021語法支持
es2021:true
}
//指定解析器
parser:"vue-eslint-parser"
//配置文件從基礎(chǔ)配置中繼承已啟用的規(guī)則
//eslint:recommended 啟用核心規(guī)則，在規(guī)則頁面中被標(biāo)記為√的
extends:[
//plugin:(此處不能有空格)包名/配置名稱。解析時(shí)plugin是解析成eslint-plugin-vue。如果有空格會解析失敗，eslint-plugin- vue
//plugin可以省略包名的前綴 eslint-plugin-
//擴(kuò)展風(fēng)格
"eslint:recommended",
"plugin:vue/vue3-recommended",
"plugin:prettier/recommended",
//eslint-config-prettier的縮寫
"prettier"
]
//設(shè)置解析器能幫助ESLint確定什么是解析錯(cuò)誤
parserOptions:{
//指定js版本，語法上的支持
ecmaVersion:12,
sourceType:"module",
ecmaFeatures:{
jsx:true
}
},
//使用第三方插件，全局安裝的ESLint實(shí)例只能使用全局安裝的ESLint插件《本地同理，不支持混用
plugins:['vue','prettier','html'],
//規(guī)則的細(xì)節(jié)請到ESLint官方網(wǎng)站查看"http://eslint.org/docs/rules/
//每個(gè)規(guī)則有三個(gè)錯(cuò)誤級別
// "off"或者0，不啟用這個(gè)規(guī)則
// ”warn"或者1，出現(xiàn)問題會有警告
// “error"或者2，出現(xiàn)問題會報(bào)錯(cuò)
rules:{
"no-var": "error",
"prettier/prettier": "error",
// 禁止出現(xiàn)console
"no-console": "warn",
// 禁用debugger
"no-debugger": "warn",
// 禁止出現(xiàn)重復(fù)的 case 標(biāo)簽
"no-duplicate-case": "warn",
// 禁止出現(xiàn)空語句塊
"no-empty": "warn",
// 禁止不必要的括號
"no-extra-parens": "off",
// 禁止對 function 聲明重新賦值
"no-func-assign": "warn",
// 禁止在 return、throw、continue 和 break 語句之后出現(xiàn)不可達(dá)代碼
"no-unreachable": "warn",
// 強(qiáng)制所有控制語句使用一致的括號風(fēng)格
curly: "warn",
// 要求 switch 語句中有 default 分支
"default-case": "warn",
// 強(qiáng)制盡可能地使用點(diǎn)號
"dot-notation": "warn",
// 要求使用 === 和 !==
eqeqeq: "warn",
// 禁止 if 語句中 return 語句之后有 else 塊
"no-else-return": "warn",
// 禁止出現(xiàn)空函數(shù)
"no-empty-function": "warn",
// 禁用不必要的嵌套塊
"no-lone-blocks": "warn",
// 禁止使用多個(gè)空格
"no-multi-spaces": "warn",
// 禁止多次聲明同一變量
"no-redeclare": "warn",
// 禁止在 return 語句中使用賦值語句
"no-return-assign": "warn",
// 禁用不必要的 return await
"no-return-await": "warn",
// 禁止自我賦值
"no-self-assign": "warn",
// 禁止自身比較
"no-self-compare": "warn",
// 禁止不必要的 catch 子句
"no-useless-catch": "warn",
// 禁止多余的 return 語句
"no-useless-return": "warn",
// 禁止變量聲明與外層作用域的變量同名
"no-shadow": "off",
// 允許delete變量
"no-delete-var": "off",
// 強(qiáng)制數(shù)組方括號中使用一致的空格
"array-bracket-spacing": "warn",
// 強(qiáng)制在代碼塊中使用一致的大括號風(fēng)格
"brace-style": "warn",
// 強(qiáng)制使用駱駝拼寫法命名約定
camelcase: "warn",
// 強(qiáng)制使用一致的縮進(jìn)
indent: "off",
// 強(qiáng)制在 JSX 屬性中一致地使用雙引號或單引號
// 'jsx-quotes': 'warn',
// 強(qiáng)制可嵌套的塊的最大深度4
"max-depth": "warn",
// 強(qiáng)制最大行數(shù) 300
// "max-lines": ["warn", { "max": 1200 }],
// 強(qiáng)制函數(shù)最大代碼行數(shù) 50
// 'max-lines-per-function': ['warn', { max: 70 }],
// 強(qiáng)制函數(shù)塊最多允許的的語句數(shù)量20
"max-statements": ["warn", 100],
// 強(qiáng)制回調(diào)函數(shù)最大嵌套深度
"max-nested-callbacks": ["warn", 3],
// 強(qiáng)制函數(shù)定義中最多允許的參數(shù)數(shù)量
"max-params": ["warn", 3],
// 強(qiáng)制每一行中所允許的最大語句數(shù)量
"max-statements-per-line": ["warn", { max: 1 }],
// 要求方法鏈中每個(gè)調(diào)用都有一個(gè)換行符
"newline-per-chained-call": ["warn", { ignoreChainWithDepth: 3 }],
// 禁止 if 作為唯一的語句出現(xiàn)在 else 語句中
"no-lonely-if": "warn",
// 禁止空格和 tab 的混合縮進(jìn)
"no-mixed-spaces-and-tabs": "warn",
// 禁止出現(xiàn)多行空行
"no-multiple-empty-lines": "warn",
// 禁止出現(xiàn);
// semi: ["warn", "never"],
// 強(qiáng)制在塊之前使用一致的空格
"space-before-blocks": "warn",
// 強(qiáng)制在 function的左括號之前使用一致的空格
// 'space-before-function-paren': ['warn', 'never'],
// 強(qiáng)制在圓括號內(nèi)使用一致的空格
"space-in-parens": "warn",
// 要求操作符周圍有空格
"space-infix-ops": "warn",
// 強(qiáng)制在一元操作符前后使用一致的空格
"space-unary-ops": "warn",
// 強(qiáng)制在注釋中 // 或 /* 使用一致的空格
// "spaced-comment": "warn",
// 強(qiáng)制在 switch 的冒號左右有空格
"switch-colon-spacing": "warn",
// 強(qiáng)制箭頭函數(shù)的箭頭前后使用一致的空格
"arrow-spacing": "warn",
"prefer-const": "warn",
"prefer-rest-params": "warn",
"no-useless-escape": "warn",
"no-irregular-whitespace": "warn",
"no-prototype-builtins": "warn",
"no-fallthrough": "warn",
"no-extra-boolean-cast": "warn",
"no-case-declarations": "warn",
"no-async-promise-executor": "warn",
"vue/multi-word-component-names": "off"
}
//腳本在執(zhí)行期間訪問的額外的全局變量
globals:{
defineProps: "readonly",
defineEmits: "readonly",
defineExpose: "readonly",
withDefaults: "readonly",
}
}Prettier(代碼格式化工具)
一、Prettier是什么？
Prettier 根據(jù)官方解釋，是一個(gè)“有態(tài)度”的代碼格式化工具，支持大量編程語言格式化，包含：
-
JavaScript (including experimental features)
-
JSX
-
Angular
-
Vue
-
Flow
-
Typescript
-
CSS, Less and Scss
-
HTML
-
JSON
-
GraphQL
-
Markdown, including GFM and MDX
-
YAML
二、為什么需要 Prettier？
-
ESLint: 代碼檢測工具；可以檢測出你代碼中潛在的問題。比如：使用了某個(gè)變量卻忘記了定義
-
Prettier: 代碼格式化工具；作為代碼格式化工具，能夠統(tǒng)一或者你的團(tuán)隊(duì)的代碼風(fēng)格
-
使用 ESLint 與 eslint-plugin-prettier 的結(jié)果是最終得到的代碼是充分尊重 Prettier 的結(jié)果，而 prettier-eslint-cli 則是先執(zhí)行 Prettier 然后再自動使用 eslint --fix 將與 ESLint 規(guī)則沖突的代碼修正成 ESLint 想要的結(jié)果。這樣其實(shí)引入 Prettier 不會影響你原有的設(shè)置。
三、如何使用 Prettier？
① 安裝 Prettier
yarn add prettier -D② 在根目錄新建 .prettierrc.js，配置如下:
module.exports = {
// 一行最多 80 字符
printWidth: 80,
// 使用 2 個(gè)空格縮進(jìn)
tabWidth: 2,
// 不使用 tab 縮進(jìn)，而使用空格
useTabs: false,
// 行尾需要有分號
semi: true,
// 使用單引號代替雙引號
singleQuote: true,
// 對象的 key 僅在必要時(shí)用引號
quoteProps: 'as-needed',
// jsx 不使用單引號，而使用雙引號
jsxSingleQuote: false,
// 末尾使用逗號
trailingComma: 'all',
// 大括號內(nèi)的首尾需要空格 { foo: bar }
bracketSpacing: true,
// jsx 標(biāo)簽的反尖括號需要換行
jsxBracketSameLine: false,
// 箭頭函數(shù)，只有一個(gè)參數(shù)的時(shí)候，也需要括號
arrowParens: 'always',
// 每個(gè)文件格式化的范圍是文件的全部內(nèi)容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要寫文件開頭的 @prettier
requirePragma: false,
// 不需要自動在文件開頭插入 @prettier
insertPragma: false,
// 使用默認(rèn)的折行標(biāo)準(zhǔn)
proseWrap: 'preserve',
// 根據(jù)顯示樣式?jīng)Q定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 換行符使用 lf
endOfLine: 'lf'
}③ 接下來在 package.json 添加命令, 執(zhí)行 npm run prettier, 會對 src 目錄下后綴為 .ts 的文件進(jìn)行代碼格式
scripts: {
"prettier": "prettier --write \"src/**/*.ts\""
}④ 在 vscode 中使用
-
截至目前，需要手動運(yùn)行命令 npm run eslint、npm run prettier 才能對代碼進(jìn)行格式化，還是挺麻煩的，也不是人人都會去手動執(zhí)行，所以我們可以借助 vscode 插件，實(shí)現(xiàn)保存時(shí)自動格式化代碼。
-
安裝 Eslint 和 Prettier 插件
-
在 setting.json 配置如下內(nèi)容，可以保存時(shí)自動格式化
{ "files.eol": "\n", "editor.tabSize": 2, "editor.defaultFormatter": "esbenp.prettier-vscode", "eslint.validate": [ "javascript", "javascriptreact", "vue", "typescript", "typescriptreact" ], "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.formatOnSave": true }
這些配置目前只存在自己的 vscode, 我們可以將這些配置集成到我們的項(xiàng)目里面，讓團(tuán)隊(duì)也能快速擁有跟自己 一樣的配置。在根目錄創(chuàng)建 .vscode 文件夾，創(chuàng)建 settings.json 和 extensions.json, 并做相應(yīng)配置。
StyleLint(樣式規(guī)范工具）
EditorConfig 配置
1、簡介：EditorConfig 幫助開發(fā)人員在不同的編輯器 和 IDE 之間定義和維護(hù)一致的編碼樣式。
2、安裝 VsCode 插件（EditorConfig ）：
3、配置 EditorConfig（.editorconfig）：
http://editorconfig.org
root = true
[*] # 表示所有文件適用
charset = utf-8 # 設(shè)置文件字符集為 utf-8
end_of_line = lf # 控制換行類型(lf | cr | crlf)
insert_final_newline = true # 始終在文件末尾插入一個(gè)新行
indent_style = tab # 縮進(jìn)風(fēng)格（tab | space）
indent_size = 2 # 縮進(jìn)大小
max_line_length = 130 # 最大行長度
[*.md] # 表示僅 md 文件適用以下規(guī)則
max_line_length = off # 關(guān)閉最大行長度限制
trim_trailing_whitespace = false # 關(guān)閉末尾空格修剪Git 規(guī)范流程
| 依賴 |
作用描述 |
| husky |
操作 git 鉤子的工具 |
| lint-staged |
在提交之前進(jìn)行 eslint 校驗(yàn)，并使用 prettier 格式化本地暫存區(qū)的代碼 |
-
husky（操作 git 鉤子的工具）：
安裝：
npm install husky -D使用：
// 1、打開package.json文件，在scripts中添加
"prepare": "husky install"
// 2、添加完成之后，執(zhí)行如下命令
npm set-script prepare "husky install"
npm run prepare // 在這之后會生成一個(gè)husky文件夾-
lint-staged（本地暫存代碼檢查工具）
安裝：
npm install lint-staged -D-
添加 ESlint Hook（在.husky 文件夾下添加 pre-commit 文件）：
-
作用：通過鉤子函數(shù)，判斷提交的代碼是否符合規(guī)范，并使用 prettier 格式化代碼
-
執(zhí)行以下命令，在husky文件夾下自動生成pre-commit文件文章來源：http://www.zghlxwxcb.cn/news/detail-844642.html
npx husky add .husky/pre-commit "npm run lint:lint-staged"-
新增lint-staged.config.js 文件：（根據(jù)具體需求具體配置） \ 或者在 package.json 配置文章來源地址http://www.zghlxwxcb.cn/news/detail-844642.html
module.exports = {
"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": ["prettier --write--parser json"],
"package.json": ["prettier --write"],
"*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],
"*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],
"*.md": ["prettier --write"]
};配置 package.json 命令
{
"scripts": {
// 以下為必配置
"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
"lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
"lint:lint-staged": "lint-staged",
"prepare": "husky install"
},
"lint-staged": {
"*.{ts,tsx,vue,js,jsx}": [
"eslint --fix",
"prettier --write"
]
},
}到了這里，關(guān)于代碼約束（ESlint\prettier\husky\lint-staged\commitlint）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
