eslint prettier import sort 排序

eslint prettier import sort 排序

prettier 方案

使用第三方库 https://github.com/IanVS/prettier-plugin-sort-imports

• 下载包 pnpm i @trivago/prettier-plugin-sort-imports -D
• 配置 prettierrc.json

   "importOrderBuiltinModulesToTop": true,
    "importOrderCaseInsensitive": true,
    "importOrderParserPlugins": [
      "typescript",
      "jsx",
      "decorators-legacy"
    ],
    "plugins": [
      "@trivago/prettier-plugin-sort-imports"
    ],
    "importOrderMergeDuplicateImports": true,
    "importOrderCombineTypeAndValueImports": true,
    "importOrderSeparation": true,
    "importOrderSortSpecifiers": true,
    "importOrder": [
      "<THIRD_PARTY_MODULES>",
      "^@components/(.*)$",
      "^@(.*)",
      "^[./]"
    ],
  

• 安装 prettier
• 格式化使用 prettier

eslint 方案

eslint.js 配置

module.exports = {
	  settings: {
	    'import/parsers': {
	      '@typescript-eslint/parser': ['.ts', '.tsx', '.js', '.jsx'],
	    },
	    'import/internal-regex': ['^@src/', '^@components/'],
	    'import/resolver': {
	      node: {
	        extensions: ['.js', '.jsx', '.ts', '.tsx'],
	      },
	    },
	  },
	rules: {
    'import/order': [
      'warn',
      {
        'newlines-between': 'always',
        alphabetize: {
          order: 'asc',
          caseInsensitive: false,
        },
        groups: [
          'builtin',
          'external',
          'internal',
          'parent',
          'sibling',
          'index',
          'unknown',
        ],
        pathGroups: [ 
          {
            pattern: '@ahooksjs/**',
            group: 'external',
            position: 'before',
          },
          {
            pattern: '@**/**',
            group: 'internal',
            position: 'after',
          },
        ],
      },
    ],
   }
}