代码规范-prettier

1. 安装

• 首先在vscode插件商店安装Prettier - Code formatter

• 在插件上面邮件选择添加到工作区

• 在.vscode/settings.json中修改如下配置

{
  "editor.formatOnSave": true, // 保存时自动格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    // never 保存时自动修复 ESLint 报错
    // explicit 仅 在显式保存的时候出发代码操作
    "source.fixAll.eslint": "explicit"
  }
}

项目中安装

安装

pnpm i prettier -D

在根目录新建文件

• prettier.config.js

• 代码如下

export default {
  // 使用单引号 (true：单引号，false：双引号)
  singleQuote: false,
  // 结尾不用分号 (true：有，false：没有)
  semi: false,
  // 缩进制表符宽度 | 空格数
  tabWidth: 2,
  // 多行时尽可能打印尾随逗号 可选值"<none|es5|all>"
  trailingComma: "none",
  // 使用制表符而不是空格缩进行 (true：制表符，false：空格)
  useTabs: false,
  // 换行符使用 lf 结尾是 可选值 "<auto|lf|crlf|cr>"
  endOfLine: "auto",
  // 指定最大换行长度
  printWidth: 120,
  // 在对象字面量中决定是否将属性名用引号括起来 可选值 "<as-needed|consistent|preserve>"
  quoteProps: "as-needed",
  // 在JSX中使用单引号而不是双引号 (true：单引号，false：双引号)
  jsxSingleQuote: false,
  // 在对象，数组括号与文字之间加空格 "{ foo: bar }" (true：有，false：没有)
  bracketSpacing: true,
  // 将 > 多行元素放在最后一行的末尾，而不是单独放在下一行 (true：放末尾，false：单独一行)
  bracketSameLine: false,
  // (x) => {} 箭头函数参数只有一个时是否要有小括号 (avoid：省略括号，always：不省略括号)
  arrowParens: "avoid",
  // 指定要使用的解析器，不需要写文件开头的 @prettier
  requirePragma: false,
  // 可以在文件顶部插入一个特殊标记，指定该文件已使用 Prettier 格式化
  insertPragma: false,
  // 用于控制文本是否应该被换行以及如何进行换行
  proseWrap: "preserve",
  // 在html中空格是否是敏感的 "css" - 遵守 CSS 显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
  htmlWhitespaceSensitivity: "css",
  // 控制在 Vue 单文件组件中 <script> 和 <style> 标签内的代码缩进方式
  vueIndentScriptAndStyle: false,
  // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束)
  rangeStart: 0,
  rangeEnd: Infinity,
};

修改package.json

"lint:prettier": "prettier --write \"**/*.{js,ts,mjs,cjs,json,tsx,css,less,scss,vue,html,md}\""

ESlint与 Prettier冲突

代码格式上的冲突 我们在运行项目的时候，需要注意ESlint和Prettier这两个文件的配置项，有时候报错是因为这两个文件的配置项不一致导致的，

让Prettier来接管ESlint的格式化，用来覆盖 ESLint 本身的规则配置，关掉所有和 Prettier 冲突的 ESLint 的配置 将 Prettier 集成到现有的 ESLint 工具中:

安装

pnpm install -D eslint-config-prettier

在eslint.config.js 中新增加配置

import js from "@eslint/js"; //js规范（标准的）
import globals from "globals"; //环境
import pluginVue from "eslint-plugin-vue"; //vue规范
import { defineConfig } from "eslint/config"; //配置
import eslintConfigPrettier from "eslint-config-prettier"; // prettier
const ignores = ["**/dist/**", "**/node_modules/**", ".*"];
export default defineConfig([
  {
    files: ["**/*.{js,mjs,cjs,vue}"], //匹配文件
    plugins: { js },
    extends: ["js/recommended"], //js规范
    languageOptions: { globals: { ...globals.browser, ...globals.node } }, //全局变量 window
    ignores, //忽略文件
    // 添加你自己定义的规则
    rules: {
      "no-console": "off", //禁止console
      semi: "never", //结尾不需要加分号
    },
    ...eslintConfigPrettier,
  },
  pluginVue.configs["flat/essential"], //vue规范
]);

在 package.json 中添加 lint-staged 配置，指定在提交时要检查的文件及对应的命令。

  "lint-staged": {
    "**/*.{js.mjs,cjs,vue}": "eslint --fix",
    "*.{js,mjs,cjs,vue,json,css,less,scss,vue,html,md}": "prettier --write"
  },

总结

这样做 prettier 就会接管 eslint 的格式化，并且关掉所有和 prettier 冲突的 eslint 的配置，这样 prettier 就不会报错了。