配置 ESLint
+ Prettier
环境来规范代码风格
前端开发过程中,每个人都有自己的代码风格,但项目中应该将代码风格统一,所以我习惯用 ESLint
+ Prettier
来格式化代码。
介绍
ESLint
是一个 JavaScript
代码检测工具,用以进行一系列代码质量检测。Prettier
是一个前端代码格式化工具,用以进行代码格式化操作。
但 ESLint
的格式化支持的文件类型较少,所以我喜欢配合 Prettier
来进行格式化。
配置 ESLint
安装 ESLint
1 | yarn yes! |
初始化 ESLint
1 | eslint --init |
此处根据你的项目具体情况回答几个问题,ESLint
就会自己乖乖生成配置文件了。
配置脚本
1 | // package.json |
再执行 yarn lint
就可以进行错误检测和格式化啦~
配置 Prettier
由于 ESLint
和 Prettier
的格式化功能有冲突,所以我们需要使用 ESLint
插件来关闭 ESLint
的格式化功能,防止 Prettier
和 ESLint
冲突。
安装 Prettier
及 ESLint
插件
1 | yarn add prettier eslint-plugin-prettier eslint-config-prettier |
修改 ESLint
配置文件
1 | // .eslintrc.json |
配置 Prettier
在项目根目录新建 .prettierrc
文件
1 | { |
配置脚本
1 | ... |
配置 VSCode
上面的配置都是进行运行时检测,为了我们的写码体验,可以安装一些 VSCode
插件来实时检测。
安装 VSCode ESLint
插件
名称: ESLint
ID: dbaeumer.vscode-eslint
说明: Integrates ESLint JavaScript into VS Code.
版本: 2.2.6
发布者: Microsoft
VS Marketplace 链接
这个插件将会自动用项目根目录下的 .eslintrc.*
配置文件来格式化代码
安装 VSCode Prettier
插件
名称: Prettier - Code formatter
ID: esbenp.prettier-vscode
说明: Code formatter using prettier
版本: 9.8.0
发布者: Prettier
VS Marketplace 链接
安装 VSCode Prettier ESLint
插件
名称: Prettier ESLint
ID: rvest.vs-code-prettier-eslint
说明: A Visual Studio Extension to format JavaScript and Typescript code using prettier-eslint package
版本: 5.0.4
发布者: Rebecca Vest
VS Marketplace 链接
修改 VSCode
设置
1 | { |
配置完成🎉
接下来就可以愉快写码啦~
- Post title:配置 ESLint + Prettier 环境来规范代码风格
- Post author:bingling_sama
- Create time:2022-08-21 11:07:35
- Post link:https://blog.booling.cn/2022/08/21/frontend/formatter-config/
- Copyright Notice:All articles in this blog are licensed under BY-NC-SA unless stating additionally.