推荐的 JS 代码风格，以及 ESLlint 配置及其说明

最新推荐文章于 2022-11-25 14:47:35 发布
最新推荐文章于 2022-11-25 14:47:35 发布
阅读量257 收藏
点赞数
分类专栏： JavaScript 开发规范
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhu562002124/article/details/109602915
版权

#JS 代码风格

强制在括号内使用空格
"array-bracket-spacing": [1, "always"]
禁止或强制在代码块中开括号前和闭括号后有空格
"block-spacing": [1, "always"]

示例：

// BAD
function foo() {return true;}

if (foo) { bar = 0;}

function baz() {let i = 0;
    return i;
}

// GOOD
function foo() { return true; }

if (foo) { bar = 0; }
大括号风格要求，强制大括号与关键词在同一行
"brace-style": [1, "1tbs", { "allowSingleLine": true }]

推荐做法：

function foo() {
  return true;
}

if (foo) {
  bar();
}

if (foo) {
  bar();
} else {
  baz();
}

try {
  somethingRisky();
} catch(e) {
  handleError();
}

// when there are no braces, there are no problems
if (foo) bar();
else if (baz) boom();
要求在逗号周围使用空格
// 逗号前无需空格，逗号后必须空格
"comma-spacing": [1, { "before": false, "after": true }]

推荐做法：

var foo = 1, bar = 2
    , baz = 3;
var arr = [1, 2];
var arr = [1,, 3]
var obj = {"foo": "bar", "baz": "qur"};
foo(a, b);
new Foo(a, b);
function foo(a, b){}
a, b
逗号风格
// "last" 要求逗号放在数组元素、对象属性或变量声明之后，且在同一行
"comma-style": [1, "last"]

推荐做法：

var foo = 1, bar = 2;

var foo = 1,
    bar = 2;

var foo = ["apples",
           "oranges"];

function bar() {
    return {
        "a": 1,
        "b:": 2
    };
}
强制在计算的属性的方括号中使用一致的空格
"computed-property-spacing": [1, "always"],

推荐写法：

obj[ foo ]
obj[ 'foo' ]
var x = {[ b ]: a}
obj[ foo[ bar ] ]
禁止在函数标识符和其调用之间有空格
"func-call-spacing": [1, "never"]

示例：

// BAD
fn();

fn
();

// GOOD `fn();`
要求函数名与赋值给它们的变量名或属性名相匹配
"func-name-matching": 1

示例：

// BAD
var foo = function bar() {};
foo = function bar() {};
obj.foo = function bar() {};
obj['foo'] = function bar() {};
var obj = {foo: function bar() {}};
({['foo']: function bar() {}});

// GOOD
var foo = function foo() {};
var foo = function() {};
var foo = () => {};
foo = function foo() {};

obj.foo = function foo() {};
obj['foo'] = function foo() {};
obj['foo//bar'] = function foo() {};
obj[foo] = function bar() {};

var obj = {foo: function foo() {}};
var obj = {[foo]: function bar() {}};
var obj = {'foo//bar': function foo() {}};
var obj = {foo: function() {}};

obj['x' + 2] = function bar(){};
var [ bar ] = [ function bar(){} ];
({[foo]: function bar() {}})

module.exports = function foo(name) {};
module['exports'] = function foo(name) {};
禁止命名的 function 表达式
"func-names": [2, "never"]

示例：

// BAD
Foo.prototype.bar = function bar() {};

(function bar() {
    // ...
}())


// GOOD
Foo.prototype.bar = function() {};

(function() {
    // ...
}())
箭头函数体不可随意换行
"implicit-arrow-linebreak": [2, "beside"]

示例：

// BAD
(foo) =>
  bar;

(foo) =>
  (bar);

(foo) =>
  bar =>
    baz;

(foo) =>
(
  bar()
);

// GOOD
(foo) => bar;

(foo) => (bar);

(foo) => bar => baz;

(foo) => (
  bar()
);

(foo) => {
  return bar();
}

(foo) =>
{
  return bar();
}
代码缩进 4 空格
"indent": [2, 4]
强制在对象字面量的键和值之间使用一致的空格
"key-spacing": [2, {                                            
	"beforeColon": false, 
	"afterColon": true, 
	"mode": "strict" 
}]

示例：

// BAD
var obj = { "foo" : 42 };

