資訊專欄INFORMATION COLUMN
摘要：項(xiàng)目編碼規(guī)范化工具工具代碼校驗(yàn)工具，讓代碼更一致和避免。在配置文件到項(xiàng)可對(duì)單條規(guī)則一一進(jìn)行改寫。以下以項(xiàng)目需校驗(yàn)文件為例參考鏈接一步一步，統(tǒng)一項(xiàng)目中的編碼規(guī)范
Web 項(xiàng)目編碼規(guī)范化工具 工具 ESLint
The pluggable linting utility for JavaScript and JSX
代碼校驗(yàn)工具（linting utility），讓代碼更一致和避免 bug。
PrettierPrettier is an opinionated code formatter.
支持 JavaScript · TypeScript · Flow · JSX · JSON · CSS · SCSS · Less · HTML · Vue · Angular ·GraphQL · Markdown · YAML 等文件的格式化。
代碼格式化工具（code formatter），少數(shù)服從多數(shù)，任性的風(fēng)格統(tǒng)一，來確保所有輸出的代碼符合一致。
集成編輯器與終端集成，以便開發(fā)時(shí)代碼不規(guī)范及語法錯(cuò)誤時(shí)，編輯器與終端都將信息暴露給用戶，以方便查看與及時(shí)解決問題。項(xiàng)目集成 代碼格式化過程
終端下發(fā)出格式化命令 ?
ESLint 收到命令 ?
ESLint 讀取項(xiàng)目目錄下的 ESLint 配置文件 ?
如果配置文件里面有 Prettier ? 插件則讀取項(xiàng)目目錄下的Prettier配置文件，反之則跳過該步驟 ?
ESLint 發(fā)出格式化命令 ?
Prettier 配置安裝 prettier 包。
項(xiàng)目根目錄下添加配置.prettierrc文件。
ESLint 配置安裝 eslint 包。
安裝項(xiàng)目特定語法校驗(yàn)規(guī)則eslint擴(kuò)展插件，如Vue項(xiàng)目eslint-plugin-vue,React項(xiàng)目eslint-plugin-react、eslint-plugin-react-hooks 等。
安裝 eslint-plugin-prettier 集成 prettier 語法規(guī)則，安裝 eslint-config-prettier 解決 prettier 與其他規(guī)則等沖突問題。
項(xiàng)目根目錄下添加配置.eslintrc文件。
將上述等插件及擴(kuò)展規(guī)則添加到配置文件，才會(huì)生效。在配置文件到rules項(xiàng)可對(duì)單條規(guī)則一一進(jìn)行改寫。
項(xiàng)目完整配置參考React 項(xiàng)目集成
Vue 項(xiàng)目集成
編輯器集成 安裝插件以 VSCode 為例，其他編輯器類似。
ESLint插件 - VS Code ESLint extension
Prettie 插件 - Prettier Code Formatter
如果項(xiàng)目是 Vue 工程，再安裝一個(gè)插件 Vetur : 為 Vue 框架提供語法高亮、代碼片段、Emmet、格式化、代碼風(fēng)格檢查、智能提示、調(diào)試幫助等。vetur 文檔。
配置可參考這篇文章或網(wǎng)上有很多配置教程可查閱，此處不在重復(fù)訴述。保證插件格式化與腳本格式化命令結(jié)果一致即可。
代碼格式化 格式化單文件當(dāng)某個(gè)文件當(dāng)代碼不規(guī)范時(shí)，可用編輯器安裝當(dāng)插件進(jìn)行格式化代碼。
配置使用 Prettie 插件格式化文件，保證插件格式化與以下腳本格式化命令結(jié)果一致。
格式項(xiàng)目下文件當(dāng)想校驗(yàn)工程目錄下當(dāng)所有代碼時(shí)，可填配腳本格式化命令，例如提交代碼之前添加Hooks校驗(yàn)代碼。
填配腳本格式化命令，使用 ESLint 校驗(yàn)代碼并格式化不規(guī)范代碼。以下以 React 項(xiàng)目需校驗(yàn)文件為例：
"scripts": {
"lint": "eslint --ext tsx,ts,js,jsx src",
"lint-fix": "eslint --fix --ext tsx,ts,js,jsx src",
},
參考鏈接
Prettier your project
一步一步，統(tǒng)一項(xiàng)目中的編碼規(guī)范（vue, vscode, vetur, prettier, eslint）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104966.html
摘要：根據(jù)基于的項(xiàng)目構(gòu)建一所描述的，建立了項(xiàng)目的基本目錄結(jié)構(gòu)，接下來的工作便是編碼，編譯，測試，發(fā)布。對(duì)于自己，僅作文去嘗試清楚的闡述自己構(gòu)建項(xiàng)目的一些實(shí)踐。隨意的編碼風(fēng)格最終導(dǎo)致項(xiàng)目代碼的可維護(hù)性低，新加入成員學(xué)習(xí)成本提高。 根據(jù) 基于koajs的web項(xiàng)目構(gòu)建（一） 所描述的，建立了項(xiàng)目的基本目錄結(jié)構(gòu)，接下來的工作便是編碼，編譯，測試，發(fā)布。做為這些工作，每一項(xiàng)工作都有自己的學(xué)問，針對(duì)這...
摘要：解決思路服務(wù)器端渲染服務(wù)器端和前端公用同一個(gè)應(yīng)用，然后通過構(gòu)建工具及配置，確定哪些組件需要再服務(wù)器端渲染，那些組件需要再客戶端渲染。服務(wù)器端渲染，由框架與構(gòu)建工具配合，并依據(jù)一定的項(xiàng)目結(jié)構(gòu)和編碼方式，共同運(yùn)行。 分離 為什么需要 前后端分離、web服務(wù)器與static服務(wù)器分離: 前端與后端耦合 (需求) 自動(dòng)化、工程化的構(gòu)建前端的代碼 (基礎(chǔ)條件) 模塊化、組件化，項(xiàng)目共享代碼 (...
摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...
摘要：雜項(xiàng)用代替里一定要有的判斷不要在內(nèi)置對(duì)象的原型上添加方法，如不要在內(nèi)層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構(gòu)造函數(shù)，記得將其賦值給某個(gè)變量不要在同個(gè) 決定綜合網(wǎng)上的規(guī)范整出一套自己的開發(fā)規(guī)范出來，以后代碼的風(fēng)格均按照要求來編排，方便管理維護(hù) 一、 命名規(guī)范 項(xiàng)目命名：全部采用小寫方式， 以下劃線分隔，例：my_pro...
摘要：雜項(xiàng)用代替里一定要有的判斷不要在內(nèi)置對(duì)象的原型上添加方法，如不要在內(nèi)層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構(gòu)造函數(shù)，記得將其賦值給某個(gè)變量不要在同個(gè) 決定綜合網(wǎng)上的規(guī)范整出一套自己的開發(fā)規(guī)范出來，以后代碼的風(fēng)格均按照要求來編排，方便管理維護(hù) 一、 命名規(guī)范 項(xiàng)目命名：全部采用小寫方式， 以下劃線分隔，例：my_pro...
閱讀 1681·2021-11-12 10:35
閱讀 1624·2021-08-03 14:02
閱讀 2693·2019-08-30 15:55
閱讀 2036·2019-08-30 15:54
閱讀 774·2019-08-30 14:01
閱讀 2436·2019-08-29 17:07
閱讀 2262·2019-08-26 18:37
閱讀 3040·2019-08-26 16:51
