vscode-导入语句排序和删除未使用的导入
目录
vscode 导入语句排序和删除未使用的导入
vscode 自带的格式化
vscode 默认支持导入语句排序和删除未使用的导入。
对应的配置是:source.organizeImports
可选值:
- never:关闭
- explicit:仅在显式手动保存时触发
- always:自动保存时也会触发 我喜欢在手动 Ctrl + S 保存时,自动格式化当前代码。因此可以如下配置: { “editor.formatOnSave”: true, // 保存时格式化 “editor.codeActionsOnSave”: { “source.organizeImports”: “explicit” // 在显示保存时,整理导入语句 } }
eslint 实现整理导入语句
vscode 的导入语句排序,没有强制性,在协作中为了规范其他人要整理导入语句,我们往往会使用 eslint 对排序进行校验。 并且 vscode 是按字母顺序排序的,这可能不符合要求,或者想要自定义排序规则。我们往往也会使用 eslint 来执行整理代码的操作。 这依赖两个 eslint 插件:
- 导入排序:
eslint-plugin-simple-import-sort
- 删除未使用的导入:
eslint-plugin-unused-imports
安装后, eslint 配置: module.exports = { plugins: [ “unused-imports”, “simple-import-sort” ], rules: { “simple-import-sort/imports”: “error”, // 强制导入语句排序 // “simple-import-sort/exports”: “error”, // 强制导出语句排序 “unused-imports/no-unused-imports”: “error”, // 禁止未使用的导入,eslint修复时会自动删除未使用的导入 “unused-imports/no-unused-vars”: [ // 不禁止未使用的变量,只是警告,避免 eslint 修复时删除它 “warn”, { vars: “all”, varsIgnorePattern: “^”, args: “after-used”, argsIgnorePattern: “^” } ] } } 配置规则后,当代码不符合规范时,eslint 就会抛出对应的错误或者警告。 执行 eslint –fix 修复时,两个插件就会按配置的规则整理导入语句。 显然执行 eslint 命令修复太麻烦了,我希望和 vscode 自带的整理功能一样,手动执行 Ctrl + S 保存时,就整理代码。 要实现这一点,只需要配置source.fixAll.eslint
。指定在显示保存时,使用 eslint –fix 来格式化代码即可。 并且注意,要关闭 vscode 自带的整理导入语句功能,要不然会有冲突,因为两个排序规则不一样。
- VSCode 默认的导入整理是按文件路径字母顺序 排序,
simple-import-sort
插件要求按自定义分组规则 (默认是内置模块优先、外部依赖次之、本地文件最后)排序。 { “editor.formatOnSave”: true, // 保存时自动格式化 “editor.codeActionsOnSave”: { “source.organizeImports”: “never”, // 关闭 vscode 默认的导入语句整理功能:1.import 语句按字母顺序排序, 2.删除未使用的导入语句 “source.fixAll.eslint”: “explicit” // 让 ESLint 处理所有修复(包括排序) } }