Web 項目編碼規范化工具

meislzhua 發布于2019-08-23 18:17 / 1537人閱讀

摘要：項目編碼規范化工具工具代碼校驗工具，讓代碼更一致和避免。在配置文件到項可對單條規則一一進行改寫。以下以項目需校驗文件為例參考鏈接一步一步，統一項目中的編碼規范

Web 項目編碼規范化工具 工具 ESLint

The pluggable linting utility for JavaScript and JSX

代碼校驗工具（linting utility），讓代碼更一致和避免 bug。

Prettier

Prettier is an opinionated code formatter.

支持 JavaScript · TypeScript · Flow · JSX · JSON · CSS · SCSS · Less · HTML · Vue · Angular ·GraphQL · Markdown · YAML 等文件的格式化。

代碼格式化工具（code formatter），少數服從多數，任性的風格統一，來確保所有輸出的代碼符合一致。

集成

編輯器與終端集成，以便開發時代碼不規范及語法錯誤時，編輯器與終端都將信息暴露給用戶，以方便查看與及時解決問題。

項目集成 代碼格式化過程

終端下發出格式化命令 ?

ESLint 收到命令 ?

ESLint 讀取項目目錄下的 ESLint 配置文件 ?

如果配置文件里面有 Prettier ? 插件則讀取項目目錄下的Prettier配置文件，反之則跳過該步驟 ?

ESLint 發出格式化命令 ?

Prettier 配置

安裝 prettier 包。

項目根目錄下添加配置.prettierrc文件。

ESLint 配置

安裝 eslint 包。

安裝項目特定語法校驗規則eslint擴展插件，如Vue項目eslint-plugin-vue,React項目eslint-plugin-react、eslint-plugin-react-hooks 等。

安裝 eslint-plugin-prettier 集成 prettier 語法規則，安裝 eslint-config-prettier 解決 prettier 與其他規則等沖突問題。

項目根目錄下添加配置.eslintrc文件。

將上述等插件及擴展規則添加到配置文件，才會生效。在配置文件到rules項可對單條規則一一進行改寫。

項目完整配置參考

React 項目集成

Vue 項目集成

編輯器集成 安裝插件

以 VSCode 為例，其他編輯器類似。

ESLint插件 - VS Code ESLint extension

Prettie 插件 - Prettier Code Formatter

如果項目是 Vue 工程，再安裝一個插件 Vetur : 為 Vue 框架提供語法高亮、代碼片段、Emmet、格式化、代碼風格檢查、智能提示、調試幫助等。vetur 文檔。

配置

可參考這篇文章或網上有很多配置教程可查閱，此處不在重復訴述。保證插件格式化與腳本格式化命令結果一致即可。

代碼格式化 格式化單文件

當某個文件當代碼不規范時，可用編輯器安裝當插件進行格式化代碼。

配置使用 Prettie 插件格式化文件，保證插件格式化與以下腳本格式化命令結果一致。

格式項目下文件

當想校驗工程目錄下當所有代碼時，可填配腳本格式化命令，例如提交代碼之前添加Hooks校驗代碼。

填配腳本格式化命令，使用 ESLint 校驗代碼并格式化不規范代碼。以下以 React 項目需校驗文件為例：

"scripts": {
    "lint": "eslint --ext tsx,ts,js,jsx src",
    "lint-fix": "eslint --fix --ext tsx,ts,js,jsx src",
  },

參考鏈接

Prettier your project

一步一步，統一項目中的編碼規范（vue, vscode, vetur, prettier, eslint）

云服務器 GPU云服務器規范編碼編碼規范 php編碼規范 js安全編碼規范

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104966.html

基于koajs的web項目構建(二)

摘要：根據基于的項目構建一所描述的，建立了項目的基本目錄結構，接下來的工作便是編碼，編譯，測試，發布。對于自己，僅作文去嘗試清楚的闡述自己構建項目的一些實踐。隨意的編碼風格最終導致項目代碼的可維護性低，新加入成員學習成本提高。根據基于koajs的web項目構建（一）所描述的，建立了項目的基本目錄結構，接下來的工作便是編碼，編譯，測試，發布。做為這些工作，每一項工作都有自己的學問，針對這...

ZweiZhao 2019-08-20 10:49 評論0 收藏0
構建前端項目

摘要：解決思路服務器端渲染服務器端和前端公用同一個應用，然后通過構建工具及配置，確定哪些組件需要再服務器端渲染，那些組件需要再客戶端渲染。服務器端渲染，由框架與構建工具配合，并依據一定的項目結構和編碼方式，共同運行。分離為什么需要前后端分離、web服務器與static服務器分離: 前端與后端耦合 (需求) 自動化、工程化的構建前端的代碼 (基礎條件) 模塊化、組件化，項目共享代碼 (...

mindwind 2019-08-23 13:51 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
web前端編碼規范整合

摘要：雜項用代替里一定要有的判斷不要在內置對象的原型上添加方法，如不要在內層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構造函數，記得將其賦值給某個變量不要在同個決定綜合網上的規范整出一套自己的開發規范出來，以后代碼的風格均按照要求來編排，方便管理維護一、命名規范項目命名：全部采用小寫方式，以下劃線分隔，例：my_pro...

孫淑建 2019-08-01 17:44 評論0 收藏0
web前端編碼規范整合

摘要：雜項用代替里一定要有的判斷不要在內置對象的原型上添加方法，如不要在內層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構造函數，記得將其賦值給某個變量不要在同個決定綜合網上的規范整出一套自己的開發規范出來，以后代碼的風格均按照要求來編排，方便管理維護一、命名規范項目命名：全部采用小寫方式，以下劃線分隔，例：my_pro...

liaoyg8023 2019-08-21 16:55 評論0 收藏0