web前端编码规范

什么是编码规范

编码规范就是指导如何编写和组织代码的一系列标准。通过阅读这些编码规范，你可以知道在各个公司里代码是如何编写的。

1、配置约束

1.1、.editorconfig配置

.editorconfig配置有助于为不同开发编辑器上开发同一项目的多个开发人员维护一致的编码风格。VScode编辑器读取该文件时，需要手动下载EditorConfig for VS Code插件。

# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

1.2、prettier工具

Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以格式处理，也是当下最流行的代码格式化工具。使用VScode编辑器时，需要安装Prettier - Code formatter的插件。

1.2.1、安装prettier
// 考虑到协调开发，需要在项目里统一安装
npm install prettier -D
1.2.2、配置.prettierrc文件
{
  "useTabs": false,  // 使用tab缩进还是空格缩进，选择false；
  "tabWidth": 2,   // tab是空格的情况下，是几个空格，选择2个；
  "printWidth": 80,  // 当行字符的长度，推荐80，也可以按照喜好设置；
  "singleQuote": true,   // 使用单引号还是双引号，选择true，使用单引号；
  "trailingComma": "none",  // 在多行输入的尾逗号是否添加，设置为 `none`；
  "semi": false   // 语句末尾是否要加分号，默认值true，选择false表示不加；
}
1.2.3、配置.prettierignore忽略文件
/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*
1.2.4、测试prettier是否生效

在package.json中配置一个scripts：

    "prettier": "prettier --write ."
  • 测试一：在代码中保存代码；
  • 测试二：配置一次性修改的命令npm run prettier；

1.3、ESLint检测

在创建项目的时候，我们就选择了ESLint，所以Vue会默认帮助我们配置需要的ESLint环境。由于我们也使用了prettier，这就需要解决eslint和prettier冲突的问题。使用VScode编辑器时，需要安装ESLint的插件。

1.3.1 安装插件eslint-plugin-prettier 、eslint-config-prettier

安装插件：（vue在创建项目时，如果选择prettier，那么这两个插件会自动安装）

npm i eslint-plugin-prettier eslint-config-prettier -D

安装完成后需要在.eslintrc.js文件追加配置：

  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
