代码规范工具（一）Prettier

Prettier

用于格式化代码

文章使用版本：v3.3.2

官网地址：prettier.io

安装

# npm
npm install --save-dev --save-exact prettier
# yarn
yarn add --dev --exact prettier
# pnpm
pnpm add --save-dev --save-exact prettier
# bun
bun add --dev --exact prettier

配置

1. 在项目根目录下创建配置文件prettier.config.js，并写入基本配置：

   /**
    * 配置选项参考：
    * https://prettier.io/docs/en/options
    */
   module.exports = {
     tabWidth: 2,
     useTabs: false,
     semi: true,
     singleQuote: true,
     jsxSingleQuote: true,
     endOfLine: 'auto',
     trailingComma: 'none',
     printWidth: 80,
     bracketSameLine: false,
     htmlWhitespaceSensitivity: 'ignore'
   };
   

2. 在项目根目录下创建忽略文件 .prettierignore，并写入需要忽略的文件：

   dist
   build
   node_modules
   public
   .husky
   .bin
   docs
   html
   .vscode
   .idea
   *.sh
   *.md
   

VSCode

1. 安装插件Prettier - Code formatter

   flowchart LR
   打开VSCode --> 拓展 --> 搜索prettier --> 找到上诉插件并安装
   

2. .在setting.json中编辑

   {
     "prettier.endOfLine": "auto",
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
   

配合TailwindCSS使用

插件地址：github.com/tailwindlab…

1. 安装插件

   # npm
   npm install -D prettier-plugin-tailwindcss
   # yarn
   yarn add -D prettier-plugin-tailwindcss
   # pnpm
   pnpm add -D prettier-plugin-tailwindcss
   # bun
   bun add -D prettier-plugin-tailwindcss
   

2. 在prettier.config.js新增：

   module.exports = {
     ...
     plugins: ['prettier-plugin-tailwindcss'],
     tailwindAttributes: [], // 自定义属性名称内对class进行排序
     tailwindFunctions: ['clsx', 'cva', 'tw'], // 使用clsx、cva、twrnc等这些库时对class进行排序
     tailwindPreserveWhitespace: false, // 是否保留class周围的任何空格
     tailwindPreserveDuplicates: false // 是否保留重复类
   };
   

配合ESLint使用

1. 安装插件，用于关闭ESLint中所有不必要的或可能与Prettier冲突的规则

   #npm
   npm install -D eslint-config-prettier eslint-plugin-prettier
   #yarn
   yarn add -D eslint-config-prettier eslint-plugin-prettier
   #pnpm
   pnpm add -D eslint-config-prettier eslint-plugin-prettier
   #bun
   bun add -D eslint-config-prettier eslint-plugin-prettier
   

2. 配置ESLint，例如配置 .eslintrc.js

   module.exports = {
     ...
     extends: [
        ...
       'plugin:prettier/recommended',
     ],
     rules: {
   	...
       'prettier/prettier': ['error', { endOfLine: 'auto' }]
     }
   };