如何在VS Code中自动垂直对齐JavaScript Imports的from语句？

方案：通过ESLint配置实现（兼容保存自动修复） #

Prettier默认不支持该对齐规则，我们可以借助ESLint的eslint-plugin-import插件实现需求：

1. 安装依赖
   在项目根目录执行命令安装ESLint及对应插件：

npm install eslint eslint-plugin-import --save-dev
# 或使用 yarn：yarn add eslint eslint-plugin-import -D
# 或使用 pnpm：pnpm add eslint eslint-plugin-import -D

2. 配置ESLint规则
   在项目根目录创建或修改.eslintrc.js文件，添加以下配置：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  plugins: ['import'],
  rules: {
    // 强制from关键字垂直对齐到同一列
    'import/align': ['error', 'from']
  }
};

3. 开启VS Code保存自动修复
   打开VS Code设置（快捷键Ctrl+,），点击右上角「打开设置(JSON)」按钮，添加以下配置：

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

此后每次保存文件，ESLint会自动修复导入语句的对齐问题。

解决Prettier冲突（若同时使用） #

如果项目同时用Prettier，需避免它覆盖ESLint的对齐效果：

1. 安装eslint-config-prettier禁用ESLint中与Prettier冲突的规则：

npm install eslint-config-prettier --save-dev

2. 在.eslintrc.js的extends数组中添加prettier：

module.exports = {
  // ...其他配置
  extends: [
    // ...你的其他extends配置
    'prettier'
  ]
};

完成配置后，保存JavaScript文件时，导入语句的from部分会自动垂直对齐至同一列，达到你想要的效果。

内容的提问来源于stack exchange，提问作者Lloukas