var obj = { "foo":42 };

// GOOD
var obj = { "foo": 42 };
强制关键字周围必须有空格
"keyword-spacing": [2, { "before": true, "after": true }]

好的做法：

if (foo) {
    //...
} else if (bar) {
    //...
} else {
    //...
}
要求在注释周围有空行
"lines-around-comment": [1, {                                   
	"beforeBlockComment": true,	// 要求在块级注释之前有一空行
	"beforeLineComment": true,	// 要求在行级注释之前有一空行
}]

示例：

var night = "long";

/* what a great and wonderful day */
var day = "great"
要求在类成员之间出现空行
"lines-between-class-members": [2, "always"]

示例：

class MyClass {
  foo() {
    //...
  }

  bar() {
    //...
  }
}
嵌套最大深度，指的是 if 和 for 循环等的嵌套最大深度
"max-depth": [2, 5]

错误示范：

function foo() {
    for (;;) { // Nested 1 deep
        let val = () => (param) => { // Nested 2 deep
            if (true) { // Nested 3 deep
                if (true) { // Nested 4 deep
                    if (true) { // Nested 5 deep
                    }
                }
            }
        };
    }
}
强制函数最大行数 80 行，但是老项目无法执行，因为 jquery 主函数完全没上限
"max-lines-per-function": [0, 80]
要求构造函数首字母大写
"new-cap": [2, { "newIsCap": true }]
禁止使用 Array 构造函数
"no-array-constructor": 2

示例：

// BAD
Array(0, 1, 2)

new Array(0, 1, 2)

// GOOD
Array(500)
禁用按位运算符
"no-bitwise": 2

错误示范

var x = y | z;

var x = y & z;

var x = y ^ z;

var x = ~ z;

var x = y << z;

var x = y >> z;

var x = y >>> z;

x |= y;

x &amp;= y;

x ^= y;

x <<= y;

x >>= y;

x >>>= y;
禁止混合使用不同的操作符
"no-mixed-operators": 2

示例：

// BAD
var foo = a &amp;&amp; b < 0 || c > 0 || d + 1 === 0;
var foo = a + b * c;

// GOOD
var foo = a || b || c;
var foo = a &amp;&amp; b &amp;&amp; c;
var foo = (a &amp;&amp; b < 0) || c > 0 || d + 1 === 0;
var foo = a &amp;&amp; (b < 0 || c > 0 || d + 1 === 0);
var foo = a + (b * c);
var foo = (a + b) * c;
禁止空格和 tab 的混合缩进
"no-mixed-spaces-and-tabs": 2
禁止使用嵌套的三元表达式
"no-nested-ternary": 2

示例：

// BAD
var thing = foo ? bar : baz === qux ? quxx : foobar;

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

// GOOD
var thing = foo ? bar : foobar;

var thing;

if (foo) {
  thing = bar;
} else if (baz === qux) {
  thing = quxx;
} else {
  thing = foobar;
}
禁用 Object 的构造函数
"no-new-object": 2

示例：

// BAD
var myObject = new Object();

var myObject = new Object;

// GOOD
var myObject = new CustomObject();

var myObject = {};
禁用 tab
"no-tabs": 1
禁止可以表达为更简单结构的三元操作符
"no-unneeded-ternary": 1

示例：

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

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

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

// Good
var isNo = answer !== 1;
禁止属性前有空白
"no-whitespace-before-property": 1

示例：

// BAD
foo [bar]

foo. bar

foo .bar

foo. bar. baz

foo. bar()
  .baz()

foo
  .bar(). baz()

// GOOD
foo.bar

foo[bar]

foo[ bar ]

foo.bar.baz

foo
  .bar().baz()

foo
  .bar()
  .baz()

foo.
  bar().
  baz()
强制单个语句的位置，禁止单行语句之前有换行
"nonblock-statement-body-position": [2, "beside"]

示例：

// BAD
if (foo)
  bar();
else
  baz();

while (foo)
  bar();

for (let i = 1; i < foo; i++)
  bar();

do
  bar();
while (foo)

// GOOD
if (foo) bar();
else baz();

while (foo) bar();

for (let i = 1; i < foo; i++) bar();

do bar(); while (foo)

if (foo) { // block statements are always allowed with this rule
  bar();
} else {
  baz();
}
强制在花括号中使用一致的空格
"object-curly-spacing": [2, "always"]

