前端是否有点卷？

[Features]

应届生，入职某小厂，前端大概 15 人团队，lint 规则令人发指

1.比如禁止使用 for 遍历一个数组

2.缩进必须要两个空格，不能使用 tab

3.禁止使用字符串与变量进行 + 操作，必须使用``

4.禁止使用三目运算符

......

我觉得程序员也是一种创意工作吧？

现在搞得有点像写八股文

本来有些功能写起来就很费劲，好不容易想到一个办法

或者从 stackoverflow 找到答案，复制下来还不能直接用😂

搞得挺难受的

不知道大家怎么看严苛的 lint 规则的？

[AoEiuV020]

1234 感觉都没什么，普通的统一风格以及禁止一些没啥好处的炫技代码，

[ztc]

第 4 条为什么不能用？

[AoEiuV020]

@ztc #2 肯定是要求用 if else 呗，确实会有人觉得三目不直观，

[h1104350235]

没啥问题阿，我觉得有代码规范和约束是好事情。

[gaoryrt]

从我角度来看确实是为了团队着想
另，这几个 lint 也限制不了程序员发挥的，放宽心～

[shakaraka]

这个是团队规范，和你自个发挥创意是两回事，写出来的东西是给团队的人看的，每个人风格都不统一别人怎么接手你写的代码

[pengtdyd]

说个笑话：阿里的开源框架不遵守阿里出的 java 开发手册

[rabbbit]

for of 为啥不能用?

[xiangyuecn]

只要钱够多，再怎么不合理的要求都是毛毛雨啦。不然嘛，一边呆着去，否则上去就是一巴掌😂

[rabbbit]

是禁止用 for in 吧?

[Hoshinokozo]

感觉没啥问题，除了禁用三目稍微严苛了点，不过 3 目确实不如直接 if else 语义清晰

[SuperManNoPain]

前端还卷？ 请你来我们 java 阵营看看😅

[IvanLi127]

2 和 3 没啥问题，4 还能理解，1 咋了？

[yuhangch]

同问一，那怎么遍历啊，foreach ，for in ，for of

[cwp374240920]

lint 规则，prettier 风格，跟卷不卷没有关系，一个项目中如果每个人都有自己的风格，都按照自己的创意来写代码，你写的代码别人也不想看，别人写的代码你也不想读，那跟屎山没什么区别。如果对于 lint 规则与风格有意见，可以提出来到组里面大家一起商议一下。
八股文一般指的是你前端 Vue 说说 computed 跟 watch 的区别，dom-diff 算法是怎么实现的，业务代码怎么也跟八股文沾不上边的。
StackOverflow 上面的答案，复制下来不能用，你是不是得看下别人移植过来的器官在你身体上是不是能完美运行，代码知道逻辑自己写应该会更好吧。

前端卷的定义是：下班时间到了，你跟你同事的活都干完了，但是还赖在公司假装没干完，对着电脑假惺惺的写代码；没有活干了，然后疯狂的写一些没有用的轮子来争取 kpi 。（以上只是举例子，请不要真的这么做。）

小厂还是比较自由的，跟组长关系处好了你想怎么玩都可以，前端最起码的写起代码来还是比后端要舒服自由很多的，后端代码是真的又臭又长。

[cwp374240920]

@yuhangch [].map/forEach ?

[ifreego]

for in 会遍历原型链上的 props ，可能会有一些奇怪的 bug

举个例子
const arr = ['a','b','c'];
const indexes = [];

Array.prototype.each = function() {/*blah*/};

for (var index in arr) {
indexes.push(index);
}

indexes; // ['0', '1', '2', 'each']

[TomatoYuyuko]

