在webstorm里面使用prettier
1. 安装 Prettier
bash 复制代码 npm install --save-dev prettier
2. 创建 Prettier 配置文件
在项目根目录下创建一个 .prettierrc
文件来定义 Prettier 的代码风格规则。以下是一个简单的 Prettier 配置文件示例:
json复制代码{ "semi": false, // 不加分号 "singleQuote": true, // 使用单引号 "trailingComma": "es5", // 在 ES5 语法支持的地方加逗号,如对象和数组 "printWidth": 100, // 一行代码最大字符数 "tabWidth": 2, // 使用 2 个空格进行缩进 "useTabs": false // 使用空格代替制表符 }
3. 使用 Prettier 格式化代码
你可以通过命令行来格式化项目中的代码文件。以下是一些常见的命令:
- 格式化整个项目中的所有文件:
bash 复制代码 npx prettier --write .
- 格式化指定的文件或文件夹:
比如我要格式化: D:\ksec\YanAn\code\YAPMSWEBUI1.0\pds-vite
这个目录下的 js文件和html文件
打开终端,进入项目根目录(如果你还没有进入项目目录,可以使用 cd 命令进入):
bash 复制代码 cd D:\ksec\YanAn\code\YAPMSWEBUI1.0\pds-vite
运行 Prettier 格式化命令:
格式化整个项目(比如所有的 .js、.vue、.ts 文件):
bash 复制代码 npx prettier --write .
格式化特定的文件(例如格式化所有 .js 文件):
bash 复制代码 npx prettier --write "**/*.js"
4. 最大疑惑
如果没有用到node_modules但是你还是想用Prettier,那么你就要选择一个以前项目里node_modules有Prettier的目录
我使用过程中最大的一个问题就是 选择prettier在 node_modules里面的位置,不选就不会有效果
因为我选择的是图里的第二个自动配置
在你需要格式化的地方,然后文件里右键:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步