js编码规范（参考、推荐、强制（含eslint））

欠踹的背影007

已于 2023-04-03 10:16:15 修改

阅读量322

点赞数 1

文章标签： javascript 开发语言前端

于 2023-03-31 15:34:12 首次发布

本文链接：https://blog.csdn.net/qq_33396780/article/details/129881449

版权

eslint详细配置：http://www.verydoc.net/eslint/

1、编码风格

1.1 缩进统一使用两空格的方式

eslint：indent

1.2 在语义结尾处必须使用分号

eslint：semi

1.3 逗号的多行结构，不使用行首逗号

eslint： comma-style

// bad
const person = {
  name: 'dx'
  , age: 18
};

// good
const person = {
  name: 'dx',
  age: 18
};

2、变量申明

2.1 使用 const 或 let 声明

eslint: no-var

2.2 优先使用const，当变量会被重新赋值时才使用let

eslint：prefer-const

2.3 一条声明语句只能声明一个变量

eslint: one-var

// bad
const name = 'dx', age = 18

// good
const name = 'dx'
const age = 18

2.4 声明的变量必须被使用

eslint: no-unused-vars

2.5 如果老项目不支持es6，采用var声明，不允许在声明前使用变量

尽管var有声明提升，但不允许这样使用。
eslint： no-use-before-define

2.6 变量哪里使用哪里声明，不要在文件顶部统一声明（常量一般可以在顶部声明）

// bad
let a = b = c = 1;

// good
let a = 1;
let b = a;
let c = a;

2.10 将let 和const 分别归类

// bad
let name = 'dx';
const sex = ['男', '女']
let age = 18;
const week = [1, 2, 3, 4, 5, 6, 7];

// good 
const sex = ['男', '女']
const week = [1, 2, 3, 4, 5, 6, 7];

let name = 'dx';
let age = 18;

3、数据类型

3.1 不要使用 new Number/String/Boolean，不会有任何好处，还会导致变量是一个object，可能会引起bug

eslint: no-new-warppers

var stringObject = new String("Hello world");
console.log(typeof stringObject);       // "object"

var text = "Hello world";
console.log(typeof text);               // "string"

var booleanObject = new Boolean(false);
if (booleanObject) {    // all objects are truthy!
    console.log("This executes");
}

// bad
var stringObject = new String("Hello world");
var numberObject = new Number(33);
var booleanObject = new Boolean(false);

var stringObject = new String;
var numberObject = new Number;
var booleanObject = new Boolean;

// good
var text = String(someValue);
var num = Number(someValue);

var object = new MyString();

3.2 某些数组方法的回调函数必须包含return，以免产生误用

map，filter，from，every，find，findIndex，reduce，reduceRight，some，sort
eslint：array-callback-return

3.3 尽可能地使用解构来获取对象的属性

eslint：prefer-destructuring

// bad
function getData(person) {
  const name = person.name;
  const age = person.age;
  return `${name} 今年 ${age}`;
}

// good
function getData(person) {
  const {name, age} = person;
  return `${name} 今年 ${age}`;
}

// best
function getData({name, age}) {
  return `${name} 今年 ${age}`;
}

3.4 不允许直接在对象上调用`Object.prototypes`上的方法，这些方法可能会被对象上的属性覆盖

比如hasOwnProperty、isPrototypeOf

const obj = {
  name: 'dx',
  age: 18,
  'data-school': '重庆工商大学',
  'id card': 'xxxxx',
}
// bad
console.log(obj.hasOwnProperty('name'));

// good
console.log(Object.prototype.hasOwnProperty.call(obj,'name'));

3.5 函数风格

函数只有一条return语句时，{}和return不写

// bad
const add = (a, b) => {
  return {
    a + b;
  }
}

// good
const add = (a, b) => a + b;

函数只有一个参数的时候，（）不写

// bad
const test = (bad) => `this is ${bad}`;

// good
const test = good => `this is ${good}`;

当 return内容为对象或者多行时，需要使用（）

// bad
const person = name => {
  name,
  age: 18
}

// good
const person = name => ({
  name,
  age: 18
})

使用es6的默认参数语法

// bad
const add = (a, b) => {
  a = a || 0;
  b = b || 0;
  return a + b;
}

// good
const add = (a = 0, b = 0) => a + b;

函数的复杂度不应过高，参数不应过多

如果函数过于复杂，参数太多，不利于维护和使用，是否可以考虑将函数拆分，或将参数以对象的方式传递

4、模块

4.1 不要使用多个import 对同一个文件导入

eslint: no-duplicate-imports

// bad
import React from 'react';
import { useEffect } from 'react';

// good
import React, { useEffect } from 'react';

4.2 请将import 语句放在文件的最顶端

不要将导入的内容直接export导出

这样虽然很简洁，但不利于阅读

// bad
export { Component } from 'React';

// good
import { Component } from 'React';
export default Component;

4.3 一个模块内只有一个导出项时，请使用export default

// bad 
export a;

// good
export default a;

5、操作符

5.1 使用严格相等运算 `===` `！==` 而不依赖于 `==` `！=` 的隐式类型转换

5.2 避免三元表达式嵌套

会降低代码的阅读性
eslint：no-nested-ternary

// bad
foo ? baz === qux ? quxx() : foobar() : bar();

// good
if (foo) {
  thing = bar;
} else if (baz === qux) {
  thing = quxx;
} else {
  thing = foobar;
}

5.3 避免不必要的三元表达式

eslint：no-unneeded-ternary

// Bad
var isYes = answer === 1 ? true : false;

// Good
var isYes = answer === 1;

6、控制语句

6.1 for-in 循环需要对key值进行判断

因为for-in循环会将原型链上的方法或者属性也遍历出来

eslint： fuard-for-in

var foo = {
	a: "lv1",
	__proto__: {
		b: "lv2",
		__proto__: {
			c: "lv3",
			__proto__: {
				c: "lv4",
			}
		}
	}
}

// bad
for (key in foo) {
    doSomething(key);
}

// good
for (key in foo) {
    if (Object.prototype.hasOwnProperty.call(foo, key)) {
        doSomething(key);
    }
}
或
for (key in foo) {
    if ({}.hasOwnProperty.call(foo, key)) {
        doSomething(key);
    }
}

7、其他

7.1 禁止使用eval

这可能导致注入攻击。
eslint：no-eval

// bad
this.eval("var a = 0");

7.2 交互禁止使用alert

alert、confirm、prompt这类原生的交互框，会让整个页面的程序停下来，给人一种页面出错的错觉。
如果需要使用警告框，提示框，请自己封装或者使用ui组件库。
eslint： no-alert

7.3 no-debugger

在开发中使用了，你可能在线上忘记关闭它，js不需要debugger也可以发现错误。
eslint: no-debugger

7.4 生产环境禁止使用console ⭐⭐

可以通过webpack的配置，或者框架的配置，自动去除掉生产环境的console语句
eslint：no-console

8、命名

8.1 小驼峰（camelCase）命名原始对象、对象、函数、实例

const handleChange = () => {
}

8.2 大驼峰命名类、构造函数、type、interface、组件名

type GetNameListParamsType = {
...
}

function Pepole(name, age) {
	this.name = name;
	this.age = age;
}

const dx = new People('dx', 18);

8.3 常量用全部大写字母，下划线分隔模式

const PUBLIC_SEX = ['男'，'女']

8.4 命名不要以下划线开头或结尾

// bad
const __fileName__ = 'filename'

8.5 不要使用保留字命名

js保留关键字 https://www.runoob.com/js/js-reserved.html

8.6 常量尽量在公共文件中声明，业务侧使用