1.3.2 .eslintrc.js 配置
module.exports = {
  root: true,
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "globals": {
    "process": true,
    "Plyr": true,
    "AMap": true
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true
    }
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
  "plugins": [
    'html' // 插件，此插件用于识别文件中的js代码，没有MIME类型标识没有script标签也可以识别到，因此拿来识别.vue文件中的js代码
  ],
  "rules": {
    /**
     * 代码中可能的错误或逻辑错误
     */
    "no-cond-assign": ["error", "always"], // 禁止条件表达式中出现赋值操作符
    "no-console": ["error", { allow: ["warn", "error"] }], // 禁用 console
    "no-constant-condition": ["error", { "checkLoops": true }], // 禁止在条件中使用常量表达式
    "no-control-regex": ["error"], // 禁止在正则表达式中使用控制字符
    "no-debugger": ["error"], // 禁用 debugger
    "no-dupe-args": ["error"], // 禁止 function 定义中出现重名参数
    "no-dupe-keys": ["error"], // 禁止对象字面量中出现重复的 key
    "no-duplicate-case": ["error"], // 禁止出现重复的 case 标签
    "no-empty": ["error", { "allowEmptyCatch": true }], // 禁止出现空语句块
    "no-empty-character-class": ["error"], // 禁止在正则表达式中使用空字符集
    "no-ex-assign": ["error"], // 禁止对 catch 子句的参数重新赋值
    "no-extra-boolean-cast": ["error"], // 禁止不必要的布尔转换
    "no-extra-semi": ["error"], // 禁止不必要的分号
    "no-func-assign": ["warn"], // 禁止对 function 声明重新赋值
    "no-inner-declarations": ["error"], // 禁止在嵌套的块中出现变量声明或 function 声明
    "no-invalid-regexp": ["error", { "allowConstructorFlags": [] }], // 禁止 RegExp 构造函数中存在无效的正则表达式字符串
    "no-irregular-whitespace": ["error"], // 禁止在字符串和注释之外不规则的空白
    "no-obj-calls": ["error"], // 禁止把全局对象作为函数调用
    "no-regex-spaces": ["error"], // 禁止正则表达式字面量中出现多个空格
    "no-sparse-arrays": ["error"], // 禁用稀疏数组
    "no-unexpected-multiline": ["error"], // 禁止出现令人困惑的多行表达式
    "no-unsafe-finally": ["error"], // 禁止在 finally 语句块中出现控制流语句
    "no-unsafe-negation": ["error"], // 禁止对关系运算符的左操作数使用否定操作符
    "use-isnan": ["error"], // 要求使用 isNaN() 检查 NaN

    /**
     * 最佳实践
     */
    "default-case": ["error"], // 要求 switch 语句中有 default 分支
    "dot-notation": ["error"], // 强制尽可能地使用点号
    "eqeqeq": ["warn"], // 要求使用 === 和 !==
    "no-caller": ["error"], // 禁用 arguments.caller 或 arguments.callee
    "no-case-declarations": ["error"], // 不允许在 case 子句中使用词法声明
    "no-empty-function": ["error"], // 禁止出现空函数
    "no-empty-pattern": ["error"], // 禁止使用空解构模式
    "no-eval": ["error"], // 禁用 eval()
    "no-global-assign": ["error"], // 禁止对原生对象或只读的全局对象进行赋值
    // "no-magic-numbers": ["error", { "ignoreArrayIndexes": true }], // 禁用魔术数字
    "no-redeclare": ["error", { "builtinGlobals": true }], // 禁止重新声明变量
    "no-self-assign": ["error", { props: true }], // 禁止自我赋值
    "no-unused-labels": ["error"], // 禁用出现未使用过的标
    "no-useless-escape": ["error"], // 禁用不必要的转义字符
    "radix": ["error"], // 强制在parseInt()使用基数参数

    /**
     * 变量声明
     */
    "no-delete-var": ["error"], // 禁止删除变量
    "no-undef": ["error"], // 禁用未声明的变量，除非它们在 /*global */ 注释中被提到
    "no-unused-vars": ["error"], // 禁止出现未使用过的变量
    "no-use-before-define": ["error"], // 禁止在变量定义之前使用它们

    /**
     * 风格指南
     */
    "array-bracket-newline": ["error", { "multiline": true }], // 在数组开括号后和闭括号前强制换行
    "array-bracket-spacing": ["error", "never"], // 强制数组方括号中使用一致的空2
    "block-spacing": ["error", "never"], // 禁止或强制在代码块中开括号前和闭括号后有空格
    "brace-style": ["error", "1tbs",], // 强制在代码块中使用一致的大括号风格
    "comma-dangle": ["error", "never"], // 要求或禁止末尾逗号
    "comma-spacing": ["error", { "before": false, "after": true }], // 强制在逗号前后使用一致的空格
    "comma-style": ["error", "last"], // 强制使用一致的逗号风格
    "computed-property-spacing": ["error", "never"], // 强制在计算的属性的方括号中使用一致的空格
    "consistent-this": ["error", "that"], // 当获取当前执行环境的上下文时，强制使用一致的命名
    "eol-last": ["error", "always"], // 要求或禁止文件末尾存在空行
    "func-call-spacing": ["error", "never"], // 要求或禁止在函数标识符和其调用之间有空格
    "func-names": ["error", "always"], // 要求或禁止使用命名的 function 表达式
    "func-style": ["error", "declaration", { "allowArrowFunctions": true }], // 强制一致地使用 function 声明或表达式
    "function-paren-newline": ["error", "multiline"], // 强制在函数括号内使用一致的换行
    "implicit-arrow-linebreak": ["error", "beside"], // 强制隐式返回的箭头函数体的位置
    "indent": ["error", 2, { "SwitchCase": 1 }], // 两个空格缩进
    "jsx-quotes": ["error", "prefer-double"], // 强制在 JSX 属性中一致地使用双引号或单引号
    "key-spacing": ["error", { "beforeColon": false, "afterColon": true }], // 强制在对象字面量的属性中键和值之间使用一致的间距
    "line-comment-position": ["error", { "position": "above", "ignorePattern": "ETC" }], // 强制行注释的位置
    "linebreak-style": ["error", "unix"], // 换行符风格
    "max-depth": ["error", 4], // 强制可嵌套的块的最大深度
    "max-nested-callbacks": ["error", 3], // 强制回调函数最大嵌套深度
    "max-params": ["error", 6], // 强制函数定义中最多允许的参数数量
    "multiline-comment-style": ["error", "starred-block"], // 强制对多行注释使用特定风格
    "multiline-ternary": ["error", "always-multiline"], // 要求或禁止在三元操作数中间换行
    "new-cap": ["error", { "capIsNew": false }], // 要求构造函数首字母大写
    "no-array-constructor": ["error"], // 禁用 Array 构造函数
    "no-mixed-operators": ["error"], // 禁止混合使用不同的操作符
    "no-mixed-spaces-and-tabs": ["error"], // 禁止空格和 tab 的混合缩进
    "no-multiple-empty-lines": ["error"], // 禁止出现多行空行
    "no-new-object": ["error"], // 禁用 Object 的构造函数
    "no-tabs": ["error"], // 禁用 tab
    "no-trailing-spaces": ["error", { "skipBlankLines": false, "ignoreComments": false }], // 禁用行尾空白
    "no-whitespace-before-property": ["error"], // 禁止属性前有空白
    "nonblock-statement-body-position": ["error", "beside"], // 强制单个语句的位置
    "object-curly-spacing": ["error", "never"], // 强制在大括号中使用一致的空格
    "operator-linebreak": ["error", "after"], // 强制操作符使用一致的换行符
    "quotes": ["error", "single"], // 使用单引号
    "semi": ["error", "always"], // 要求或禁止使用分号代替 ASI
    "semi-spacing": ["error", { "before": false, "after": true }], // 强制分号之前和之后使用一致的空格
    "space-before-function-paren": ["error", "never"], // 强制在 function的左括号之前使用一致的空格
    "space-in-parens": ["error", "never"], // 强制在圆括号内使用一致的空格
    "space-infix-ops": ["error"], // 要求操作符周围有空格
    "space-unary-ops": ["error", { "words": true, "nonwords": false }], // 强制在一元操作符前后使用一致的空格
    "spaced-comment": ["error", "always"], // 强制在注释中 // 或 /* 使用一致的空格

    /**
     * ECMAScript 6
     */
    "arrow-spacing": ["error", { "before": true, "after": true }], // 强制箭头函数的箭头前后使用一致的空格
    "no-var": ["error"], // 要求使用 let 或 const 而不是 var
    "object-shorthand": ["error", "always"], // 要求或禁止对象字面量中方法和属性使用简写语法
    "prefer-arrow-callback": ["error", { "allowNamedFunctions": false }], // 要求回调函数使用箭头函数
  }
};
1.3.3 .eslintignore 配置
build/*.js
src/assets
public
dist

2、开发约束

2.1、命名

2.1.1 、文件夹|文件命名

命名方法: 所有文件名统一使用小写
命名规范：禁止使用特殊字符，统一使用小写字母，文件夹|文件实际效用，尽量见名知意

例如：

// 用户中心
usercenter
// 新闻详情页面
newsdetail.html
2.2.2、图片命名

命名方法: 名称间隔使用_符号
命名规范：

1.图片名称必须小写，禁止使用特殊字符、中文

2.使用英文或拼音缩写，禁止特殊字符

3.命名需要能体现图片的大概用途

例如：

 // 开始按钮
 icon_btn_start.png 
 // 修饰性图片
 ico_play.png
2.1.3、变量命名

命名方法: 小驼峰式命名法
命名规范：前缀为形容词 （函数前缀为动词, 以此来区分函数和变量），视具体情况而定

例如：

let myName = '张三'
let isShow = false
const maxCount = 10

2.2、函数 & 方法

命名方法： 小驼峰式命名法
命名规范： 前缀应该为动词，以action | btn结尾
命名建议：常用动词约定

动词 含义
can 判断是否可执行某个动作
has 判断是否含义某个值
is 判断是否为某个值
get 获取某个值
set 设置某个值
load 加载某些数据
handle 处理某些数据、事件
click 点击事件 一般是点击按钮 以btn收尾

例如：

handleCurrentDataAction(){}
clicksearchBtn() {}

2.3、类 & 构造函数

命名方法：大写驼峰式命名法，首字母大写。
命名规范：前缀为名称。

例如：

class Persion {}

2.4 、注释规范

# HTML板块注释
<!-- 活动板块 开始 -->

#单行注释
// 注释内容 ：必选

# 多行注释
/*
 * 注释说明 ：必选
 * key: 关键字 ：必选
 */

