前端风格统一

18 阅读1分钟

ESLint: 用于 JavaScript/TypeScript 代码的静态分析工具。

插件:

eslint-plugin-import: 检查导入路径和导入顺序。

eslint-plugin-react: 针对 React 项目的规则。

eslint-plugin-vue: 针对 Vue.js 项目的规则。

@typescript-eslint/eslint-plugin: 针对 TypeScript 的规则。

文件:

eslint.config.js

Stylelint: 用于 CSS/Sass/Less 的样式检查工具。

插件:

stylelint-order: 用于定义 CSS 属性的排序。

stylelint-scss: 针对 SCSS 的规则。

stylelint-config-standard: 提供标准的样式检查规则。

文件:

Stylelint.config.js

Prettier: 代码格式化工具,支持多种语言。

插件:

eslint-plugin-prettier: 将 Prettier 作为 ESLint 规则运行。

stylelint-config-prettier: 关闭所有可能与 Prettier 冲突的 Stylelint 规则。

文件:

prettier.config.js

Husky: 用于 Git hooks 的工具,可以在提交代码前运行检查。

插件:

lint-staged: 只检查和格式化暂存区的文件。

运行:pnpx husky install

Commitlint: 用于检查提交信息的工具。

插件:

@commitlint/config-conventional: 使用 Angular 的提交信息规范。

通过结合这些工具和插件,你可以在项目中实现代码风格和质量的统一。根据项目的具体需求和技术栈,选择合适的插件进行配置。

文件:

prettier.config.js

Commitizen

插件:

cz-conventional-changelog

配置package.json:

"config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },

命令:

npx cz