最近，我发现保存文件时可以在VSCODE中自动排序导入。为此，您只需要在设置中设置标志
cmd+shift+p → Open User Settings (JSON)
{
...
"editor.codeActionsOnSave": {
"source.organizeImports": true
}
}
使用Eslint进行更多颗粒状设置
虽然这确实对导入进行了排序，但我需要更多的粒状设置。例如，我想在顶部和群体样式和媒体导入中导入反应。
通过使用ESLINT和插件，这是可能的。对于VSCODE，可以在保存文件之前运行eslint --fix。因此，您可以将其添加到您的设置中。
{
...
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
插件eslint-plugin-import可能是最常见的，并且具有许多配置选项。
我选择了eslint-plugin-simple-import-sort，因为它具有较少的功能，并且更易于配置。我需要的只是导入分组。
首先安装eslint插件：
npm install --save-dev eslint-plugin-simple-import-sort
然后在eSlint配置文件中配置插件。 .eslintrc.json：
{
...
"plugins": [
"simple-import-sort"
],
"rules": {
"simple-import-sort/imports": [
"error",
{
"groups": [
// 1. `react` and packages starting with alphanumeric characters
[
"^react$",
"^\\w"
],
// 2. vendor packages
[
"^@"
],
// 3. realative imports starting with "../"
[
"^\\.\\./?$"
],
// 4. realative imports from same folder "./"
[
"^\\./?$"
],
// 5. style imports
[
"^.+\\.(css|scss)$"
],
// 6. media imports
[
"^.+\\.(gif|png|svg|jpg)$"
],
// 7. side effect imports at the end
[
"^\\u0000"
]
]
}
]
}
如果要在文件夹中修复所有文件，则应该可以运行npx eslint --fix ./dir/subdir，而不是打开并保存每个文件。但是，请确保在这样做之前要有干净的git;）
希望这会有所帮助，如果您有任何疑问和/或建议，请随时发表评论。