# 函数|方法注释
/**
 * 注释说明 ：必选
 *
 * @param {string} p1 参数1的说明 （按需选择）
 * @param {string} p2 参数2的说明，比较长
 *     那就换行,需要控制长度 （按需选择）
 * @param {number=} p3 参数3的说明（按需选择）
 * @return {Object} 返回值描述 （按需选择）
 */

# 文件注释 文件顶部必须包含文件注释，用 @file 标识文件说明
/**
 * @file 文件描述 ：必选
 * @author authorName(email address) : 可选
 */

代码千万行 规范第一行

这里给大家推荐几个大厂的前端代码规范，你也能写出诗一样的代码，团队开发再也不流泪~
1、腾讯代码规范
包含内容：
通用规范、PC端专属规范、移动端专属规范
文档地址: http://tgideas.qq.com/doc/index.html

2、京东凹凸实验室代码规范
包含内容：
HTML规范：基于W3C、苹果开发者等官方文档，并结合团队日常业务需求以及团队在日常开发过程中总结提炼出的经验而约定。
CSS规范： 统一团队 CSS 代码书写和 SASS 预编译语言的语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。
JavaScript 规范：统一团队的 JS 语法风格和书写习惯，减少程序出错的概率，其中也包含了 ES6 的语法规范和最佳实践。
图片规范：了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等。
命名规范：从 “目录命名”、“图片命名”、“ClassName” 命名等层面约定规范团队的命名习惯，增强团队代码的可读性。
React 规范：统一团队的类 React 应用的语法规范，规范类 React 应用书写。
凹凸实验室文档地址： https://guide.aotu.io/index.html

3、百度代码规范

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,716评论 4赞 364
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,558评论 1赞 294
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 109,431评论 0赞 244
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,127评论 0赞 209
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,511评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,692评论 1赞 222
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,915评论 2赞 313
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,664评论 0赞 202
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,412评论 1赞 246
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2赞 245
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,424评论 2赞 254
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,098评论 3赞 238
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0赞 197
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2赞 276
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2赞 271

推荐阅读更多精彩内容