项目配置 Prettier + Eslint + husky 规范代码风格

Eslint + Prettier使用

安装插件。若已安装插件，直接进入下一步配置

npm i eslint prettier eslint-config-prettier eslint-plugin-prettier -D

配置Eslint

1. 初始化配置文件

npx eslint --init

React需配置，解决React@17组件未手动引入React导致Eslint报错，'React' must be in scope when using JSXeslint(react/react-in-jsx-scope)

module.exports = {
  //...
  extends: [
    //...
    'plugin:react/jsx-runtime'
  ]
}

2. 安装 vscode 插件 eslint

3. 点击vscode “设置” 

4. 点击 “打开配置文件 ”

4. 配置保存自动修复，setting.json 中加入如下配置：

{
    // ...
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "editor.formatOnSave": false,
}

配置 prettier 

1. 若项目根目录下无 .eslintrc.js 文件，则新建 .eslintrc.js 文件。加入如下内容：

module.exports = {
  //...
  extends: [
    //...
    'plugin:prettier/recommended'
  ],
  rules: {
    'prettier/prettier': 'warn'
  }
}

2. 项目根目录新建 .prettierrc.json，内容如下：

{
  "printWidth": 100,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "endOfLine": "auto"
}

至此，Eslint + Prettier 配置完成。 

注意：以下内容只适用于 husky 8.x 及以下版本 

husky使用

安装插件

npm i husky lint-staged -D

启用Husky

* 注意：如果当前项目未初始化git仓库，需要先执行以下命令初始化git仓库

git init

执行以下命令启用Husky，执行完命令后，项目根路径中会多出一个.husky的文件夹。

npx husky install

 执行以下命令，在.husky文件夹下自动生成pre-commit文件

npx husky add .husky/pre-commit

package.json中加入如下配置

{
  "scripts": {
    # ...
    "lint-staged": "lint-staged"
  },
  # ...
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }
}

修改  .husky/pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

- undfined
+ npm run lint-staged

附录：

Husky是什么？
Husky 是一个用于前端开发的 Node.js 工具，它主要用于在 Git 提交钩子（Git Hooks）中运行脚本。Git 提交钩子是在 Git 版本控制系统的特定事件发生时执行的自定义脚本，例如在代码提交前执行一些检查或验证。

Husky 的主要用途是帮助开发团队在代码提交前执行一些预定义的操作，以确保代码的质量和一致性。常见的用例包括：

1. 代码风格检查： 在提交代码之前运行 ESLint、Prettier 或其他代码风格检查工具，以确保代码遵循一致的编码风格。
2. 单元测试： 在提交前运行单元测试，以确保代码没有破坏现有功能。
3. 提交消息验证： 检查提交消息是否符合规范，以便生成清晰的提交日志。

husky工作流程

prettier配置详解

{
  printWidth: 100, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
  quoteProps: 'as-needed', //仅在必需时为对象的key添加引号（as-needed,consistent,preserve）
  jsxSingleQuote: true, // jsx中使用单引号
  trailingComma: 'none', //多行时尾行逗号是否添加，例如对象的最后一行(es5,none,all)
  bracketSpacing: true, //在对象前后添加空格 { foo: bar }
  jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
  arrowParens: 'always', //单参数箭头函数参数周围使用圆括号(avoid,always)
  requirePragma: false, //无需顶部注释即可格式化
  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
  proseWrap: 'preserve', //(always,snever,preserve)
  htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感(css,strict,ignore)
  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
  endOfLine: 'lf', //换行符(lf,crlf,cr,auto)
  embeddedLanguageFormatting: 'auto' //对引用代码进行格式化(auto,off)
}