prettier 在项目中的简单使用

prettier 在项目中的简单使用

接着上篇 项目中 eslint 简单使用 继续 prettier 在项目中的简单使用，prettier 对应的 官方文档

prettier 安装

• 安装 npm i prettier eslint-config-prettier eslint-plugin-prettier -D

• 在 prettier.config.js 或 .prettierrc.js 添加以下规则

module.exports = {
  // 一行最多 80 字符
  printWidth: 80,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用 tab 缩进，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: true,
  // 使用单引号代替双引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾使用逗号
  trailingComma: 'all',
  // 大括号内的首尾需要空格 { foo: bar }
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'always',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // 换行符使用 lf
  endOfLine: 'auto',
};

• 修改 .eslintrc.js 配置，eslint 配置文件中 extends 属性添加 prettier， 如果存在 prettier 和 eslint 问题，以 prettier 为主

modules.exports = {
  ...
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended'
  ],
  ...
};

• 修改 package.json

{
  ...
  "scripts": {
    ...
    "prettier": "prettier --write"
  }
  ...
}