vscode 配置prettier

### 配置 VSCode 使用 Prettier 进行代码格式化

#### 安装 Prettier 插件
为了使 Visual Studio Code (VSCode) 支持通过 Prettier 自动格式化代码，需先安装 `Prettier - Code formatter` 扩展。这可以通过访问 VSCode 的扩展市场并搜索 “Prettier” 来完成。

#### 设置全局配置
在用户级别的设置 JSON 文件中加入如下配置来启用基本的功能：

{
    "editor.formatOnSave": true,
    "prettier.requireConfig": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

这些选项分别表示开启保存时自动格式化、强制要求存在本地 `.prettierrc` 或者其他形式的配置文件以及指定默认使用的格式化工具有 esbenp 提供的 prettier-vscode 版本[^1]。

#### 创建项目特定配置
对于更细致化的控制，在项目的根目录创建名为 `prettier.config.js` 的文件，并定义具体的规则集。例如下面这段配置适用于大多数场景下的开发需求:

module.exports = {
    printWidth: 80,
    tabWidth: 2,
    useTabs: false,
    semi: true,
    singleQuote: true,
    trailingComma: 'all',
    bracketSpacing: true,
    jsxBracketSameLine: false,
    arrowParens: 'always'
};

此段脚本设置了最大行长宽度为80字符，缩进采用两个空格而非制表符；语句结尾加号分号；字符串优先使用单引号；对象字面量属性名仅当必要时才加上引号等特性[^3]。

#### 整合 ESLint 和 Prettier
如果希望同时遵循ESLint编码标准，则可以进一步调整工作区内的`.eslintrc.json`或相应的配置文件，确保两者之间不会冲突。通常情况下只需要简单地添加 `"extends": ["plugin:prettier/recommended"]` 即可让 ESLint 尊重由 Prettier 设定的所有样式指南[^2]。

---