如何配置eslint-plugin-import将CSS模块导入置于首行？

要实现CSS/SCSS文件的导入置于所有其他模块之前，你需要调整eslint-plugin-import的import/order配置，通过自定义分组来优先处理样式文件：

1. 在groups数组最前端添加自定义分组"styles"，让它成为优先级最高的导入组
2. 在pathGroups中为样式文件匹配规则指定group: "styles"，确保样式文件被归到这个优先组

修改后的完整import/order配置如下：

"import/order": [
    "warn",
    {
        "groups": ["styles", "builtin", "object", "external", "internal", "type", "parent", "sibling", "index"],
        "pathGroups": [
            {
                "pattern": "~/**",
                "group": "internal",
                "position": "after"
            },
            {
                "pattern": "**/*.{css,scss}",
                "group": "styles",
                "position": "before"
            }
        ],
        "newlines-between": "always"
    }
]

配置说明 #

• 自定义的"styles"组放在groups数组最前面，确保所有样式导入排在最顶端
• pathGroups中的样式匹配规则会把所有.css/.scss文件归类到"styles"组，position: "before"保证它们在该组内的最前面（当前组只有样式文件，可省略，但配置更严谨）
• 保留你原有的newlines-between: "always"设置，确保不同组的导入之间有空行，和你预期的导入格式一致

如果你的项目还用到其他样式后缀（如.less），只需扩展pattern即可：

"pattern": "**/*.{css,scss,less}"

内容的提问来源于stack exchange，提问作者Epple