代码规范 下载APP
章节索引 :

代码规范

每个团队、每个人都有自己的代码规范。

规范的代码可以让整个项目的编码风格更统一。

一个项目的代码规范涉及许多方面:

  • 是否该用分号结尾
  • 可否使用位运算符
  • 能不能写行 if 语句
  • 是否必须要用函数声明的形式创建函数

在没有工具检测的情况下,统一多人项目的编码风格是一件比较困难的事情,每次提交代码都需要详细的 review 每一行代码,因为这些规范点都非常细。

好在目前的前端生态有许多工具帮我们解决这个问题。

代码是否符合规范,就是要对代码进行检查。
JavaScript 代码的检查,目前使用最多最广的是 ESLint

1. ESLint

可组装的JavaScript和JSX检查工具

ESLint 的主要作用就是检查代码,许多不符合规范的代码还可以通过 ESLint 直接修复。

1.1 安装 ESLint

ESLint 可以直接使用 npm 安装。

首先在空目录创建一个项目,然后安装 ESLint

npm init -y

npm i eslint -D

图片描述

安装后修改 package.jsonscripts 配置项。

{
  "scripts": {
    "lint": "eslint ./src/**/*.*"
  }
}

eslint 命令就可以执行 eslint./src/**/*.* 表示检查 src 目录开始的所有文件。

接下来创建配置文件:

1.2 创建配置文件

在项目根目录下创建一个 .eslintrc.js 的配置文件,.eslintrceslint 会去默认找的配置文件名。

eslint 可以用多种格式的配置,如 JSONYAML,通常会选则 .js 文件,因为可以方便书写一些环境相关的逻辑、写注释等。

// .eslintrc.js
module.exports = {
  'rules': { // 椒盐规则
    'indent': [ // 锁进为2个一锁 不然报错
      'error',
      2,
    ],
    'quotes': [ // 引号必须使用单引号 不然报错
      'error',
      'single',
    ],
    'semi': [ // 语句结束必须要分号 不然报错
      'error',
      'always',
    ],
  },
};

配置文件创建后可以在项目下创建 src 目录,并且写一个不符合规则的 .js 文件。

// ./src/index.js
var number = 1

if (number < 10) {
    console.log("咕咕?");
}

完成后,就可以执行 npm run lint 命令了。

图片描述

可以看到其炸了三个 error 级别的通知,因为在配置的时候提供的级别就是 error

第一个 Missing semicolon,就是表示没有分号。
第二个 Expected indentation of 2 spaces but found 4,表示应该需要2个锁进,但其实有4个。
第三个 Strings must use singlequote,表示字符串应使用单引号包裹。

eslint 通过提供的配置规则来检查代码,发现不符合规则的部分就会告诉你错误。

如果把他提供的错误都修好,代码检测就会正常通过。

// ./src/index.js
var number = 1;

if (number < 10) {
  console.log('咕咕?');
}

图片描述

如果放心把修复的权利交给 eslint,可以使用 eslint ./src/**/*.* --fix 命令,来修复这些报错。

// package.json
{
  "scripts": {
    "fix": "eslint ./src/**/*.* --fix"
  }
}

图片描述

增加 fix 命令后执行 npm run fix,就会根据配置修复报错。

eslint --init 命令会调用 eslint 并以交互问答方式来快速创建一个配置文件。

2. 小结

ESLint规则有许多,还有很多大厂使用的预设规范,ESLint 也采用了配置项的方式可以配置。

对团队规范的检查其实就是将团队内的规则映射到 ESLint 的规则上。

许多编辑器和 IDE 都有对 eslint 规则的分析,从而对代码进行静态检查,在推送代码前就可以处理掉很多问题,通常情况下代码的规范检查发生在 git commit 的时候,git 提供了对应阶段的钩子。

如果需要对样式进行检查,可以考虑使用 stylelint, 使用方式和 eslint 大同小异。

前置知识
什么是JavaScript 开发与学习环境准备 调试方案
基础
JavaScript 变量 JavaScript 数据类型 JavaScript if 语句 JavaScript for 语句 JavaScript 算数运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 表达式 JavaScript 函数 JavaScript 对象 JavaScript 字符串 JavaScript 数字 JavaScript 数组 JavaScript switch 语句 JavaScript while 语句 JavaScript break与continue JavaScript with document.cookie
内置对象
JavaScript Function JavaScript Math JavaScript Date JavaScript RegExp JavaScript JSON
JavaScript 与 DOM
什么是DOM DOM和JavaScript的关系 获取和操作 DOM 节点 JavaScript DOM与事件 JavaScript DOM 事件绑定 JavaScript DOM 事件对象 JavaScript DOM 事件流 JavaScript DOM 事件优化 JavaScript DOM 自定义事件
表单处理
使用 JavaScript 校验表单
BOM
BOM window 对象 常用的 BOM 相关对象 BOM 常用属性和方法
AJAX
JavaScript AJAX
进阶知识
JavaScript 异常处理 JavaScript 三元运算符 JavaScript 逗号操作符 JavaScript void JavaScript typeof JavaScript delete JavaScript debugger JavaScript getter &setter JavaScript 原型 JavaScript new操作符和构造函数 JavaScript instanceof JavaScript this JavaScript 严格模式 JavaScript 作用域 JavaScript 闭包 JavaScript 变量提升 JavaScript 对象包装器
常用库
jQuery Lodash moment.js swiper
进阶指南
ECMAScript6 Node.js Babel CSS 预处理器 代码规范 TypeScript Web Components 小程序 Vue / React / Angular JavaScript 关键字
常见疑点与误区
分号问题 对象属性访问问题 this 使用问题 浮点数精度问题 独一无二的 NaN 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源