前端規范

命名規范

項目命名

全部采用小寫方式，以下劃線分隔。
例：my_project_name

目錄命名

參照項目命名規則；

有復數結構時，要采用復數命名法。

例：scripts，styles，images，data_models

vue 的項目中，components 下的組件目錄名，使用大駝峰命令

例：LeftBar

JS 文件命名

參照項目命名規則。

例：account_model.js

CSS, SCSS 文件命名

參照項目命名規則。

例：retina_sprites.css

HTML 文件命名

參照項目命名規則。

例：error_log.html

HTML 規范

語法：

縮進使用 tab（2 個空格）；
嵌套的節點應該縮進；
在屬性上，使用雙引號，不要使用單引號；
屬性名全小寫，用中劃線（-）做分隔符；
要在自動閉合標簽結尾處使用斜線；

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company_logo.png" alt="Company" />

    <!-- 屬性名全小寫，用中劃線（-）做分隔符 -->
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

標準模式

在開頭規定 doctype，來啟動標準模式，doctype 要大寫。

<!DOCTYPE html>
<html>
  ...
</html>

規定字符編碼

通過聲明一個明確的字符編碼，讓瀏覽器輕松、快速的確定適合網頁內容的渲染方式，通常指定為'UTF-8'。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  ...
</html>

IE 兼容模式

用 meta 標簽指定頁面應該使用什么版本的 IE 來渲染。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  </head>
  ...
</html>

減少標簽數量

在編寫 HTML 代碼時，需要盡量避免多余的父節點；

<!-- bad -->
<span class="avatar">
  <img src="..." />
</span>

<!-- good -->
<img class="avatar" src="..." />

語義化標簽

html 的標簽能使用語義化的，盡量使用語義化標簽，避免一個頁面都是 div 或者 p 標簽

<!-- bad -->
<div>
  <p></p>
</div>

<!-- good -->
<header></header>
<footer></footer>

JavaScript 規范

縮進

使用 tab 縮進（2 個空格）

if (x < y) {
  x += 10;
} else {
  x += 1;
}

變量命名

標準變量采用駝峰式命名
'Android'在變量名中大寫第一個字母
'iOS'在變量名中小寫第一個，大寫后兩個字母
常量全大寫，用下劃線連接
構造函數，大寫第一個字母
jquery 對象必須以'$'開頭命名

var thisIsMyName;

var AndroidVersion;

var iOSVersion;

var MAX_COUNT = 10;

function Person(name) {
  this.name = name;
}

// not good
var body = $("body");

// good
var $body = $("body");

變量聲明

一個函數作用域中所有的變量聲明盡量提到函數首部。如果可以使用 let 和 const 的，要使用 let 和 const。

function doSomethingWithItems(items) {
  // use one var
  let value = 10,
    result = value + 10,
    i,
    len;

  for (i = 0, len = items.length; i < len; i++) {
    result += 10;
  }
}

單行長度

不要超過 100，但如果編輯器開啟 word wrap 可以不考慮單行長度。

分號

統一要加分號。

空格

以下幾種情況不用寫空格：

對象的屬性名后
函數調用括號前
無論是函數聲明還是函數表達式，'('前不要空格
數組的'['后和']'前
運算符'('后和')'前

以下幾種情況一定要寫空格：

三元運算符'?:'前后
逗號后必須要有空格
代碼塊'{'前
下列關鍵字前：else, while, catch, finally
下列關鍵字后：if, else, for, while, do, switch, case, try,catch, finally, with, return, typeof
單行注釋'//'后（若單行注釋和代碼同行，則'//'前也需要），多行注釋'*'后
對象的屬性值前
for 循環，分號后留有一個空格，前置條件如果有多個，逗號后留一個空格
無論是函數聲明還是函數表達式，'{'前一定要有空格
函數的參數之間

例：

// not good
var a = {
  b : 1
};

// good
var a = {
  b: 1
};

// not good
++x;
y++;
z = x ? 1:2;

// good
++x;
y++;
z = x ? 1 : 2;

// not good
var a = [ 1, 2 ];

// good
var a = [1, 2];

// good
var doSomething = function(a, b, c) {
  // do something
};

// good
doSomething(item);

// not good
for (let i = 0;i < 6;i++) {
  x++;
}

// good
for (let i = 0; i < 6; i++) {
  x++;
}

空行

以下幾種情況一定要有空行

變量聲明后（當變量聲明在代碼塊的最后一行時，則無需空行）
注釋前（當注釋在代碼塊的第一行時，則無需空行）
文件最后保留一個空行

var x = 1;

// 注釋前要有空行
if (x >= 1) {
  var y = x + 1;
}

換行

換行的地方，行末必須有','或者運算符；

以下幾種情況不需要換行：

下列關鍵字后：else, catch, finally
代碼塊'{'前

以下幾種情況需要換行：

代碼塊'{'后和'}'前
變量賦值后

// not good
var a = {
    b: 1
    , c: 2
};

