SOS: how to sort import style

From Nicholas:

I am using the extension in a Vue project.

Importing styles did not meet my expectations. I am not sure if the configuration is incorrect. Therefore, I did not submit an issue but sent you an email for help.

My current configuration is as follows:

 "tsImportSorter.configuration.groupRules": [
   {
     "flags": "scripts",
     "regex": "[.](less|scss|css)$"
   },
   {
     "regex": "@vue/composition-api"
   },
   {},
   {
     "regex": "^@(basecom|bizcom)"
   },
   {
     "regex": "^@/configs/"
   },
   {
     "regex": "^@/constants/"
   },
   {
     "regex": "^@/utils/"
   },
   {
     "regex": "^@/hooks/"
   },
   {
     "regex": "^@/services/"
   },
   {
     "regex": "^@(/views/components/|/components/)"
   },
   {
     "regex": "^@/assets/"
   },
   {
     "regex": "^@/"
   },
   {
     "regex": "^(.*configs/|.*config/|.*_configs_/|.*_config_/)"
   },
   {
     "regex": "^(.*constants/|.*constant/|.*_constants_/|.*_constant_/)"
   },
   {
     "regex": "^(.*utils/|.*util/|.*_utils_/|.*_util_/)"
   },
   {
     "regex": "^(.*services/|.*service/|.*_services_/|.*_service_/)"
   },
   {
     "regex": "^(.*components/|.*component/|.*_components_/|.*_component_/)"
   },
   {
     "regex": "^(.*assets/|.*asset/|.*_assets_/|.*_asset_/)"
   },
   {
     "regex": "^[.]"
   }
 ],

Import Example:

<script setup>
import './styles/foo.scss';
import '@/styles/index.scss';
import './styles/bar.scss';
import 'styles/foo.scss';
import '@/styles/bar.scss';
import 'styles/index.scss';
import { ref } from '@vue/composition-api';

</script>

Expected import:

<script setup>
import '@/styles/bar.scss';
import '@/styles/index.scss';
import './styles/bar.scss';
import './styles/foo.scss';
import 'styles/foo.scss';
import 'styles/index.scss';
import { ref } from '@vue/composition-api';

</script>

This extension is awesome, thanks for the idea!

Regards, Nicholas

你好，Nicholas！

import 'a/path' 是一个script import，而script imports是不支持自动排序的，因为可能有副作用。

你当然可以手动排序。或者你100%确定它们没有副作用，还有一个折中的办法，设置subGroups：

{
    "flags": "scripts",
    "subGroups": ["^@/styles/", "^[.]/styles/", "^styles/"],
    "regex": "[.](less|scss|css)$"
},

这样会把例子里的script imports根据路径前缀（sub groups）排序，但是无法根据文件名排序。

Output:

import '@/styles/index.scss';
import '@/styles/bar.scss';
import './styles/foo.scss';
import './styles/bar.scss';
import 'styles/foo.scss';
import 'styles/index.scss';

import { ref } from '@vue/composition-api';

PS：

{
   "regex": "@vue/composition-api"
}

可以简化成"@vue/composition-api"。例如：

"tsImportSorter.configuration.groupRules": [
   {
     "flags": "scripts",
     "subGroups": ["^@/styles/", "^[.]/styles/", "^styles/"],
     "regex": "[.](less|scss|css)$"
   },
   "@vue/composition-api",
   {},
   "^@(basecom|bizcom)",
   "^@/configs/",
   "^@/constants/",
    ...
 ],

daidodo / format-imports

SOS: how to sort import style #34