如何仅禁用Prettier对CSS导入语句的格式化？

问题描述 #

需要保持指定顺序的CSS导入语句：

import '../styles/globals.css';
import '../public/assets/css/site.css';
import '../public/assets/css/responsive.css';
import '../public/assets/css/icons.css';

但Prettier自动将其格式化为字母排序后的顺序，导致responsive.css排在site.css之前，响应式样式无法生效：

import '../public/assets/css/icons.css';
import '../public/assets/css/responsive.css';
import '../public/assets/css/site.css';
import '../styles/globals.css';

当前.prettierrc配置：

{
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "printWidth": 120
}

解决方案：局部禁用Prettier格式化 #

使用Prettier提供的块级忽略注释，将需要保留顺序的导入语句包裹起来，即可跳过这部分的自动排序：

/* prettier-ignore-start */
import '../styles/globals.css';
import '../public/assets/css/site.css';
import '../public/assets/css/responsive.css';
import '../public/assets/css/icons.css';
/* prettier-ignore-end */

说明 #

• /* prettier-ignore-start */ 标记格式化忽略的起始位置
• /* prettier-ignore-end */ 标记格式化忽略的结束位置
• 仅在这两个注释之间的代码不会被Prettier处理，其他代码仍保持正常格式化

内容的提问来源于stack exchange，提问作者Ubeydullah Yılmaz