不让写三目是吧，劳资直接 a = b && 1 || 2 (狗头

[molvqingtai]

如果不是写算法，代码中从不用 for 循环，迭代函数写起来方便语意也更强，

[learnshare]

定 lint 和卷有啥关系，左舵右行影响了交通效率吗？
lint 必须要有，越细致越好，合作的人越多越能发挥价值。

lint 打的就是你：
>复制下来还不能直接用

lint 规则好不好，这个比较主观，不容易做评价。
但随意搬一个规则来用，甚至啪一下全部 prettier ，那肯定是不对的。

[creanme]

@cwp374240920 forEach 性能差，感觉 map 并不适用于不需要返回新的数组的遍历。

[cwp374240920]

@creanme foreach/map/reduce/filter/find 都有明确的使用场景啊....这是数组的原生方法啊...你写前端需要多强的性能去处理数据啊...语义性上清晰便于阅读就是最佳实践了

[Torpedo]

这不说明还不够卷么？

这种代码风格的要求，稍微成熟的点的代码库都会要求的

[sagaxu]

互联网有不卷的吗？

[henryhu]

其他还好，3 目运算多好，用 if else ？太丑了

[sickoo]

这不也没啥，只是你踩得坑少

[statement]

我记得大学课本上就写 要慎重使用三目。 简单的很优雅。复杂的就很不直观

[jiangshanmeta]

开发 eslint 插件搞更严格的 lint 规则的路过

[xylitolLin]

你这 1 、2 、3 、4 看着也没啥问题啊，多人协作还是需要一点条条框框的

[xiaoming1992]

lint 肯定要严格啊，#18 直接通不过我的 lint: a = b && 1 || 2 (&& 和 || 不能在一起，至少要用括号括起来)

p.s. 一般这种都有一键 fix 的，无法 fix 的才需要手动修改

[gauzung]

多人协作开发肯定要 lint
但我个人感觉缩进两格有点太密。。看起来费眼睛
单个三目还好，多个三目嵌套看起来很累

[kwrush]

团队协作严格 linting 有好处，再不济可以 disable 嘛，和卷有什么关系呢
禁用 for 难以理解，大概是禁用 for-in ？
编辑器可以设置 tab 键为两空格
字符串模板可读性强
禁用三元是指这种吧 a?b:c?d:e

[christin]

学到个词就赶紧用用

[QingXuJiaZhi]

球球了，网络新词知道意思就行，没必要强行使用。

[hst001]

跟卷一点关系都没

[daimubai]

因为你不是团队 leader ，所以你只需要管自己舒不舒服。而 leader 则是要让整个团队舒不舒服。我觉得稍微思考下就不难理解这么做的原因，不值得发帖吐槽

[zoffy]

刚好我踩过这些坑

1. for of 限制通常源于 airbnb 的规则，社区里也很多人吐槽，我赞同这个老哥的跟帖
https://github.com/airbnb/javascript/issues/1271#issuecomment-281716212

解决方法可以复制规则源码到自己的 eslint 配置中，删除 for of 限制
https://github.com/airbnb/javascript/blob/1eadb93e377da1e56c3f91f26610e5d0a00738a9/packages/eslint-config-airbnb-base/rules/style.js#L339

2 、3. 不是什么问题

4. 可能说的是嵌套三目表达式，那确实应该禁止

[PerFectTime]

[Features]

@rabbbit 就是 for
for in 遍历数组是有缺陷的，肯定不能用。

[Features]

@IvanLi127 是这种：
for(let i=0;i<arr.length;i++){
//do something
}

[Features]

@ifreego 哎呀，不是 for in 啦，就是 for

[Features]

好吧，看来大家都习惯了
自己读书的时候没人管，爱怎么写怎么写
工作了还是得按流水线的规矩来😂
是我太矫情了

[rayaa]

@cwp374240920 有时候白天划水摸鱼过多，然后到下班代码写不完咋办，算不算卷 XD

[Features]

@yuhangch 只能用 forEach 和 map

[Originalee]

只能 forEach 的话，for await...of 这种场景怎么办呢？

[Originalee]

另外实在不能苟同 4 ，某些场景用三目更直观吧。

[rabbbit]

@Features 强制函数式编程?

[Features]

@rabbbit 只能用 forEach/map

[cwp374240920]

@rayaa 看来你产品催的还不够急

[theprimone]

这跟卷有半毛钱关系吗？ lint 规则而已。。。

[darknoll]

有些秀儿确实喜欢把几个三目运算叠在一起，看的头疼，禁了也是对的

[foolenius]

for(const value of array.values(){} 也不行？

[anjianshi]

真正有创意的内容不是靠语法体现出来的，是算法和奇思妙想，就像唐诗，都是五个字一行七个字一行，不影响每首诗有每首诗的美感

[rabbbit]

@Features 你们用的是 Angular 吗? 要是用 Rxjs 不许用 for 还能理解
要是 Vue React 还不让用 for 三目...

[cyrbuzz]

纯用`map/forEach/filter/find/reduce`怎么实现一个遍历到某内容之后 break 的情况。

[zqx]

eslint 是很没用的东西，只能做到表面很统一，程序的内在逻辑还是程序员本人的思路决定的。
一般的程序员都可以在遵守所有规则的情况下，写出冗余的难以理解的代码。

[kidult]

创意工作？

[walpurgis]

234 都能理解，不让用 for ，那可以用 while 吗，如果也不让用，那就是强制函数式编程，逐项遍历要写递归了，我不太信初中级程序的能玩的溜，问问你们同事怎么写的

我定 eslint
规则也一大堆，但大部分规则都是 auto fixable 的，不会额外增加使用者的心智负担。

[wangyzj]

为什么不让用 tab ？
用空格这个太难受了

[daliusu]

js 本身太灵活了，限制一下是正常情况，接受不了可以去选择 python ，这跟卷不卷有什么关系，几年前大前端时代还没开启的时候 eslint 甚至是面试题，会配置 lint 懂得控制语法使用都算面试优点

[daliusu]

@daliusu #60 那个时候找工作基本会个 jquery 都能找到的都要搞这些，充分说明了这跟卷不卷没有半毛钱关系

[Features]

@wangyzj 还有更难受的，不过看大家都这么说，只能改下自己的习惯吧。

[Features]

@daliusu
以前写了个组件不能直接用比较难受有办法吗？

[GiftedJarvis]

@ztc @AoEiuV020 有人会三元运算套三元运算, 我在屎山里见过

[Perry]

能看出应届生的年轻无知

[momo2278]

这个确实有些严格了，tab 这个，一般编辑器也支持 tab 转空格的，1 和 3 无法理解，各有各的使用场景，4 的话，虽然我们没限制，但自己年轻时特别喜欢写一些很复杂的表达式，自己看着很爽，同事看着很难受，确实不是啥好习惯。

eslint+editorconfig+prettier 还是要搞的，最好有 git hooks 检查，要不然团队里有人用 vsc ，有人用 webstorm ，有人 win ，有人 mac ，加一个分号导致十几处修改，提交一下对方全蓝，工作还怎么搞，这些东西又不会限制你的创意。

[maichael]

@cyrbuzz #54
通常来说，要 break 的场景只有 find ，可以使用 every 和 some 来替代（ https://stackoverflow.com/questions/6260756/how-to-stop-javascript-foreach ），当然，这不符合语义化的要求。
其实在某些场景下（不确定有多少），find 的性能要比 for-loop-break 的要高（ https://www.measurethat.net/Benchmarks/Show/4261/0/find-vs-forof-vs-for-loop ），你可以测下自己的场景试试。

[maichael]

不觉得这是啥内卷，Lint 和 Prettier 都是为了减少无意义的内耗。

[johnnyNg]

我觉得没啥毛病

[rongchuan]

还好吧，如果配置好规则和 git husky,自己还是按自己的写，提交前自动 lint ，没啥感觉。

[zhea55]

@cyrbuzz

break 可以用 some 。

for 是命令式编程。

现在前端全部换声明式了。

只能实现功能的代码，早删除了好，不然都是坑。


这还只是 eslint 呢，建议把 stylelint 也加上。


不然产出的代码，都不想看。

[0xZhangKe]

连三目运算符都觉得不直观那还是不要做程序员了吧。

[cyrbuzz]

@maichael

有意思的代替，单条件用 find 确实是个不错的代替，新技能 Get 。

思考了一下，在与 continue 结合就有点力不从心了，还要做点啥的话也得给变量起个过得去的名字了= =，这样可能没人喷我`for (let i of arrays)`，这样可能会被吊起来锤`let i = arrays.find()`= =。

[garlics]

eslint 的官网每一条规则都会解释为什么怎么做，刚开始写的时候遇到不理解的规则都会去看下，也学到了很多。http://eslint.cn/docs/rules/
https://eslint.org/docs/rules/

[Felldeadbird]

后端来回答：禁用 for 我是无法理解的。 全用 map ，foreach 这些？

[cyrbuzz]

@zhea55

some 有点不是绝对代替，用到 break 的地方往往会出现调用其他函数，赋值等操作。用 some 只拿到了状态，我想取那个值还得在迭代一次。要是在 some 的判断函数里加点赋值调用的私货，那这个 some 很不 some ，至少我个人是排斥的= =。

[Features]

@Felldeadbird 是的，因为 ES6 以后提供了很多新语法来替代。
强迫程序员使用新的语法糖呗

[wanguorui123]

前端后端都一样卷，加上每个人的代码风格，更加混沌

[EvilDevilJin]

这跟卷没啥关系。
这不就是明确规范的编码风格吗。

[banricho]

除了 4 感觉都挺正常的。。。

[wu67]

三元运算有点不太理解, 尽管逻辑多的时候三元会带来阅读困难, 但复杂场景可以改用其他写法, 不是禁用三元的理由.

至于 for, 前端的 for 其实有好几种. for( ; ; ) {} 这种确实不直观, for in 确实也不应该用来遍历数组. 但是 for of 可是没毛病的; 再不济还有各个高阶方法, 例如 forEach map filter reduce.

其他两个没啥毛病

[xiao109]

虽然是创意工作，但是大多数人都只是在屎山上继续搭建新的屎山而已。所以整越少的幺蛾子最好

[360511404]

前端这么可怕吗...
我写客户端的,十个 for 里面估计九个用 for in(大多数情况是快速拿数据)
三目运算更是家常便饭,比如根据 bool 返回不同的结果,一行返回就搞定了

[yazinnnn]

有这种规矩么？
if (bool) return false; else return true;

[hereIsChen]

for in 我用的不少
三目运算符只有简单的单行会用
其他的我觉得正常

[ytll21]

这种 lint 只能产出平庸的程序员。可以让出这个规矩的人看看「黑客与画家」这本书，不要给优秀的程序员套上太多的枷锁，他们懂得怎么写出让人看得懂，又漂亮的代码。

[maplelin]

@IvanLi127 #13 generator(误)

[Features]

@kidult 真就只配码畜吗？

[mxT52CRuqR6o5]

是用的 airbnb 的 eslint 规则吗

[SxqSachin]

不让 for 遍历那需要 for await of 的场景咋搞啊，遍历出来然后 Promise.all 吗？感觉反而增加了复杂度

[lancelock]

这和卷有什么关系

[zhea55]

@cyrbuzz

在 some 的 callback 里面，你可以手动控制是否返回 true 的。

你的逻辑处理完了，return true 就相当于 break 了


你的需求都可以满足。 只能说这个方法，理解起来没有那么直观。

[jiayong2793]

这和卷有什么关系

[AoEiuV020]

@TomatoYuyuko #18
> a = b && 1 || 2
我就这么用过，结果遇到 bug ，
(typeof(DEMO_MODE)!="undefined"&&DEMO_MODE === 'true') ||true
&&后面是个 false, 结果走了||里的 true ，
只好改成三目，

[yaphets666]

@ifreego 所以现在自动补全都是自动补一个 hasOwnProperty

[PungentSauce]

文作写着倒想我哈哈
哈哈我想倒着写作文
口合口合我🐘亻到 zhe 写亻乍文

[sugars]

本来觉得「卷」好像有点过了，但看到「令人发指」蚌埠住了哈，最多用「严格」比较合适。
然后其实 1234 都非常正常，15 人的前端团队其实也不算少了，为了统一这是最基本的了

[lap510200]

统一的代码机构和风格 项目大了会感觉很有意义 别人接手也快

[Leviathann]

虽然我也几乎不用 forof 但是某些需要 early return 的地方怎么办 try catch ？
还有没有三目的语言他们的 if 本身就是表达式，js 的 if 不是表达式，在一些只能用表达式的地方怎么搞？一定得 let xxx ；然后在 if 里赋值？

[huxiaofan1223]

@AoEiuV020 不是三目不直观，是有的人嵌套三目，恶心死了