保存时自动格式化 VS Code 中的代码

在编写代码的过程中，我们经常会写出混乱、难以理解的代码，这不仅影响代码的可读性，也会拖慢开发效率。为了解决这个问题，我们可以使用 VS Code 的自动格式化功能。当我们保存代码时，VS Code 会自动对代码进行格式化，使其更加清晰易懂。

如何开启自动格式化

1. 安装 ESLint 插件

在 VS Code 的扩展商店中搜索并安装 ESLint 插件。

2. 配置 VS Code 中的 settings.json 文件

在 VS Code 中按下 Ctrl+Shift+P 打开命令面板，输入“settings.json”，选择“首选项：打开 settings.json”进行编辑。

在 settings.json 文件中，添加以下代码：

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

保存并关闭 settings.json 文件。

3. 安装 ESLint 依赖

在项目根目录下，执行以下命令安装 ESLint：

npm install eslint --save-dev

4. 配置 .eslintrc.js 文件

在项目根目录下，创建 .eslintrc.js 文件，并添加以下代码：

module.exports = {
  extends: [
    'eslint:recommended'
  ],
  env: {
    node: true,
    es6: true
  },
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {}
};

这个配置文件可以根据项目的需要进行自定义。

5. 开启自动保存功能

在 VS Code 中，按下 Ctrl+, 进入设置界面。在搜索框中输入“自动保存”，将“自动保存”选项设置为 onFocusChange 或 onWindowChange。这将允许您在切换编辑器、切换窗口或输入时自动保存更改。

Markdown 代码片段

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

{
  "langs": ["javascript"],
  "deps": ["eslint"],
  "rules": {
    "source.fixAll.eslint": true
  }
}

module.exports = {
  extends: [
    'eslint:recommended'
  ],
  env: {
    node: true,
    es6: true
  },
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {}
};