ESLint

配置说明

es-lint import order

引入了这个规则之后，就能在 lint 的时候自动将 import 按照模块所在的位置进行分组（下为 eslint 配置的 rules 中）

还有一个问题：是 import './index.css' 这一类没有赋值的导入没有被 lint 所捕获 (opens in a new tab)，以及这个 issue (opens in a new tab) 在讨论

      "import/order": [
        "warn",
        {
          "groups": ["builtin", "external", "internal", "parent", "sibling", "index", "unknown"],
          "newlines-between": "always",
          "alphabetize": {
            "order": "asc",
            "caseInsensitive": true
          },
          "pathGroupsExcludedImportTypes": ["builtin"],
          "pathGroups": [
						// 可以配置一些 alias 目录
          // {
          //   pattern: 'components/**',
          //   group: 'external', // 认为是外部依赖
          //   position: 'after',
          // },
          // {
          //   pattern: 'common/**',
          //   group: 'external',
          //   position: 'after',
          // },
          // {
          //   pattern: 'services/**',
          //   group: 'external',
          //   position: 'after',
          // },
          ]
        }
      ]

VSCode fix 文件

工作中遇到了使用 eslint 作为 formatter 之后，不能在 vscode 使用代码块格式化（⌘ + K, ⌘ + F）的问题

于是乎还是决定用 prettier 来作为 formatter（js(x)/ts(x)），同时可以将 eslint 的配置为 onsave 的时候 fix 整个文件

通过 editor.codeActionsOnSave：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit", // stylelint 也是如此
    "source.fixAll.eslint": "explicit"
  }
}

详情可看 eslint 插件的 changelog (opens in a new tab)

Zustand Storybook