如何配置使用Prettier

Prettier是一个代码格式化工具,用于确保团队代码风格一致。在VSCode中安装插件或通过npm安装后,创建.prettierrc配置文件设定格式规则,如空格、引号类型等。通过.prettierignore文件可以忽略特定文件格式化。若需批量格式化,可在package.json中添加脚本并运行npmrunprettier。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目场景:

如何让我项目每个人的代码风格都是一样的了呢?


prettier作用

Prettier是用来格式化我们的代码的。这个是ctrl+s保存格式化的时候生效


怎么配置Prettier

假如我们使用的是vscode我们直接下载插件Prettier 就可以对我们的代码进行格式化

但是我们是这个项目本来就拥有的所以我们要下载包

npm install prettier -D

在根目录下面新建个文件.prettierrc

{
"useTabs":false, //就是格式化使用tab还是空格 false使用空格
"tabWidth":2, //空格大小
"semi": false,//末尾加不加分号
"singleQuote": true,//使用单引号
"printWidth": 80,//代码长度是多少
"trailingComma": "none"//多行输入末尾要不要加逗号
}

但是我们不需要对所有文件进行格式化

在根目录下面新建一个文件.prettierignore文件,忽略这些文件

/build/*
.local
.output.js
/node_modules/*

**/*.svg
**/*.sh
/public/*

但是假如我们有些文件忘记保存但是我们又不想一个一个进行格式化我们可以配置脚本

我们可以输入 "prettier": "prettier --write ."在我们的package.json中script中

在命令行中输入npm run prettier就可以全部文件格式化了

### 设置React项目中的ESLint与Prettier 对于希望在React项目中集成并配置最新版本的ESLint和Prettier来实现代码格式化以及linting的需求,以下是具体的操作指南。 #### 安装必要的依赖包 首先,在命令行工具中进入项目的根目录下执行如下npm指令以安装所需的开发依赖项: ```bash npm install eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-prettier --save-dev ``` 此操作会将ESLint、Prettier及其针对React环境的相关插件添加到`devDependencies`字段内[^1]。 #### 创建或更新`.eslintrc.js`文件 接着,在项目根目录创建(如果不存在的话)名为`.eslintrc.js`的JavaScript配置文件,并向其中写入基础配置内容以便于后续自定义规则的应用: ```javascript module.exports = { env: { browser: true, es2021: true, }, extends: [ 'plugin:react/recommended', 'airbnb', // 或者其他你喜欢的基础风格预设 'plugin:@typescript-eslint/recommended', 'prettier' // 使用 Prettier 来覆盖可能冲突的 ESLint 规则 ], parserOptions: { ecmaFeatures: { jsx: true, // 启用 JSX 支持 }, ecmaVersion: 12, sourceType: 'module' }, plugins: ['react'], }; ``` 上述配置通过引入Airbnb编码标准作为起点之一,并特别指定了对JSX语法的支持;同时利用`eslint-config-prettier`关闭任何可能会被Prettier处理过的样式问题警告,从而避免两者之间的潜在冲突[^2]。 #### 修改`package.json`脚本部分 为了方便开发者日常使用这些工具来进行本地开发前后的自动化检查及修复工作,可以在`package.json`里新增几个实用的任务命令: ```json { "scripts": { ... "lint": "eslint . --ext .js,.jsx,.ts,.tsx", "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json}\"" } } ``` 这里定义了两个新的NPM Script:一个是用于运行整个项目范围内的静态分析(`lint`),另一个则是用来自动调整指定路径下的源码格式(`format`)。这使得团队成员可以通过简单的终端输入快速完成质量控制流程的一部分[^3]。 #### VSCode编辑器支持 为了让Visual Studio Code能够实时提供基于所选工具链反馈的信息提示服务,建议按照官方文档指引去获取对应的扩展组件——即EsLint、Prettier等相关插件,并确保它们处于启用状态。这样不仅能在编写过程中及时发现不符合既定规范的地方,还能一键修正大部分常见错误。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值