多页面应用优化实践：巧用 ESLint、lint-Staged、Husky 和 stylelint

2023-12-23 19:55:37

提升 Vue 3 多页面应用的开发体验：使用 ESLint、lint-Staged、Husky 和 stylelint

在当今快节奏的开发环境中，维护高代码质量至关重要。对于 Vue 3 多页面应用，我们可以利用一系列工具来优化开发体验，同时确保代码可靠性和可维护性。

代码格式化与 lint 检查

ESLint 和 lint-Staged 联手协作为代码格式化和 lint 检查提供强大支持。ESLint 作为 JavaScript 代码检查工具，可强制执行代码风格和最佳实践，防止常见编码错误。lint-Staged 将 ESLint 集成到 Git 提交流程，确保代码在提交前通过 ESLint 检查。

要配置 ESLint 和 lint-Staged，请在项目中安装它们，创建相应的配置文件并将其添加到你的 Vue CLI 配置中。这些配置将定义代码风格规则并自动运行 lint-Staged 检查。

npm install eslint eslint-plugin-vue eslint-config-vue eslint-config-prettier
npm install lint-staged --save-dev

// .eslintrc.js
module.exports = {
  extends: ['eslint:recommended', 'plugin:vue/vue3-essential', 'prettier'],
  rules: {
    'vue/multi-word-component-names': 'off'
  }
};

// .lintstagedrc.js
module.exports = {
  '*.{js,vue,ts}': ['eslint --fix', 'git add'],
};

自动提交钩子

Husky 作为 Git 提交钩子管理器，在提交代码之前运行自定义脚本。我们可以使用 Husky 来增强我们的代码检查流程，通过添加一个 pre-commit 钩子，该钩子在提交代码之前触发 lint-Staged 检查。

要配置 Husky，请将其安装到项目中并创建一个包含该钩子的配置文件。

npm install husky --save-dev

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

CSS 风格检查

stylelint 是一个 CSS 代码检查工具，可以强制执行 CSS 编码风格和最佳实践。通过配置 stylelint 规则，我们可以确保 CSS 代码的格式一致，并避免常见的样式错误。

要配置 stylelint，请将其安装到项目中，并创建相应的配置文件。然后，将 stylelint-webpack-plugin 添加到 Vue CLI 配置中，以在构建过程中自动检查 CSS 代码。

npm install stylelint --save-dev

// .stylelintrc.js
module.exports = {
  extends: ['stylelint-config-standard'],
  rules: {
    'selector-class-pattern': '^\\.|^-[a-z]+\\-// .stylelintrc.js
module.exports = {
  extends: ['stylelint-config-standard'],
  rules: {
    'selector-class-pattern': '^\\.|^-[a-z]+\\-$',
  },
};

// vue.config.js
module.exports = {
  // ...
  configureWebpack: {
    plugins: [
      new StylelintWebpackPlugin({
        fix: true,
      }),
    ],
  },
  // ...
};
#x27;,
  },
};

// vue.config.js
module.exports = {
  // ...
  configureWebpack: {
    plugins: [
      new StylelintWebpackPlugin({
        fix: true,
      }),
    ],
  },
  // ...
};