x = y
    ? 1 : 2;

// good
var a = {
    b: 1,
    c: 2
};

x = y ? 1 : 2;

// good
if (condition) {
    ...
} else {
    ...
}

try {
    ...
} catch (e) {
    ...
} finally {
    ...
}

// not good
function test()
{
    ...
}

// good
function test() {
    ...
}

// not good
var a, foo = 7, b,
    c, bar = 8;

// good
var a,
    foo = 7,
    b, c, bar = 8;

注釋

單行注釋

注釋單獨一行的情況下，注釋的//后面要跟一個空格
注釋如果和代碼同一行，代碼分號結束后，要跟一個空格，注釋的//后也要跟一個空格

例：

// 調用函數
foo();

var maxCount = 10; // 這是一個變量

多行注釋

多行注釋使用下面這種形式：

/**
 * 代碼注釋1
 * 代碼注釋2
 */

多行注釋建議在以下幾種情況使用：

難于理解的代碼段
可能存在錯誤的代碼段
瀏覽器特殊的 HACK 代碼
業務邏輯強相關的代碼

函數注釋

復雜的函數，所有類，都必須進行函數注釋，函數注釋使用業界統一的規范，方便后續使用 jsdoc 生成文檔。

例：

/**
 * 獲取任務的名稱
 * @param id {Number} 傳入需要獲取名稱的人物id
 * @return {String} 返回的姓名
 * @author shi 2015/07/21 可以不寫
 * @version 1.1.0 可以不寫
 * @example 示例代碼，可以不寫
 */
function getTaskName(id) {
  let name = "test";
  return name;
}

引號

最外層統一使用單引號，除非字符串嵌套的情況。

// not good
var x = "test";

// good
var y = 'foo',
  z = '<div id="test"></div>';

對象，數組

對象屬性名不需要加引號，如對象屬性名是中劃線命名的需要加引號（eslint 的 rules）
對象以縮進的形式書寫，不要寫在一行（單個屬性可以寫一行，es6 導入方法時可以使用單行）；
數組、對象最后不要有逗號。

// good
var a = {
  b: 1,
  c: 2
};

括號

下列關鍵字后必須有大括號（即使代碼塊的內容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。

// not good
if (condition) doSomething();

// good
if (condition) {
  doSomething();
}

undefined

永遠不要直接使用 undefined 進行變量判斷；

使用 typeof 和字符串'undefined'對變量進行判斷。

// not good
if (person === undefined) {
    ...
}

// good
if (typeof person === 'undefined') {
    ...
}

不允許存在多層嵌套的條件判斷和循環（最多三層）

條件判斷能使用三目運算符和邏輯運算符解決的，就不要使用條件判斷，但是謹記不要寫太長的三目運算符。

例：

// bad
if (x === 10) {
  return 'valid';
} else {
  return 'invalid';
}

// good
return x === 10 ? 'valid' : 'invalid';

// bad
if (!x) {
  if (!y) {
    x = 1;
  } else {
    x = y;
  }
}

// good
x = x || y || 1;

簡單解釋一下邏輯運算符，邏輯運算符主要有兩種，一個是 || 邏輯或，一個是 && 邏輯與。

邏輯或 ||：當前一個為真時，返回前一個值，前一個為假時返回后一個值。

var x = 1;
console.log(x || 2); // 1

var y = 0;
console.log(y || 2); // 2

邏輯與 &&：當前一個為真時，返回后一個值，前一個為假時返回前一個值。

var x = 1;
console.log(x && 2); // 2

var y = 0;
console.log(y && 2); // 0

其他 ESlint

for-in 里一定要有 hasOwnProperty 的判斷；
不要在內置對象的原型上添加方法，如 Array, Date；
變量不要先使用后聲明；
不要在一句代碼中單單使用構造函數，記得將其賦值給某個變量；
不要在同個作用域下聲明同名變量；
不要在一些不需要的地方加括號，例：delete(a.b)；
不要使用未聲明的變量；
debugger 不要出現在提交的代碼里；
數組中不要存在空元素；
不要在循環內部聲明函數；
不要直接 new 使用構造函數（new Vue() 除外）；
不要聲明了變量卻不使用；

這些都可以參考 eslint-config-alloy，有詳細的 JS、TS、React、Vue 的規范，我們后續配置 eslint 時也是引入騰訊的 eslint 規范。

// good
for (key in obj) {
  if (obj.hasOwnProperty(key)) {
    // be sure that obj[key] belongs to the object and was not inherited
    console.log(obj[key]);
  }
}

// not good
Array.prototype.count = function(value) {
  return 4;
};

// not good
function test() {
  console.log(x);

  var x = 1;
}

// not good
new Person();

// good
var person = new Person();

// not good
delete obj.attr;

// good
delete obj.attr;

// not good
var a = [1, , , 2, 3];

// not good
var nums = [];

// not good
for (var i = 0; i < 10; i++) {
  (function(i) {
    nums[i] = function(j) {
      return i + j;
    };
  })(i);
}

