关闭Prettier - Code formatter自动添加分号和双引号

### 如何使用 Prettier 代码格式化插件 #### 安装依赖包 为了能够在项目中使用 Prettier 进行代码格式化，需先通过 npm 或 yarn 来安装必要的软件包。对于 Vue 项目而言，除了 `prettier` 外还需要额外安装解析器来支持 HTML 及其扩展语法。 ```bash npm install --save-dev prettier prettier/parser-html ``` 或者如果是在 Vue 环境下工作，则可以这样安装： ```bash npm install --save-dev prettier @vue/prettier ``` 这会下载并设置好用于处理 HTML 和 Vue 文件所需的一切工具[^1]。 #### 创建配置文件 创建 `.prettierrc.js` 配置文件以便自定义一些选项，比如每行的最大宽度、是否使用单引号代替双引号等特性。下面是一个简单的例子展示如何设定这些偏好: ```javascript // .prettierrc.js module.exports = { printWidth: 80, singleQuote: true, semi: true, bracketSpacing: true, endOfLine: 'auto', }; ``` 此配置指定了打印宽度为 80 字符，强制使用单引号而不是双引号，并且会在语句结束处加上分号[^4]。 #### 编写格式化函数 当希望直接在 JavaScript 中调用 Prettier 对特定字符串进行格式化时，可以通过如下方式实现： ```javascript import prettier from "prettier/standalone"; import parserHtml from "prettier/parser-html"; export function prettierCode(code) { try { return prettier.format(code, { parser: "html", plugins: [parserHtml], vueIndentScriptAndStyle: true, }); } catch (error) { console.error(error); return code; } } ``` 这段代码展示了怎样利用 standalone 版本的 Prettier 结合 HTML 解析器对传入的代码片段执行格式化操作。如果有任何错误发生则捕获异常并将原始代码返回给调用者。 #### 设置编辑器集成 为了让开发体验更加流畅，在 Visual Studio Code 中还可以进一步配置以实现在每次保存文件的时候自动应用 Prettier 的格式化规则。具体做法是前往 VSCode 插件市场安装名为 “ESLint” 和 “Prettier - Code formatter”的两个扩展程序[^2]。 接着更新项目的 ESlint 配置文件（通常是`.eslintrc.cjs`) ，确保其中包含了 `"plugin:prettier/recommended"` 规则集，从而解决两者之间可能存在的冲突问题[^3]: ```json { "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:vue/vue3-essential", "plugin:prettier/recommended" ] } ``` 完成上述步骤之后，每当修改完文件并按下 Ctrl+S 键盘快捷键保存更改时，VSCode 就能自动按照预设好的标准调整代码样式了。

### 配置 Prettier 在 Vue 3 项目中的应用 #### 安装依赖包 为了使 Prettier 能够在 Vue 3 项目中正常工作，需安装一些必要的开发依赖。这包括 `eslint-plugin-prettier` 和 `eslint-config-prettier` 来确保 ESLint 不会覆盖 Prettier 的格式化规则。 ```bash npm install --save-dev eslint-plugin-prettier eslint-config-prettier ``` 此外，还需要安装 Prettier 自身以及任何特定于项目的其他插件或解析器[^3]。 #### 创建配置文件 创建 `.prettierrc.json` 文件来定义全局的代码样式偏好设置： ```json { "singleQuote": true, "semi": false, "trailingComma": "es5" } ``` 此 JSON 对象内的属性可以根据团队内部约定调整，上述例子表示使用单引号而不是双引号、不加结尾分号，并为 ES5 兼容环境启用拖尾逗号[^1]。 对于不需要被 Prettier 处理的特殊路径，则可以在根目录下新增名为`.prettierignore` 的纯文本文件列出这些例外情况: ``` /dist/* .local .output.js /node_modules/** /**/*.svg /**/*.sh /.vscode/ /public/* ``` 这样可以有效防止某些类型的文件受到不必要的修改影响[^2]。 #### 整合到编辑器环境中 为了让 VSCode 用户获得更好的体验，在 IDE 设置里加入如下推荐扩展：“Prettier - Code formatter”。接着打开用户/工作区级别的 settings.json 并添加以下内容以便激活保存时自动格式化的功能： ```json "[javascript],[typescript],[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }, "prettier.requireConfig": true ``` 以上操作完成后，每当保存 JavaScript, TypeScript 或者 Vue 组件形式下的源码变更时都会触发一次基于所设定规则集的自动化美化过程。