sublime prettier插件配置_Prettier代码格式化插件配置指南

在 Sublime Text 中配置 Prettier 插件可通过安装 JsPrettier 并设置路径、规则及触发方式实现代码自动化格式化，提升开发效率与一致性。 以下是详细配置步骤：

1. 安装 Package Control（若未安装）：

   打开 Sublime Text，按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（Mac）打开命令面板。

   输入 Install Package Control，按提示完成安装。

2. 安装 JsPrettier 插件：

   通过命令面板输入 Install Package，搜索并安装 JsPrettier。

1. 打开配置文件：

   进入菜单栏：Preferences > Package Settings > JsPrettier > Settings。

   左侧为默认配置，右侧填写用户自定义设置（覆盖默认值）。

2. 核心配置项说明：

   路径配置：

   prettier_cli_path：指向本地 Prettier 可执行文件路径（如项目本地安装时填写 ./node_modules/.bin/prettier）。

   node_path：若 Node.js 未加入系统环境变量，需指定其路径（如 C:Program Filesnodejsnode.exe）。

   自动格式化：

   format_on_save_enabled：设为 true 启用保存时自动格式化。

   auto_format_on_save_excludes：排除特定文件或目录（如 ["*.min.js"]）。

   格式化规则：

   prettier_options：定义代码风格（如缩进、引号类型等），需与项目 .prettierrc 文件保持一致。示例：{ "printWidth": 80, "tabWidth": 2, "singleQuote": true, "trailingComma": "es5", "semi": true}

   其他选项：

   use_editor_config：设为 true 读取项目中的 .editorconfig 文件。

   max_file_size_limit：限制格式化文件大小（默认 -1 表示无限制）。

3. 示例配置文件：

   { "prettier_cli_path": "./node_modules/.bin/prettier", "node_path": "C:Program Filesnodejsnode.exe", "format_on_save_enabled": true, "prettier_options": { "semi": false, "singleQuote": true }}

JsPrettier 依赖本地或全局安装的 Prettier 命令行工具：

1. 项目本地安装（推荐）：

   在项目根目录运行：npm install --save-dev prettier

   配置 prettier_cli_path 指向 ./node_modules/.bin/prettier（Windows 需调整路径分隔符）。

2. 全局安装：

   运行：npm install -g prettier

   配置 prettier_cli_path 为全局路径（如 /usr/local/bin/prettier 或 C:UsersUsernameAppDataRoamingnpmprettier.cmd）。

1. 默认快捷键：

   Windows/Linux：Ctrl+Alt+F

   Mac：Cmd+Option+F

   右键菜单选择 Format Code with JsPrettier 也可触发。

2. 自定义快捷键：

   进入 Preferences > Key Bindings，添加以下内容（示例将格式化绑定到 Ctrl+S 保存前）：[ { "keys": ["ctrl+s"], "command": "js_prettier" }]

1. 测试自动格式化：

   新建一个测试文件（如 test.js），输入混乱代码（如无缩进、混合引号）。

   保存文件（Ctrl+S），观察是否自动格式化。

2. 手动触发格式化：

   选中代码或保持光标在文件内，按快捷键 Ctrl+Alt+F，检查输出是否符合规则。

1. 格式化无效：

   检查 prettier_cli_path 和 node_path 是否配置正确。

   确保项目已安装 Prettier（本地或全局）。

   确认文件类型在 Prettier 支持范围内（如 .js、.jsx、.ts 等）。

2. 规则不生效：

   检查 prettier_options 是否与项目配置冲突。

   关闭 use_editor_config 避免 .editorconfig 覆盖规则。

3. 性能问题：

   大文件格式化卡顿时，可设置 max_file_size_limit 限制文件大小。

通过以上步骤，Sublime Text 可实现与 VS Code 类似的 Prettier 自动化格式化体验，关键点包括：路径配置准确、规则与项目一致、按需启用保存触发。