代码规范（一）——项目接入prettier、husky文章发布时，涉及到的依赖版本参考文档： prettier官方文档

文章发布时，涉及到的依赖版本

{
    "prettier": "^2.5.1"
    "husky": "^7.0.4"
    "lint-staged": "^12.1.7"
}

参考文档：

prettier官方文档 www.prettier.cn/docs/instal…

安装prettier

yarn add -D prettier@^2.5.1
npm i -D prettier@^2.5.1

新建`prettier.config.js`文件

新建格式化配置文件
注：如果是vite，因为package.json中的"type": "module"，要改成prettier.config.cjs

module.exports = {
  htmlWhitespaceSensitivity: 'ignore', // 解决vue闭合标签跑到下一行的问题
  semi: false, // 是否在每行末尾添加分号
  bracketSameLine: false, // 如果为 true，则将多行jsx元素的 > 放在最后一行的末尾，而不是单独放在下一行
  singleQuote: true, // 如果为 true，将使用单引号而不是双引号
  printWidth: 180, // 换行长度，默认80
  // 缩进控制
  tabWidth: 2,
  useTabs: false,
  bracketSpacing: true, // ✅ 花括号内添加空格 { foo: bar }
}

安装Git commit勾子

用来在每次git commit之前执行prettier，保证了团队中代码样式的一致性，在code review中节省了纠正样式的环节。
安装的lint-staged是为了，让prettier仅格式化这次commit修改的文件，而不是项目中全部的文件。

# 安装依赖 husky lint-staged
yarn add -D husky@^7.0.0 lint-staged@^12.1.7
npm i -D husky@^7.0.0 lint-staged@^12.1.7
npx husky install

npm set-script prepare "husky install" 

# 高版本的npm set-script无效，直接在package.json中添加： "prepare": "husky install" 
# 或者执行以下：
npm pkg set scripts.prepare="husky install"

npx husky add .husky/pre-commit "npx lint-staged"

注意： npm set-script命令至少需要npm v7.x。

package.json添加"lint-staged"

{
    "scripts": {
        ...
        "prettier-all": "prettier --write '**/*.{js,jsx,ts,tsx,vue,css,less,scss,md,json,html}'",
        "prettier-all": "prettier --write \"**/*.{js,jsx,ts,tsx,vue,css,less,scss,md,json,html}\"" // 如果是windows 要这么写
    },
    ...
    "lint-staged": {
        "**/*.{js,jsx,ts,tsx,vue,css,less,scss,md,json,html}": "prettier --write"
    }
    ...
}

.prettierignore

/.husky
/node_modules
/dist

*_bak.*

*.min.js
*.min.css

mac 中husky不生效的情况

尝试执行：

chmod 777 .husky/*

代码规范（一）——项目接入prettier、husky