其他

換行符統一用'LF'；
對上下文 this 的引用只能使用'_this', 'that', 'self'其中一個來命名；
行尾不要有空白字符；
不允許有空的代碼塊（如果實在需要，可以在代碼塊中寫注釋）。

// not good
function Person() {
  // not good
  var me = this;

  // good
  var _this = this;

  // good
  var that = this;

  // good
  var self = this;
}

if (condition) {
}

CSS 規范

縮進

使用 tab 縮進（2 個空格）

.element {
  border-radius: 10px;
  width: 50px;
  height: 50px;
}

分號

每個聲明結束都要加分號

.element {
  border-radius: 10px;
  width: 50px;
  height: 50px;
}

注釋

注釋統一使用 /* */

.element {
  /* border-radius: 10px; */
  width: 50px;
  height: 50px;
}

引號

url 的內容要用引號
屬性選擇器中的屬性值需要引號

.element:after {
  content: "";
  background-image: url("logo.png");
}

li[data-type="single"] {
  ...;
}

命名

類名使用小寫字母，以中劃線分隔
id 采用駝峰式命名
less,scss 中的變量、函數、混合、placeholder 采用駝峰式命名

/* class */
.element-content {
  ...;
}

/* id */
#myDialog {
  ...;
}

/* 變量 */
$colorBlack: #000;

/* 混合 */
/* scss */
@mixin centerBlock {
  ...;
}
.centerBlock {
  ...,
}

Eslint 配置文件

開發工具： Visual Studio Code 版本>V1.55

配置范圍：所有vue項目組

插件：EsLint(強制)、vetur、Auto Close Tag(推薦)、Auto Rename Tag(推薦)、Path Intellisense(推薦)、HTML CSS Support(推薦)、 Vue Vscode Snippets(推薦) Vue VSCode Snippets

.eslintrc.js

module.exports = {
  root: true,
  parserOptions: {
    parser: "babel-eslint",
    sourceType: "module"
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: ["eslint-config-alloy/vue", "prettier"],

  // 可以添加自己的規則，可以參考 eslint-config-vue
  // https://github.com/vuejs/eslint-config-vue
  rules: {
    "vue/mustache-interpolation-spacing": ["error", "always"],
    "vue/singleline-html-element-content-newline": "off",
    "vue/multiline-html-element-content-newline": "off",
    // vue 中 script 的空格
    "vue/script-indent": [
      "error",
      2,
      {
        baseIndent: 0,
        switchCase: 0,
        ignores: []
      }
    ],
    // vue 中 template 的空格
    "vue/html-indent": [
      "error",
      2,
      {
        attribute: 1,
        baseIndent: 1,
        closeBracket: 0,
        alignAttributesVertically: true,
        ignores: []
      }
    ],
    // 縮進使用 tab
    indent: [
      2,
      2,
      {
        SwitchCase: 1,
        VariableDeclarator: 1
      }
    ],
    // 可以直接只用 new Vue()
    "no-new": 0,
    // 線上禁用debugger
    "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
    // parseInt 可以不傳第二個參數
    radix: 0
  }
};

.editorconfig

# 編輯器配置
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

vscode項目配置Setting.json

{
  // 保存時 prettier 自動格式化
  "editor.formatOnSave": false,
  // 保存時自動啟用 eslint --fix 自動修復
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

注意：將編輯器自動格式化關閉用戶配置不要與工作區配置沖突

建議將setting.json提交到項目倉庫中去，保證每個開發配置一致

全部格式化處理

"lint": "vue-cli-service lint"

npm run lint 配置完成重啟vscode

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 227,748評論 6贊 531
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 98,165評論 3贊 414
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事?！?“怎么了？”我有些...
開封第一講書人閱讀 175,595評論 0贊 373
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 62,633評論 1贊 309
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 71,435評論 6贊 405
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 54,943評論 1贊 321
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,035評論 3贊 440
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,175評論 0贊 287
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 48,713評論 1贊 333
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 40,599評論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 42,788評論 1贊 369
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,303評論 5贊 358
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,034評論 3贊 347
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,412評論 0贊 25
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,664評論 1贊 280
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 51,408評論 3贊 390
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 47,747評論 2贊 370

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

前端規范

命名規范

項目命名

目錄命名

JS 文件命名

CSS, SCSS 文件命名

HTML 文件命名

HTML 規范

語法：

標準模式

規定字符編碼

IE 兼容模式

減少標簽數量

語義化標簽

JavaScript 規范

縮進

變量命名

變量聲明

單行長度

分號

空格

空行

換行

注釋

單行注釋

多行注釋

函數注釋

引號

對象，數組

括號

undefined

不允許存在多層嵌套的條件判斷和循環（最多三層）

其他 ESlint

其他

CSS 規范

縮進

分號

注釋

引號

命名

Eslint 配置文件

.editorconfig

vscode項目配置Setting.json

全部格式化處理

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频