prettire 统一代码格式化

1、安装

// --save-dev：指定开发环境
// --save-exact：固定依赖包的版本,不要带^或~,避免出现小版本
npm install --save-dev --save-exact prettier

2、执行脚本

// 1、终端执行：格式化整个项目的文件
npx prettier --write .

// 2、终端执行：格式化某个目录下的文件
npx prettier --write 'src/**/*.{js,jsx,json,css,md}'

3、根目录配置两个文件

.prettierrc.json 常用配置

{
  singleQuote: true, // 单引号
  trailingComma: "all", // 结尾逗号
  objectCurlyNewline: "always", // 对象花括号换行
  arrayBracketNewline: "always", // 数组花括号换行
  htmlWhitespaceSensitivity: "strict", // html 缩进
  useTabs: false, // 使用空格而不是制表符
  tabWidth: 2 // 缩进宽度
}

.prettierignore 用来忽略一些目录或者文件

# 忽略目录或文件 
build 
coverage 

# 忽略所有 html 文件 
*.html

4、将 prettire 集合到 eslint 中（eslint也会校验代码风格）

1、安装插件 npm i eslint-config-prettier eslint-plugin-prettier -D

• eslint-config-prettier：禁用与 Prettier 冲突的 ESLint 规则(Prettier 覆盖 eslint)

• eslint-plugin-prettier：将 Prettier 的规则转换为 ESLint 规则（不符合 prettier 规则告警）

2、在 package.josn 中配置 lint 脚本

"lint": "eslint --ext .ts,.jsx,.tsx --fix --quiet ./packages",

• --ext：指定校验的文件类型
• --fix：修复发现的问题
• --quiet：不输出返回的形式

3、配置

在 ESLint 中集成 Prettier

// 旧版本
{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",  // 启用 Prettier 插件
    "prettier"  // 禁用与 Prettier 冲突的 ESLint 规则
  ],
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error"  // 将 Prettier 格式化规则当作 ESLint 错误
  }
}

// 新版本
import globals from "globals";
import pluginJs from "@eslint/js";
import pluginReact from "eslint-plugin-react";
import eslintConfigPrettier from "eslint-config-prettier";
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    rules: {
      ...
    },
  },
  // 禁用所有与 Prettier 冲突的 ESLint 规则
  eslintConfigPrettier,
  // 将 Prettier 的格式化规则转换为 ESLint 规则
  eslintPluginPrettierRecommended,
];

5、保存自动格式化

vscode

"editor.formatOnSave": true,
"eslint.format.enable": true

在setting中设置搜索 format

自动格式化

webstorm