【vue3-element-admin】ESLint+Prettier+Stylelint+EditorConfig 约束和统一前端代码规范

在vue3-element-admin项目中，要统一前端代码风格，可以使用ESLint、Prettier、Stylelint和EditorConfig。以下是如何配置它们以确保代码风格一致性的步骤：

1. 安装所需依赖：

npm install eslint prettier eslint-plugin-prettier eslint-config-prettier stylelint stylelint-config-standard --save-dev

2. 在项目根目录下创建.eslintrc.js，配置ESLint：

module.exports = {
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  rules: {
    // 自定义规则
  }
};

3. 创建.prettierrc.js，配置Prettier：

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "endOfLine": "auto"
}

4. 创建.stylelintrc.js，配置Stylelint：

{
  "extends": "stylelint-config-standard",
  "rules": {
    // 自定义规则
  }
}

5. 创建.editorconfig，配置EditorConfig：

root = true
 
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
 
[*.md]
trim_trailing_whitespace = false

6. 在package.json中添加lint脚本：

"scripts": {
  "lint": "eslint --ext .js,.vue src && stylelint '**/*.{vue,css,scss}'",
  "lint:fix": "eslint --fix --ext .js,.vue src && stylelint '**/*.{vue,css,scss}' --fix"
}

7. 运行lint脚本检查代码风格，或使用npm run lint:fix自动修复一些问题。

这样就配置了ESLint、Prettier、Stylelint和EditorConfig，它们将共同工作，确保代码风格的一致性。在提交代码或者合并分支时，可以集成到CI/CD流程中自动运行lint检查，以保证代码质量。