如何利用ESLint、StyleLint、Prettie保持前端代码的一致性？

你好同学，我是沐爸，欢迎点赞、收藏和关注！个人知乎、公众号"沐爸空间"

保持代码风格一致性，在软件开发过程中具有诸多好处，它不仅仅关乎美观，更关乎团队协作效率、代码可维护性和可读性。接下来一起看看怎么实现吧。

ESLint

ESLint 是一个可配置的 JavaScript linter。它可以帮助开发者查找并修复 JavaScript 代码中的问题。

安装依赖

npm i eslint -D

初始化配置

npx eslint --init

按照提示进行自定义配置，完成后生成 eslint.config.mjs 。

tips：所有配置均需使用 eslint.config.mjs 文件，老的 eslintrc.js 和 .eslintrc.json不再被支持。

配置脚本 package.json

"scripts": {
  "eslint": "eslint src",
  "eslint:fix": "eslint src --fix",
}

运行脚本

npm run eslint
npm run eslint-fix

运行完脚本会在控制台看到不符合 ESLint 规范的错误提示。

Prettie

安装依赖

npm i prettier -D

配置 .prettierrc

{
  "singleQuote": true,
  "semi": false,
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "endOfLine": "auto",
  "trailingComma": "none",
  "tabWidth": 2
}

注意：使用时，.prettierrc 文件中不能有注释。

配置脚本 package.json

"scripts": {
    "prettier": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\""
}

运行命令

npm run prettier

StyleLint

安装依赖

npm i -D stylelint stylelint-config-standard stylelint-config-recess-order postcss postcss-html postcss-scss

配置 stylelint.config.js

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recess-order' // 配置css属性书写顺序插件
  ],
  ignoreFiles: ['src/**/normalize.min.scss'], // 忽略文件设置，可以写多个，可以是文件或文件夹
  overrides: [
    {
      files: ['**/*.(scss|css|vue|html)'],
      customSyntax: 'postcss-scss'
    },
    {
      files: ['**/*.(html|vue)'],
      customSyntax: 'postcss-html'
    }
  ]
}

配置脚本

"scripts": {
    "stylelint": "stylelint src/**/*.{css,scss,vue,html} --fix"
}

Husky

安装 husky

npm i husky -D

初始化 husky

npx husky-init

初始化后会在根目录下生成个一个 .husky 目录，目录下有个 pre-commit 文件，文件中的命令会在 git commit 时执行。

配置 pre-commit hook
把上面的几个脚本命令加入到文件下方即可。

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm run prettier 
npm run stylelint
npm run eslint:fix

把 npm run eslint:fix 放在最后，是因为该命令运行有报错时，不会继续向下执行 pre-commit 中的其他钩子。
到这里配置基本都完成了，在执行 git commit 之前，就会先执行代码格式化和代码修复，从而实现代码风格的一致性。

接下来，自己动手试试吧！

关联文章：

• 如何简单理解前端工程化？
• 如何校验 commit message 是否符合规范，这有四种方式