自动化前端编码规范，提升协作效率

2023-09-27 19:39:40

Eslint + Prettier + stylelint + Husky + Lint-staged简介

Eslint ：一个流行的JavaScript代码检查工具，可以帮助你发现代码中的错误和潜在问题。
Prettier ：一个代码格式化工具，可以自动将你的代码格式化成一致的风格。
stylelint ：一个CSS代码检查工具，可以帮助你发现代码中的错误和潜在问题。
Husky ：一个git钩子工具，可以在你提交代码之前自动运行一些任务，比如运行代码检查和代码格式化。
Lint-staged ：一个git钩子工具，可以在你提交代码之前自动运行一些任务，比如运行代码检查和代码格式化，但只针对受影响的文件。

使用Eslint + Prettier + stylelint + Husky + Lint-staged规范工程git提交信息和代码规范

1. 安装工具

npm install eslint prettier stylelint husky lint-staged --save-dev

2. 配置工具

在你的项目根目录下创建一个.eslintrc.js文件，并添加以下内容：

module.exports = {
  extends: ['eslint:recommended', 'prettier'],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': ['error'],
  },
};

在你的项目根目录下创建一个.prettierrc.js文件，并添加以下内容：

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  trailingComma: 'none',
  bracketSpacing: true,
  arrowParens: 'avoid',
};

在你的项目根目录下创建一个.stylelintrc.js文件，并添加以下内容：

module.exports = {
  extends: ['stylelint-config-standard'],
  rules: {
    'selector-class-pattern': null,
  },
};

在你的项目根目录下创建一个.huskyrc.js文件，并添加以下内容：

module.exports = {
  hooks: {
    'pre-commit': 'lint-staged',
  },
};

在你的项目根目录下创建一个.lintstagedrc.js文件，并添加以下内容：

module.exports = {
  '*.js': ['eslint --fix', 'prettier --write'],
  '*.css': ['stylelint --fix'],
};

3. 使用工具

现在你就可以使用这些工具来规范工程git提交信息和代码规范了。当你在项目根目录下运行git commit命令时，Husky会自动运行lint-staged，lint-staged会自动运行Eslint、Prettier和stylelint。如果你的代码中有错误或潜在问题，这些工具会报错，并阻止你提交代码。