项目添加ESLint

1. 安装 

yarn add eslint -D

2. 生成配置文件

npx eslint --init

√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser, node
√ What format do you want your config file to be in? · JavaScript

3. 检查代码

 

npx eslint ./

npx eslint \"apps/**/src/**/*.{js,jsx}\" --config .eslintrc.json

 

 

其他

 

plugins: 新增一些规则，然后在rules中使用

extends集成: 使用别人的配置, 如果有冲突的话就rules自己定义

 

 

 

 

常见错误修改

1. !xxx.hasOwnProperty(key);    =>  !Object.prototype.hasOwnProperty.call(xxx, key); 切忌不要把 !xxx 直接复制过来，因为是取反，永远bool值
2. const abc = useSelector(xxx) || [];    然后abc在 useCallback中的依赖参数中使用了，  因为存在[] 所以永远会重新渲染
   修改方法：const abc = useSelector(xxx)   然后在使用abc的地方 (abc || []).map .....

3. const abc = () => async () => {

     new Promise(async (res, rej) => {

     if() return xxx
     if() throw xxx

   }) 

   }

    ===>

   const abc = () => async () => {
     if() return xxx
     if() throw xxx
   }

    

4. 不好加propTypes的情况

function happy() {
  let name = 'Jack';
  const array1 = [
    {
      abc({ id }) {
        console.log(name + id);
      },
    },
  ];

  const array2 = [
    {
      abc: arg => bbc(arg, name),
    },
  ];

  array1[0].abc({ id: 20 });
  array2[0].abc({ id: 50 });
}

const bbc = ({ id }, name) => {
  console.log(name + id);
};

happy();

 

无法直接对happy添加propTypes来验证abc中的id，只能把它抽出来

5. 错误修复(应该和npm run build区分开来，不能在跑了ant docker-build的命令后对文件进行改动， 而是只应该提醒)

{
 "fix": "eslint src/**/.{js,jsx} --fix --config .eslintrc.js"   
}