炫意html5
最早CSS3和HTML5移动技术网站之一

Prettier 和 ESLinit 在 swtich case 缩进上不兼容,该如何解决。

接手一套遗留项目,用了 eslint ,规则如下:

{
'react/display-name': 0,
'react/prop-types': 0,
'camelcase': 0,
'eqeqeq': 0,
'max-len': ['error', 120],
'comma-dangle': ['error', 'always-multiline'],
'space-before-function-paren': ['error', 'never'],
'object-curly-spacing': ['error', 'never'],
'arrow-parens': ['error', 'as-needed'],
indent: ['error', 2],
quotes: ['error', 'single'],
'no-console': 0,
'react/jsx-no-bind': 0,
'react/no-did-update-set-state': 0,
}

项目没有用到 prettier ,相信是依赖 eslint src/js/ --fix 来格式化代码,但是项目代码量非常大且老旧,执行一次命令需要约三分钟,效率过低。由于不希望修改项目原有的 eslint 配置,所以我自己配置了 .prettierrc 给自己用:

{
"printWidth": 120,
"tabWidth": 2,
"singleQuote": true,
"semi": false,
"bracketSpacing": false,
"trailingComma": "es5",
"jsxSingleQuote": true
}

基本上 Prettier 和 ESLinit 的格式已经非常接近了,就是在 switch 语句的缩进格式上不兼容:

switch (name) {
case user:
return true
default:
return false

ESLinit 要求 switch 和 case 必须对齐,而 Prettier 会让 case 缩进一个单位。所以问题来了,能否在不修改 ESLinit 配置的情况下,让 Prettier 不缩进 case 关键字呢?

我查阅过 Prettier 文档,似乎没有对 case 有配置,如果有请告诉我,或者有其他解决办法也感谢分享一下。

PS:其实我有想到临时的解决方案,不完美但是能用。给遇到同类问题的朋友一个解决方案,就是用

/* eslint-disable indent */
/* eslint-enable indent */

把 switch 代码块包裹起来,这样此区域内的缩进检查就不生效了,慎用。欢迎讨论其他解决方案。

回答

我的做法是修改了eslint的缩进

炫意HTML5 » Prettier 和 ESLinit 在 swtich case 缩进上不兼容,该如何解决。

CSS3教程HTML5教程