示例：

// BAD
var obj = {'foo': 'bar'};
var obj = {'foo': 'bar' };
var obj = { baz: {'foo': 'qux'}, bar};
var obj = {baz: { 'foo': 'qux' }, bar};
var obj = {'foo': 'bar'
};
var obj = {
  'foo':'bar'};
var {x} = y;
import {foo } from 'bar';

// GOOD
var obj = {};
var obj = { 'foo': 'bar' };
var obj = { 'foo': { 'bar': 'baz' }, 'qux': 'quxx' };
var obj = {
  'foo': 'bar'
};
var { x } = y;
import { foo } from 'bar';
每个作用域允许出现多个变量声明，但对连续的变量声明要求合并为单个声明
"one-var": [2, "consecutive"]

示例：

// BAD
function foo() {
    var bar;
    var baz;
}

function foo(){
    var bar = 1;
    var baz = 2;

    qux();

    var qux = 3;
    var quux;
}

// GOOD
function foo() {
    var bar,
        baz;
}

function foo(){
    var bar = 1,
        baz = 2;

    qux();

    var qux = 3,
        quux;
}
要求在变量声明周围换行
"one-var-declaration-per-line": [2, "initializations"]

好的做法：

// "initializations" 强制每个变量初始化语句换行
var a, b;

let a,
    b;

let a,
    b = 0;
要求尽可能地简化赋值操作
"operator-assignment": [2, "always"]

示例：

// BAD
x = x + y;
x = y * x;
x[0] = x[0] / y;
x.y = x.y << z;

// GOOD
x = y;
x += y;
x = y * z;
x = (x * y) * z;
x[0] /= y;
x[foo()] = x[foo()] % 2;
x = y + x; // `+` is not always commutative (e.g. x = "abc")
强制操作符在换行的行前
"operator-linebreak": [2, "before"]

示例：

// BAD
foo = 1 +
      2;

foo =
    5;

if (someCondition ||
    otherCondition) {
}

answer = everything ?
  42 :
  foo;

// GOOD
foo = 1 + 2;

foo = 1
    + 2;

foo
    = 5;

if (someCondition
    || otherCondition) {
}

answer = everything
  ? 42
  : foo;
禁止分号前有空格
"semi-spacing": [2, { "before": false }]
分号必须在行尾
"semi-style": [2, "last"]

好的做法：

foo();
[1, 2, 3].forEach(bar)

for (
    var i = 0;
    i < 10;
    ++i
) {
    foo()
}
要求语句块之前的空格，即大括号前必须有空格
"space-before-blocks": 2

示例：

// BAD
if (a){
    b();
}

function a(){}

for (;;){
    b();
}

try {} catch(a){}

class Foo{
  constructor(){}
}

// GOOD
if (a) {
    b();
}

if (a) {
    b();
} else {
    c();
}

function a() {}

for (;;) {
    b();
}

try {} catch(a) {}
要求函数圆括号之前有一个空格
"space-before-function-paren": [2, "always"]

好的做法：

function foo () {
    // ...
}

var bar = function () {
    // ...
};

var bar = function foo () {
    // ...
};

class Foo {
    constructor () {
        // ...
    }
}

var foo = {
    bar () {
        // ...
    }
};

var foo = async () => 1
要求中缀操作符周围有空格
"space-infix-ops": 2

好的做法：

a + b

a ? b : c

const a = {b:1};

var {a = 0} = bar;

function foo(a = 0) { }
new、delete、typeof、void、yield 前后要有空格
"space-unary-ops": [2, {                                        
	"words": true,                                            
	"nonwords": false,
}]

好的做法：

// new
var joe = new Person();

// delete
var obj = {
    foo: 'bar'
};
delete obj.foo;

// typeof
typeof {} // object

// void
void 0 // undefined
要求在注释前有空白(空格)
"spaced-comment": [2, "always"]

好的做法

/* eslint spaced-comment: ["error", "always"] */

// This is a comment with a whitespace at the beginning

/* This is a comment with a whitespace at the beginning */

/*
 * This is a comment with a whitespace at the beginning
 */

/*
This comment has a newline
*/
强制在 switch 的冒号右侧有空格
"switch-colon-spacing": [2, {"after": true, "before": false}]
要求在模板标记和它们的字面量之间有空格
"template-tag-spacing": [2, "always"]

