Выяснить, как автоматически сортировать импорт при сохранении, было намного сложнее, чем мне хотелось бы признать. Может быть, это потому, что я особенно разборчив в порядке, или я хотел, чтобы он хорошо интегрировался с инструментами, которые я уже использую. В любом случае, я понял это, и вот как я это сделал.
Требования к решению
- Настраиваемый заказ. Я хочу сначала импортировать React
- Интегрируется с VS Code и запускается при сохранении
- Использует ESLint (предполагаю, что у вас уже установлен ESLint)
Как это сделать
- Установите Расширение ESLint.
npm i eslint-plugin-simple-import-sort -D- Откройте настройки VS Code и найдите
codeactionsonsave, затем нажмитеEdit in settings.json.
3. Добавьте следующую конфигурацию. Это говорит VS Code запускать eslint --fix при сохранении файла.
"editor.codeActionsOnSave": {
"source.fixAll": true
}
4. Добавьте следующую конфигурацию в ваш файл .eslintrc.json.
{
"extends": [],
"plugins": ["simple-import-sort"],
"rules": {
"simple-import-sort/imports": "error",
"simple-import-sort/exports": "error"
},
"overrides": [
{
"files": ["**/*.js", "**/*.ts", "**/*.tsx"],
"rules": {
"simple-import-sort/imports": [
"error",
{
"groups": [
// `react` first, `next` second, then packages starting with a character
["^react$", "^next", "^[a-z]"],
// Packages starting with `@`
["^@"],
// Packages starting with `~`
["^~"],
// Imports starting with `../`
["^\\.\\.(?!/?$)", "^\\.\\./?$"],
// Imports starting with `./`
["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
// Style imports
["^.+\\.s?css$"],
// Side effect imports
["^\\u0000"]
]
}
]
}
}
]
}
5. При необходимости запустите npx eslint . —-fix, чтобы выполнить начальный проход по вашему проекту.
Вот и все!
Вы можете настроить переопределения по своему вкусу. Проверьте eslint-plugin-simple-import-sort для получения дополнительной документации.
