當前位置: 妍妍網 > 碼農

學習這些前端程式碼規範,讓你的程式碼更絲滑!

2024-04-01碼農

大家好,我是 CUGGZ。

不以規矩,不能成方圓。今天來推薦幾個流行的前端程式碼規範,可以參考這些規範來制訂適合自己團隊的程式碼規範,也可以透過學習這些規範來編寫更簡潔清晰的程式碼,讓你的程式碼更絲滑!

JavaScript

Airbnb JavaScript style Guide

Airbnb JavaScript style Guide 是由 Airbnb 開源的 JavaScript 程式碼風格指南。主要是為編寫 JavaScript 程式碼提供規範的風格,方便開發者理解、閱讀程式碼。

Github(英文): https://github.com/airbnb/javascript

Github(中文): https://github.com/sivan/javascript- style-guide

JavaScript Standard style

JavaScript 標準風格,無需管理 .eslintrc , .jshintrc , 或 . jscsrc 檔即可執行,真正做到開箱即用。

Github: https://github.com/standard/standard

idiomatic.js

編寫具備一致風格、通俗易懂 JavaScript 的規則,提供了中文版。

Github: https://github.com/rwaldron/idiomatic.js

Google JavaScript style Guide

谷歌 JavaScript 風格指南。

Github: https://google.github.io/ styleguide/jsguide.html#terminology-notes

CSS

Airbnb CSS / Sass styleguide

用更合理的方式編寫 CSS 和 Sass。

Github: https://github.com/airbnb/css

Code Guide

開發靈活,穩定,永續 HTML 和 CSS 程式碼的規範,提供了中文版。

Github: https://github.com/mdo/code-guide

Google HTML/CSS style Guide

谷歌 HTML/CSS 風格指南,旨在改善協作和程式碼品質。

地址: https://google.github.io/ styleguide/htmlcssguide.html

Sass Guidelines

編寫健全、可維護和可延伸的 Sass 的指南。

Github: https://github.com/KittyGiraudel/sass-guidelines

Vue

Vue.js 風格指南

這是 Vue 官方提供的 Vue(2.x)特有程式碼的風格指南。

Github: https://v2.cn.vuejs.org/v2/ style-guide/

Vue.js Component style Guide

本規範提供了一種統一的編碼規範來編寫 Vue.js 程式碼。

Github: https://github.com/pablohpsilva/vuejs-component- style-guide

React

Airbnb React/JSX style Guide

Airbnb React/JSX 風格指南,基於 JavaScript 當前流行的標準。

Github: https://github.com/airbnb/javascript/tree/master/react

TypeScript

Google TypeScript style Guide

谷歌 TypeScript 風格指南。

地址: https://google.github.io/ styleguide/tsguide.html

6. 其他

Node.js style Guide

Node.js style Guide 是編寫一致且美觀的 node.js 程式碼的指南。

Github: https://github.com/felixge/node- style-guide

Git style Guide

Git 風格指南,這份風格指南受到 How to Get Your Change Into the Linux Kernel,git man pages 和大量社群通用實踐的啟發,提供了中文版。

Github: https://github.com/agis/git- style-guide

HTTP API Design Guide

本指南描述了一組 HTTP+JSON API 設計實踐。它的目標是一致性和專註於業務邏輯,同時避免設計輪子。提供了中文版。

Github: https://github.com/interagent/http-api-design

Google JSON style Guide

谷歌 JSON 風格指南。

地址: https://google.github.io/ styleguide/jsonc styleguide.xml

京東凹凸實驗室前端規範

由凹凸實驗室整理,基於 W3C、蘋果開發者 等官方文件,並結合團隊日常業務需求以及團隊在日常開發過程中總結提煉出的經驗而制定。

Github: https://github.com/o2team/guide

Document style Guide

阮一峰開源的中文技術文件的寫作規範。

Github: https://github.com/ruanyf/document- style-guide