好的做法：

switch (a) {
    case 0: foo(); break;
    case 1:
        bar();
        break;
    default:
        baz();
        break;
}
要求箭头函数的箭头之前或之后有空格
"arrow-spacing": [2, { "before": true, "after": true }]

好的做法：

() => {};
(a) => {};
a => a;
() => {'\n'};
强制 generator 函数中 * 号周围有空格
"generator-star-spacing": [1, "both"]

好的做法：

function * generator() {}

var anonymous = function * () {};

var shorthand = { * generator() {} };
扩展运算符及其表达式之间不允许有空格
"rest-spread-spacing": 1

示范：

// BAD
fn(... args)
[... arr, 4, 5, 6]

// GOOD
fn(...args)
[...arr, 4, 5, 6]
要求模板字符串中的嵌入表达式周围有空格，即 ${ vars }
"template-curly-spacing": ["error", "always"]

示范：

// BAD
`hello, ${ people.name}!`;
`hello, ${people.name }!`;

`hello, ${people.name}!`;

// GOOD
`hello, ${ people.name }!`;

`hello, ${
    people.name
}!`;
强制在 yield* 表达式中 * 周围使用空格
"yield-star-spacing": ["error", "both"]

好的做法：

function * generator() {
  yield * other();
}
郄灬灬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
eslint规则以及配置，前端开发结构
m0_61488979的博客
09-09 236
“no-sparse-arrays”: 2,//禁止稀疏数组， [1,2] “no-sync”: 0,//nodejs 禁止同步方法 “no-ternary”: 0,//禁止使用三目运算符 “no-trailing-spaces”: 1,//一行结束后面不要有空格 “no-this-before-super”: 0,//在调用super()之前不能使用this或super “no-throw-literal”: 2,//禁止抛出字面量错误 throw “error”; “no-undef”: 1,//不能有
Eslint 规则说明
05-18 853
1 "no-alert": 0,//禁止使用alert confirm prompt 2 "no-array-constructor": 2,//禁止使用数组构造器 3 "no-bitwise": 0,//禁止使用按位运算符 4 "no-caller": 1,//禁止使用arguments.caller或arguments.callee 5 "no-cat...
JavaScript 编程规范(二)
大灰狼的小绵羊哥哥的博客
03-07 640
1. 总是使用 const 或 let 来声明变量。 不这样做会导致产生全局变量。 我们希望避免污染全局命名空间。 eslint: no-undef prefer-const //bad superPower=newSuperPower(); //good constsuperPower=newSuperPower(); 2. 将所有的 const 和 let 分组 。...
ESLint的使用
duansamve的博客
02-05 1324
1、安装eslint： cnpm i eslint -D 2、vscode中使用ctrl+shift+p快捷键安装eslint配置文件或手动新建一个配置文件.eslintrc.js，或者使用如下的命令行来自动生成： eslint --init .eslintrc 文件内容大体如下： { "env": { "es6": true, "node...
ESLint配置解析
shengjon的博客
11-25 3799
eslint 本身是一个语法规范检查的包。
ESLint 的介绍和使用以及ESLin不能使用的问题
留着鼻涕敲代码
10-30 1962
1.什么是eslint ESLint 是一个代码检查工具，用来检查你的代码是否符合指定的规范（例如： = 的前后必须有一个空格）。 规范 行业推荐的规范； 在创建项目时，我们使用的是 JavaScript == Standard == Style 代码风格的规则 自定义的规范。你和你的团队可以自行约定一套规范 使用ESLint的好处在于：多人协作时代码风格统一 eslint是法官，Standard 是法律 2.JavaScript Standard Style 规范说明 在项目创建之初我们就选
当前流行的JavaScript代码风格指南
10-25
主要介绍了当前流行的JavaScript代码风格指南,同时推荐了一款风格检验工具jshint,可以配合大多数的编辑器统一团队代码风格,需要的朋友可以参考下
JS代码实现电脑配置检测功能
11-28
下面一段代码给大家分享js代码实现电脑配置检测功能，具体代码如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style...
JS版网站风格切换实例代码
12-08
样式表连接,设3种风格，把你要改变的图片背景等写入样式表。 代码如下: <link media=”screen” href=”/css/default.css” rel=”stylesheet” type=”text/css” title=”default” /> <link media=”...
鼠标右键上下文菜单配置js代码插件
06-05
鼠标右键上下文菜单配置js代码插件是一款非常实用的纯JavaScript右键上下文菜单插件。
求求你们了，对自己代码质量有点要求！
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
03-24 76
前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群开篇最近在合并几个项目的代码，把功能拼一拼简称项目拼多多。但是几个系统都没有 eslint 之类的东西，我也不知道怎么想的居然想给 拼多多 加上代码检查。我还真的干了，于是就有了下面这些奇奇怪怪甚至有些可爱的代码。算是给大家做个反面教材。一些示例ps 示例代码来源于网络社区。循环不要声明无用的变量image.p...
eslint使用
weixin_44284981的博客
03-30 631
在vscode的配置 下载eslint插件 下载eslint全局插件 npm install -g eslint // 执行命令 esllint --init // 根据需要选择即可 配置eslint "eslint.enable": true, // 启用/禁用ESLint。 "eslint.alwaysShowStatus": true, "eslint.debug": true, // 启用ESLint的调试模式 "eslint.format.enable":.
关于VUE3.0中的ERROR Failed to compile with error报错 关闭掉eslint严格格式
whica的博客
03-30 4955
ERROR Failed to compile with 1 error 下午7:08:39 error in ./src/components/Shop.vue Module Error (from ./node_modules/eslint-loa
eslint最详细规范整理
wfly blog
08-14 8914
/** * @Description: eslint配置详解 * @author wfd * @date 2020/8/8 14:25 * @detail *1、运行 eslint --init 之后，.eslintrc 文件会在你的文件夹中自动创建 *2、{ * "rules": { * "semi": ["error", "always"], * "quotes": ["error", "double"] * } * .
JS 编码最佳实践，以及 ESLlint 配置及其说明
zhu562002124的博客
11-10 658
#JS 编码最佳实践 强制数组方法的回调函数中有 return 语句，该规则只检查需要有返回值的那些方法，包括 form、 every、 filter、 find、 findIndex、 map、 reduce、 reduceRight、 some、 sort "array-callback-return": 1 不推荐的做法： var indexMap = myArray.reduce(function(memo, item, index) { memo[item] = index; }, {
eslint 规则
weixin_30678349的博客
08-02 193
"no-multi-spaces": "error" // 表达式不能有多余的空格 var a = [1, 2] // error "no-trailing-spaces": "error" // 禁止行尾空格 "quotes": [1, "single"] // 单引号 "object-curly-spacing": ["error", "never"] // 比如import {...
代码校验之eslint
05-08 2599
官方地址：http://eslint.org/ ESLint是一个开源的JavaScript校验插件，由Nicholas C. Zakas 创建于2013六月初。eslint代码校验是一种静态的代码分析，通常用来校验语法的或代码书写风格，但不指定风格。校验规则适用大多数编程语言和编译器，有时也把规则加于到编译过程。     JavaScript是一种动态的弱类型的语言，编写时尤其容易出现语法错
规则 2.13：不同类型的操作符混合使用时，使用括号进行隔离。
Jenya's blog
03-20 357
declare begin     if (('abc' || 'bcd') = 'abcbcd') then         a = 1;     end if; end;
一分钟教你学会配置eslint，还在为风格单双引号，对象末位逗号要不要，引用各种报错而烦恼？(建议收藏！详细中文注释)...
weixin_33915554的博客
04-08 8741
最全的eslint配置大全，我已经加了详细中文注释，只需要找到自己想要的配置就可以了，强烈建议收藏！ 用法非常简单，找到.eslintrc.js下的rules添加对象即可,比如我要把规则原本单引号要变为双引号，那加上"quotes": [1, "double"] 如果违反了规则情况下，这里的数字：0表示不不处理，1表示警告，2表示错误并退...
hbuilder 配置代码风格
最新发布
09-22
HBuilderX中可以通过配置来设置代码风格。对于整体风格，可以遵循javascript和html/wxml的规范。具体的细节调整包括结尾无分号、超过140个字符换行使用单引号、无尾随逗号、箭头函数单个参数不加分号以及函数声明时禁止圆括号前有空格等。此外，也可以准备插件来辅助代码的格式化，例如eslint-js和eslint-vue等。在HBuilderX中也可以设置格式化时保留大括号不换行的格式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值