vscode 导入语句排序和删除未使用的导入

vscode 自带的格式化

vscode 默认支持导入语句排序和删除未使用的导入。

对应的配置是:source.organizeImports

可选值:

  1. never:关闭
  2. explicit:仅在显式手动保存时触发
  3. always:自动保存时也会触发

我喜欢在手动 Ctrl + S 保存时,自动格式化当前代码。因此可以如下配置:

json 复制代码
{
    "editor.formatOnSave": true, // 保存时格式化
    "editor.codeActionsOnSave": {
        "source.organizeImports": "explicit" // 在显示保存时,整理导入语句
    }
}

eslint 实现整理导入语句

vscode 的导入语句排序,没有强制性,在协作中为了规范其他人要整理导入语句,我们往往会使用 eslint 对排序进行校验。

并且 vscode 是按字母顺序排序的,这可能不符合要求,或者想要自定义排序规则。我们往往也会使用 eslint 来执行整理代码的操作。

这依赖两个 eslint 插件:

  1. 导入排序:eslint-plugin-simple-import-sort
  2. 删除未使用的导入:eslint-plugin-unused-imports

安装后, eslint 配置:

typescript 复制代码
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 默认的导入整理是按文件路径字母顺序排序,
  • <font style="background-color:rgb(252, 252, 252);">simple-import-sort</font> 插件要求按自定义分组规则(默认是内置模块优先、外部依赖次之、本地文件最后)排序。
typescript 复制代码
{
    "editor.formatOnSave": true, // 保存时自动格式化
    "editor.codeActionsOnSave": {
        "source.organizeImports": "never", // 关闭 vscode 默认的导入语句整理功能:1.import 语句按字母顺序排序, 2.删除未使用的导入语句
        "source.fixAll.eslint": "explicit" // 让 ESLint 处理所有修复(包括排序)
    }
}
相关推荐
工一木子25 分钟前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
MediaTea1 小时前
Python 编辑器:Thonny
编辑器
半点寒12W2 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端3 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~3 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程3 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏3 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083164 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头4 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's5 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js