前言

Prettier是一个流行的代码格式化工具，用于自动化地格式化代码。它可以帮助开发者统一团队中的代码风格，避免关于代码格式化的争论，并提高代码的可读性。

与 ESLint 不同， ESLint 是一个静态代码分析工具，主要用于查找和修复代码中的潜在问题、错误、不一致和不推荐的模式。是帮助你提高代码质量、避免常见的错误，以及确保团队成员遵循统一的编码约定。

而Prettier是一个代码格式化工具，专注于对代码进行格式化，使其符合一致的风格规范。它会自动调整代码的缩进、换行、引号等，确保代码在不同的编辑器和环境中具有一致的外观。

简单来说，ESLint更注重你的代码是否符合规范，Pretter则是为你提供了按照规范格式化代码的能力。

为啥用它

它俩一起，可以实现什么？拿一段链表代码做示例，看着代码功能完好，当别人来阅读这段代码时简直就是折磨。

Pasted image 20230630163905.png

如果你吧ESLint和Prettier都配置好，它将会是这样

Pasted image 20230630164100.png

好家伙，不看不知道，一看35个报错。如果这样的代码提交到仓库，如果我是你的领导，今天晚上别下班了。

完整配置好ESLint和Prettier后，在保存文件都时候就已经帮你修复好所有问题了，爽到🛫️

Kapture 2023-06-30 at 17.02.07.gif

ESLint

更多内容查看解析ESLint配置规则、插件和个性化设置

安装

执行命令

pnpm i eslint -D

生成配置文件

按照自己项目需求，选择对应功能后生成配置文件。

npx eslint --init

最后生成的文件配置

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}

Prettier

安装

运行命令安装

pnpm install --save-dev --save-exact prettier

配置

创建.prettierrc.js文件存放配置，也可以查看更多options

module.exports = {
  printWidth: 120, // 单行代码长度
  tabWidth: 2, // 缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: false, // 句末使用分号
  singleQuote: true, // 使用单引号
  quoteProps: 'as-needed', // object对象中key值是否加引号
  bracketSpacing: true, // object对象里面的key和value值和括号间的空格
  endOfLine: 'lf', // 行尾换行符
  arrowParens: 'always', // 箭头函数单个参数的情况是否省略括号
  htmlWhitespaceSensitivity: 'ignore', // html中的空格敏感性
  trailingComma: 'all',
}

创建.prettierignore来表示哪些文件不需要格式化。

# prettier 忽略文件
dist
libs
node_modules
*.md

命令

使用命令npx prettier --write .格式化当前目录下的文件，--write后面可以跟文件名、路径等。

prettier [options] [file/dir/glob ...]

更多命令可以查看prettire CLI

也可以在package.json中添加lint命令，通过命令直接执行。

{
	...
	"scripts": {
		"lint": "prettier --write --cache . && eslint --fix . --ext .js,.ts,.vue ."
	}
	...
}

VsCode配置

安装插件

Pasted image 20230630174331.png

在默认格式化方式选择prettier

Pasted image 20230630174626.png

可以在VsCode中打开保存代码自动格式化配置

{
	...
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true, // this allows ESLint to auto fix on save
	},
	...
}

配置使用eslint校验的文件

  "eslint.validate": [
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact",
    "vue",
    "html"
  ],

冲突

他们俩为什么会有冲突？比如一个句末使用分号规范，如果ESLint配置的是使用，而Prettier配置的是不使用，他们之间就会产生冲突。

// .eslintrc
"rules": {
	"semi": ["error", "always"] // 使用分号
}

// .prettierrc
{
	semi: false, // 句末不使用分号
}

这个时候就会发现报错都是由eslint发起，修复之后所有的句末都会添加一个分号。

Pasted image 20230630172156.png

这时候再使用prettier进行修复代码，它规定的是不使用分号，就会将所有分号删除。

Pasted image 20230630172541.png

解决冲突

方式一手动修改

冲突的原因是因为两个配置不一样，你按你的来，我照我的改。所以只要让他们配置保持一致就可以，要么修改prettierrc配置，要么修改eslintrc配置。

方式二安装插件

安装以下两个插件

# 安装
pnpm i eslint-config-prettier eslint-plugin-prettier -D

eslint-config-prettier: 的作用是关闭 eslint 中与 prettier 相互冲突的规则。
eslint-plugin-prettier 的作用是赋予 eslint 用 prettier 格式化代码的能力。

在 ESLint 的配置文件中加上 Prettier 的配置

"plugins": ['prettier']
"extends": ['plugin:prettier/recommended']

通过extends加载prettier规范关闭ESLint和Prettier相冲突的规则，然后加载prettier plugins让ESLint按照Prettier规范去格式化代码。

常见报错

找不到"require"

Pasted image 20230630220528.png

第一个错很简单，fs是Node里的模块，需要安装一下@types/node声明文件

'module' is not defined.

ESLint添加配置

env: {
    node: true
  },

ESLint & Prettier 不在为代码格式而烦恼

前言