eslint和prettier打架?

前端 0 845 0
发表于: 2022-10-10 06:40:33

简介: 用最小case测试~

prettier和eslint

eslint其实最主要是是语法校验,但是eslint也有一丢丢的格式化方面校验,那prettier也是做代码格式化的,两者之间就会打架,本篇文章主要讲将如何让eslint和prettier不起冲突,文章的结尾总结以eslint怂了结尾hhh

假设eslint使用了airbnb:

// .eslintrc.js
console.log(' INFO  读取了: .eslintrc.js');
module.exports = {
  extends: [
    "airbnb-base", // airbnb要求字符串是单引号
  ],
};

此时eslint就会要求字符串都使用单引号(因为airbnb要求的),而我们的代码的字符串没有使用单引号,而使用了双引号的话:

// a.js
const a = "1";

执行npx eslint --config ./.eslintrc.js a.js命令的时候,就会报错:

➜  utils git:(master) ✗ npx eslint --config ./.eslintrc.js a.js
 INFO  读取了: .eslintrc.js
 INFO  读取了: .eslintrc.js

/Users/huangshuisheng/Desktop/hss/github/billd/packages/utils/a.js
  1:7   error  'a' is assigned a value but never used  no-unused-vars
  1:11  error  Strings must use singlequote            quotes

✖ 2 problems (2 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

➜  utils git:(master) ✗ 

注意这是airbnb的eslint规则,本质还是是eslint报的错,我们直接改成将a.js文件里的字符串改成单引号就好了。

// a.js
const a = '1';

此时执行npx eslint --config ./.eslintrc.js a.js命令的时候,quotes报错就没有了:

➜  utils git:(master) ✗ npx eslint --config ./.eslintrc.js a.js
 INFO  读取了: .eslintrc.js
 INFO  读取了: .eslintrc.js

/Users/huangshuisheng/Desktop/hss/github/billd/packages/utils/a.js
  1:7  error  'a' is assigned a value but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

➜  utils git:(master) ✗ 

但是,如果我们的项目里面使用了prettier的话,或者说我们的项目并没有安装prettier这个npm包,但是项目里面有prettier的配置文件.prettierrc.js:

// .prettierrc.js
console.log(' INFO  读取了: .prettierrc.js');
module.exports = {
  singleQuote: false, // 默认为false。即要求:const a = "1";,可改为true,即要求const a = '1';
};

而我们的vscode编辑器又安装了prettier插件,那么编辑器的插件就会读取这个.prettierrc.js配置,然后在保存的时候自动帮我们格式化,此时就会导致编辑器帮我们把字符串的引号全都格式化成双引号,这是编辑器的行为,我们命令行执行eslint命令的时候实际是不会管这个prettier配置文件的!

原本a.js的字符串是单引号,但是由于vscode编辑器配置了prettier插件的原因,保存的时候自动将字符串的单引号改成了双引号:

// a.js
const a = "1";

此时再执行npx eslint --config ./.eslintrc.js a.js命令

➜  utils git:(master) ✗ npx eslint --config ./.eslintrc.js a.js
 INFO  读取了: .eslintrc.js
 INFO  读取了: .eslintrc.js

/Users/huangshuisheng/Desktop/hss/github/billd/packages/utils/a.js
  1:7   error  'a' is assigned a value but never used  no-unused-vars
  1:11  error  Strings must use singlequote            quotes

✖ 2 problems (2 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

➜  utils git:(master) ✗ 

结果一眼就看出来了,prettier配置文件的打印没有输出,说明了eslint并没有读取这个prettier文件,而结果也是报错说字符串必须使用单引号,其实对eslint来说只要是字符串使用了双引号,eslint就会给你报错,eslint才不管是你手写的双引号还是编辑器给你格式化成的双引号。

eslint-plugin-prettier

此时就会有一个问题,我希望Airbnb的eslint规则生效,又希望我的prettier规则也生效,那么就得让eslint和prettier产生关联,那么首先就先安装这两插件

npm install --save-dev eslint-plugin-prettier prettier

然后修改.eslintrc.js

// .eslintrc.js
console.log(' INFO  读取了: .eslintrc.js');
module.exports = {
  extends: [
    "airbnb-base", // airbnb要求字符串是单引号
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
};

此时的.prettierrc.js

// .prettierrc.js
console.log(' INFO  读取了: .prettierrc.js');
module.exports = {
  singleQuote: false, // 默认为false。即要求:const a = "1";,可改为true,即要求const a = '1';
};

此时的a.js

// a.js
const a = '1';

执行 npx eslint --config ./.eslintrc.js a.js

➜  utils git:(master) ✗ npx eslint --config ./.eslintrc.js a.js
 INFO  读取了: .eslintrc.js
 INFO  读取了: .eslintrc.js
 INFO  读取了: .prettierrc.js

/Users/huangshuisheng/Desktop/hss/github/billd/packages/utils/a.js
  1:7   error  'a' is assigned a value but never used  no-unused-vars
  1:11  error  Replace `'1'` with `"1"`                prettier/prettier

✖ 2 problems (2 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

➜  utils git:(master) ✗ 

此时可以看到结果是 prettier的规则生效了(控制台输出了prettier配置文件里面的打印),prettier要求将字符串的单引号替换成双引号,那么我们就替换试试:

// a.js
const a = "1";

再执行 npx eslint --config ./.eslintrc.js a.js

➜  utils git:(master) ✗ npx eslint --config ./.eslintrc.js a.js
 INFO  读取了: .eslintrc.js
 INFO  读取了: .eslintrc.js
 INFO  读取了: .prettierrc.js

/Users/huangshuisheng/Desktop/hss/github/billd/packages/utils/a.js
  1:7   error  'a' is assigned a value but never used  no-unused-vars
  1:11  error  Strings must use singlequote            quotes

✖ 2 problems (2 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

➜  utils git:(master) ✗ 

可以看到,符合了prettier的规则后,又轮到了Airbnb的eslint的规则报错了,Airbnb的eslint的规则要求字符串得是单引号,这不又冲突了吗,你可以将prettier配置文件改成单引号,这样就肯定不会冲突了,因为都是单引号

修改prettier配置

// .prettierrc.js
console.log(' INFO  读取了: .prettierrc.js');
module.exports = {
  singleQuote: true, // 默认为false。即要求:const a = "1";,可改为true,即要求const a = '1';
};

修改a.js

// a.js
const a = '1';

再执行 npx eslint --config ./.eslintrc.js a.js

➜  utils git:(master) ✗ npx eslint --config ./.eslintrc.js a.js
 INFO  读取了: .eslintrc.js
 INFO  读取了: .eslintrc.js
 INFO  读取了: .prettierrc.js

/Users/huangshuisheng/Desktop/hss/github/billd/packages/utils/a.js
  1:7  error  'a' is assigned a value but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

➜  utils git:(master) ✗ 

此时就不冲突了,因为我们都使用了单引号,我们把把a.js的字符串改成双引号再看看结果

// a.js
const a = "1";