前端项目实践过程中的小tip

记下做项目时需要注意的小点，后续遇到的话会再更新~
ps：有些其实写了很久，没有放出来

Visual Studio Code 装饰器提示“experimentalDecorators”

给公司项目自定义加了eslint检查后发现，发现一些装饰器写法会有如图提示，虽无伤大雅，但就是很难受（冒红点了）
更改如下：

1. visual code更改（mac）
   打开code->首选项->设置，搜索experimentalDecorators，会出现以下配置。若想全局生效，则在用户tab中打勾；如只想在当前工作区中生效，则在工作区中单独打勾（若是代码层面，只要在对应的tab中把javascript.implicitProjectConfig.experimentalDecorators设为true）
   
2. 若项目的根目录中存在jsconfig.json或tsconfig.json文件，可以在其中添加experimentalDecorators: true，如：

{
  "compilerOptions": {
  	"experimentalDecorators": true
  }
}

eslint注释小记

1. 在js中添加/* eslint-disable */ ，可忽略后面的eslint检查
2. 在js的某段代码的首尾插入/* eslint-disable */和/* eslint-enable */，可忽略这段代码的检查，其余还是参与检查
3. 针对某一行的禁用检查// eslint-disable-line
4. 针对某一行的部分语法检查，如不想检查这一行的分号，变量数字赋值，可设为// eslint-disable-line quotes, semi, no-magic-numbers
5. 针对下一行的禁用检查和部分禁用检查// eslint-disable-next-line 和 // eslint-disable-next-line quotes, semi, no-magic-numbers
6. 忽略全局变量/* global 变量名 */

i++竟然在谷歌的一些版本上不是整数

之前做项目无缝逐条滚动时，发现了这个问题，导致了一些浏览器的逐条滚动变成无缝不停滚动，谷歌版本70.0.3538.77

sort的注意点

mac上的一些safari浏览器对sort返回-1或者1无效，需改成a-b，如

var numbers = [4, 2, 5, 1, 3]; 
numbers.sort((a, b) => -1);  // 可能会无效，需改成以下
numbers.sort((a, b) => a - b); 

vue项目打包会丢失-webkit-box-orient

如果要用css设置多行省略，在配置了autoprefixer插件的情况下，需要设置成

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

不然打包的时候会丢失-webkit-box-orient，原因是autoprefixer除了会帮自动增加前缀，也会自动删除旧的前缀，除了可以用上面的方法改，也可以直接改打包文件，详情可看autoprefixer的插件说明

flex:1中的子元素设置css省略号无效

当项目中用flex布局时，我们会经常用到flex:1,flex:2,并且在里面又有子元素，但是当某个子元素用css省略号时，会发现无效，如：
html

<div class="text">
  <i>laiee</i>
  <div class="text__tip">
    <div class="text__t">
  laieelaieelaieelaieelaieelaieelaieelaieelaieelaieelaieelaieelaieelaieelaiee
    </div>
  </div>
</div>

css

.text {
  width: 200px;
   height: 100px;
   display: flex;
   background: khaki;
 }
 .text__tip {
   flex: 1;
   padding-left: 20px;
 }
 .text__t {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }

为了能正常显示，我们就要把父元素的css增加width:0或overflow: hidden,
如：

.text__tip {
  flex: 1;
  overflow: hidden;
  padding-left: 20px;
}
// 或者为
.text__tip {
  flex: 1;
  width:0;
  padding-left: 20px;
}

两个内联元素相连会出现间隔

<div class="text">
  <span>54444422</span>
  <span>fffff</span>
 </div>

解决办法

1. 为父节点设置字体大小为0，在给子节点设置对应的字体大小

.text {
   font-size: 0;
}

2. 牺牲html的排版，子元素无缝

<div class="text">
  <span>54444422</span><span>fffff</span>
</div>

3. 改为flex或者table布局

.text {
   display: flex;
   或
   display: table;
}