代码之家 › 专栏 › 技术社区 › Epple

如何将订单导入样式css模块格式化为eslint插件导入中的第一行?

eslint reactjs javascript

Epple · 技术社区 · 2 年前

我正在尝试为我的项目配置ESLint,使用 eslint-plugin-import 来编排模块导入顺序,但我有一个css模块样式的例子。我想把样式css模块导入放在第一行。如何配置以获得预期效果? 以下是我的lint配置:

.eslintrc.json

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

我的期望:

import '../styles/style.css'; 

import React from 'react';

import * as utils from '../utils'

1 回复 | 直到 2 年前

prabu naresh 2 年前

要将ESLint配置为将样式CSS模块导入放在顶部,您可以按如下方式调整ESLint的配置:

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

推荐文章

srbrills · ESLint预处理层:分析错误:意外的令牌

1 年前

Get Off My Lawn · 如何让eslint选择具有特定类的className的jsx元素?

1 年前

Ole · 在eslint推荐的配置中添加忽略项?

1 年前

Jim · ESLint:为什么没有未使用的表达式失败?

1 年前

user3086509 · wait对这种表达没有影响,但显然有

2 年前

Relm · React Eslint,如果组件props Type需要一个prop,但组件没有使用它,则发出警告

2 年前

Sergiu Nimat · 一旦我们更新了Node版本,如何更新NPM和解决方案相关的前端库/包?

2 年前

Arnaud Denoyelle · 避免混淆2种不同的ID类型

2 年前

Thanh-Quy Nguyen · 导入/订单无法识别未命名的导入?

2 年前

myol · 重写返回任意的函数类型签名

2 年前