前端工程化（editorconfig+ESLint+Prettier+StyleLint+Husky、Commitlint）

前言

致谢：有来技术大大

通过学习有来技术大大的文章和结合自己的实践，写一篇笔记记录一下

所使用的工具：

• ide项目风格(editorconfig)
• 代码检查(ESLint)
• 代码风格(Prettier)
• 样式风格(StyleLint)
• git提交规范(Husky、Commitlint)

一、ide项目规范

VSCode 搜索 EditorConfig for VS Code 插件并安装

集成editorconfig配置

作用：使项目代码风格保持一致
步骤：在项目中创建 .editorconfig 文件

# https://editorconfig.org

root = true

[*]   # 表示适用于所有文件
charset = utf-8     # 设置文件字符为utf-8
indent_style = space    # 缩进风格（tab | space）
indent_size = 2     # 缩进大小
end_of_line = lf    # 控制换行类型（lf | cr | crlf）
insert_final_newline = true     # 始终在文件末尾插入一个新行
trim_trailing_whitespace = true     # 去除行首的任意空白字符

[*.md]  #表示仅 md 文件适用
insert_final_newline = false
trim_trailing_whitespace = false

二、代码规范

代码规范工具

• ESLint
• Prettier
• StyleLint

1、集成ESLint

ESLint： 一个用于检查和修复 JavaScript 代码中问题的代码检测工具。它能够帮助你发现并修复 JavaScript 代码中的问题

ESLint 配置(.eslintrc.cjs)

#如果使用脚手架创建的项目集成了eslint，可忽略

# 1、安装
npm i eslint -D

# 2、生成配置
npx eslint --init

然后根据自己的需要选择配置，完成后项目中会生成 .eslintrc.js 或 .eslintrc.cjs 文件，一下以 .eslintrc.cjs为例

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    parser: "@babel/eslint-parser",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

在默认配置基础上需要修改解析器为 vue-eslint-parser ，不然在检测执行中出现 error Parsing error: '>' expected 的解析错误，修改 .eslintrc.cjs，最终文件放于最后

ESLint 忽略配置(.eslintignore)

dist
node_modules
public
.husky
.vscode
.idea
*.sh
*.md

src/assets

.eslintrc.cjs
.prettierrc.cjs
.stylelintrc.cjs

ESLint 检测指令

package.json 添加 eslint 检测指令：

"scripts": {
    "lint:eslint": "eslint \"src/**/*.{vue,ts,js}\" --fix"
}

ESLint 检测和验证

# eslint检测
npm run lint:eslint

2、集成Prettier

prettier是一款强大的代码格式化工具，文档

安装依赖

npm install prettier -D

根目录创建配置文件.prettierrc.cjs 和格式化忽略配置文件.prettierignore

// 详细配置：https://www.prettier.cn/docs/options.html
module.exports = {
  // (x)=>{},单个参数箭头函数是否显示小括号。(always:始终显示;avoid:省略括号。默认:always)
  arrowParens: "always",
  // 开始标签的右尖括号是否跟随在最后一行属性末尾，默认false
  bracketSameLine: false,
  // 对象字面量的括号之间打印空格 (true - Example: { foo: bar } ; false - Example: {foo:bar})
  bracketSpacing: true,
  // 是否格式化一些文件中被嵌入的代码片段的风格(auto|off;默认auto)
  embeddedLanguageFormatting: "auto",
  // 指定 HTML 文件的空格敏感度 (css|strict|ignore;默认css)
  htmlWhitespaceSensitivity: "css",
  // 当文件已经被 Prettier 格式化之后，是否会在文件顶部插入一个特殊的 @format 标记，默认false
  insertPragma: false,
  // 在 JSX 中使用单引号替代双引号，默认false
  jsxSingleQuote: false,
  // 每行最多字符数量，超出换行(默认80)
  printWidth: 120,
  // 超出打印宽度 (always | never | preserve )
  proseWrap: "preserve",
  // 对象属性是否使用引号(as-needed | consistent | preserve;默认as-needed:对象的属性需要加引号才添加;)
  quoteProps: "as-needed",
  // 是否只格式化在文件顶部包含特定注释(@prettier| @format)的文件，默认false
  requirePragma: false,
  // 结尾添加分号
  semi: true,
  // 使用单引号 (true:单引号;false:双引号)
  singleQuote: false,
  // 缩进空格数，默认2个空格
  tabWidth: 2,
  // 元素末尾是否加逗号，默认es5: ES5中的 objects, arrays 等会添加逗号，TypeScript 中的 type 后不加逗号
  trailingComma: "es5",
  // 指定缩进方式，空格或tab，默认false，即使用空格
  useTabs: false,
  // vue 文件中是否缩进