配置 ESLint + Prettier 环境来规范代码风格
bingling_sama Booling✨

配置 ESLint + Prettier 环境来规范代码风格

前端开发过程中,每个人都有自己的代码风格,但项目中应该将代码风格统一,所以我习惯用 ESLint + Prettier 来格式化代码。

介绍

ESLint 是一个 JavaScript 代码检测工具,用以进行一系列代码质量检测。
Prettier 是一个前端代码格式化工具,用以进行代码格式化操作。
ESLint 的格式化支持的文件类型较少,所以我喜欢配合 Prettier 来进行格式化。

配置 ESLint

安装 ESLint

1
2
3
4
5
# yarn yes!
yarn add eslint

# npm
npm i -D eslint

初始化 ESLint

1
eslint --init

此处根据你的项目具体情况回答几个问题,ESLint 就会自己乖乖生成配置文件了。

配置脚本

1
2
3
4
5
6
7
8
// package.json
{
...
"scripts": {
"lint": "eslint --fix ./**"
}
...
}

再执行 yarn lint 就可以进行错误检测和格式化啦~

配置 Prettier

由于 ESLintPrettier 的格式化功能有冲突,所以我们需要使用 ESLint 插件来关闭 ESLint 的格式化功能,防止 PrettierESLint 冲突。

安装 PrettierESLint 插件

1
yarn add prettier eslint-plugin-prettier eslint-config-prettier

修改 ESLint 配置文件

1
2
3
4
5
6
// .eslintrc.json
...
  "extends": [
  "plugin:prettier/recommended"
  ]
...

配置 Prettier

在项目根目录新建 .prettierrc 文件

1
2
3
4
5
6
7
8
9
{
  "printWidth": 80, // 自动换行长度
  "tabWidth": 2, // 制表符大小
  "useTabs": true, // Tab 缩进
  "singleQuote": true, // 单引号
  "semi": false, // 行末分号
  "trailingComma": "none", // 尾逗号
  "bracketSpacing": true // 大括号环绕空格 eg.{ foo }
}

配置脚本

1
2
3
4
5
6
...
// package.json
"scripts": {
"format": "prettier --write ."
}
...

配置 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
2
3
4
{
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint", // 默认使用 prettier 作为格式化工具
"editor.formatOnSave": true // 保存代码时格式化
}

配置完成🎉

接下来就可以愉快写码啦~

  • 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.
 Comments