HBuilderX创建的uniapp项目配置Eslint+Prettier帮助开发者在由 HBuilderX 创建的 u

前言

对于习惯传统开发方式的开发者而言，初次接手由 HBuilderX 创建的 uni-app 项目，无疑会面临一系列挑战。HBuilderX 对项目进行了深度封装，其诸多配置与设置和传统开发模式大相径庭。在探索 uni-app 项目开发的过程中，积累了不少宝贵经验。接下来，我将分享一下通过HbuilderX创建的uniapp项目，要如何配置Eslint+Prettier，并且无论是使用HbuilderX还是VSCode都能正常工作的方法。

啰嗦两句为什么项目开发需要配置ESlint和Prettier

1. 提高代码质量

ESLint：ESLint是一个静态代码分析工具，用于识别和报告JavaScript代码中的模式和问题。通过配置ESLint，你可以捕获潜在的错误、代码中的反模式和不符合最佳实践的地方。例如，ESLint可以帮助你发现未定义的变量、未使用的变量、不安全的代码模式等。
Prettier：Prettier是一个代码格式化工具，用于自动格式化代码，使其符合指定的代码风格。Prettier可以确保代码的一致性，避免因代码风格问题导致的错误。

2. 提高开发效率

自动修复代码问题：ESLint和Prettier都可以自动修复一些常见的代码问题和格式问题，减少开发者手动修复的时间和精力。
集成开发环境（IDE）支持：大多数现代IDE和代码编辑器（如VSCode、WebStorm等）都支持ESLint和Prettier的集成，可以在开发过程中实时提示和自动修复代码问题，提高开发效率。

3. 减少代码错误

捕获潜在错误：ESLint可以帮助你捕获潜在的代码错误和反模式，减少代码中的bug。例如，ESLint可以检测未定义的变量、未使用的变量、不安全的代码模式等。
强制最佳实践：通过配置ESLint规则，你可以强制团队遵循最佳实践，减少代码中的潜在问题。例如，ESLint可以强制使用严格模式、避免使用全局变量、限制复杂度等。

4. 提高团队协作效率

统一的代码风格：通过配置Prettier，团队成员可以使用统一的代码风格，减少因代码风格差异引发的冲突和讨论。
减少代码合并冲突：一致的代码风格和自动格式化可以减少代码合并时的冲突，提高团队协作效率。

开始配置

如题，是基于HBuilderX创建的小程序项目，非cli方式创建的项目

1. 下载插件与安装

打开DCloud插件市场，下载formatAndSave、eslint-plugin-vue、eslint-js三个插件并导入HBuilderX

2. 进行插件配置

1. 配置formatAndSave插件

打开编辑器配置，关闭保存时自动格式化的选项

在项目根目录创建.prettierrc.js，并写入以下内容，具体规则可自行修改

module.exports = {
  printWidth: 180, // 指定换行的行长，默认80。设置为180可以避免不必要的换行。
  tabWidth: 2, // 指定每个缩进级别的空格数，默认2。通常情况下，2个空格的缩进更为常见。
  useTabs: false, // 用制表符而不是空格缩进，默认false。大多数项目更倾向于使用空格缩进。
  semi: true, // 在语句末尾添加分号，默认true。设置为true表示在语句末尾添加分号。
  singleQuote: true, // 使用单引号而不是双引号，默认false。如果你希望使用单引号，可以设置为true。
  quoteProps: 'preserve', // object对象中key值是否加引号，默认as-needed。只有在必要时才添加引号。
  jsxSingleQuote: false, // 在 JSX 中使用单引号而不是双引号，默认false。如果你希望在 JSX 中使用双引号，可以保持此值为false。
  trailingComma: 'es5', // 取消尾随逗号，默认es5。设置为"none"表示不添加尾随逗号。
  bracketSpacing: true, // 对象字面量中括号之间的空格，默认true。在对象字面量中添加空格可以提高可读性。
  bracketSameLine: false, // 将>放在多行 HTML（HTML、JSX、Vue、Angular）元素最后一行的末尾，默认false。保持默认值可以提高代码的可读性。
  arrowParens: 'always', // 在唯一的箭头函数参数周围包含括号，默认always。这有助于避免一些潜在的语法错误。
  proseWrap: 'preserve', // 超过最大宽度是否换行，默认preserve。保持默认值可以避免不必要的换行。
  htmlWhitespaceSensitivity: 'ignore', // 指定 HTML、Vue、Angular 和 Handlebars 的全局空格敏感度，默认ignore。忽略多余的空格可以提高代码的整洁度。
  vueIndentScriptAndStyle: false, // vue文件script和style标签中是否缩进，默认false。保持默认值可以避免不必要的缩进。
  endOfLine: 'lf', // 行尾换行符，默认lf。使用LF换行符可以确保跨平台兼容性。
  embeddedLanguageFormatting: 'auto', // 控制 Prettier 是否格式化嵌入在文件中的引用代码，默认auto。保持默认值可以让 Prettier 自动处理嵌入代码的格式化。
  singleAttributePerLine: false, // 在 HTML、Vue 和 JSX 中强制执行每行单个属性，默认false。保持默认值可以避免不必要的换行。
  parsers: {
    '.nvue': 'vue', // 将.nvue文件视为Vue文件进行格式化
    '.ux': 'vue', // 将.ux文件视为Vue文件进行格式化
    '.uvue': 'vue', // 将.uvue文件视为Vue文件进行格式化
    '.uts': 'typescript', // 将.uts文件视为TypeScript文件进行格式化
  },
};

打开一个vue文件进行保存测试，如果是首次新添加prettier格式化，会弹出选择框让你选择，直接选择一直选择prettier即可，后续会自动格式化。
酌情添加.prettierignore

2. 配置eslint插件

打开插件配置，找到eslint-js列和eslint-vue列，启用实时校验

在项目根目录创建.eslintrc.js，并写入以下内容，具体规则可自行修改

//详细配置教程请参考：http://eslint.cn/docs/user-guide/configuring
module.exports = {
  plugins: ['html'],
  extends: 'plugin:vue/base',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
    allowImportExportEverywhere: false,
  },
  'settings': {
	'html/html-extensions': ['.erb', '.handlebars', '.hbs', '.htm', '.html', '.mustache', '.nunjucks', '.php', '.tag', '.twig', '.wxml', '.we'],
  },
  rules: {
    /*
      "off" 或 0 - 关闭规则
      "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
      "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
      */
    camelcase: 2, // 强制驼峰法命名
    'id-match': 0, //命名检测
    'init-declarations': 2, //声明时必须赋初值
    'no-undef': 1, //不能有未定义的变量
    'no-alert': 0,
    semi: ['error', 'always'], // 结尾使用分号, // 要求或禁止使用分号代替 ASI
    'no-extra-semi': 1, //禁止不必要的分号
    indent: ['off', 2], // 相同的缩进2
    eqeqeq: ['error', 'always'], // 用强等于做判断
    'no-multi-spaces': 'error', //禁止使用多个空格
    'no-const-assign': 2, //禁止修改const声明的变量
    quotes: ['error', 'single'], //必须使用双引号
    'no-trailing-spaces': 1, //禁用行尾空格
	'no-dupe-keys': 'error', //禁止对象字面量中出现重复的 key
    'comma-dangle': [
      'error',
      {
        'arrays': 'always-multiline',
        'objects': 'always-multiline',
        'imports': 'always-multiline',
        'exports': 'always-multiline',
        'functions': 'never',
      },
    ], //要求或禁止末尾逗号
    'object-curly-spacing': ['error', 'always'], // 要求花括号内有空格 (除了 {})
    'no-multiple-empty-lines': [
      'warn',
      {
        max: 1,
        maxEOF: 1,
      },
    ], //禁止出现多行空行
    'key-spacing': [
      // 强制在对象字面量的属性中键和值之间使用一致的间距
      'warn',
      {
        afterColon: true,
      },
    ],
    //在computed properties中禁用异步actions
    'vue/no-async-in-computed-properties': 'error',
    //不允许重复的keys
    'vue/no-dupe-keys': 'error',
    //不允许重复的attributes
    'vue/no-duplicate-attributes': 'warn',
    //在 标签下不允许解析错误
    'vue/no-parsing-error': [
      'error',
      {
        'x-invalid-end-tag': false,
      },
    ],
    //不允许覆盖保留关键字
    'vue/no-reserved-keys': 'error',
    //强制data必须是一个带返回值的函数
    // "vue/no-shared-component-data": "error",
    //不允许在computed properties中出现副作用。
    'vue/no-side-effects-in-computed-properties': 'error',
    //不允许key属性
    'vue/no-template-key': 'warn',
    //在 中不允许mustaches
    'vue/no-textarea-mustache': 'error',
    //不允许在v-for或者范围内的属性出现未使用的变量定义
    'vue/no-unused-vars': 'warn',
    //标签需要v-bind:is属性
    'vue/require-component-is': 'error',
    // render 函数必须有一个返回值
    'vue/require-render-return': 'error',
    //保证 v-bind:key 和 v-for 指令成对出现
    'vue/require-v-for-key': 'error',
    // 检查默认的prop值是否有效
    'vue/require-valid-default-prop': 'error',
    // 保证computed属性中有return语句
    'vue/return-in-computed-property': 'error',
    // 强制校验 template 根节点
    'vue/valid-template-root': 'error',
    // 强制校验 v-bind 指令
    'vue/valid-v-bind': 'error',
    // 强制校验 v-cloak 指令
    'vue/valid-v-cloak': 'error',
    // 强制校验 v-else-if 指令
    'vue/valid-v-else-if': 'error',
    // 强制校验 v-else 指令
    'vue/valid-v-else': 'error',
    // 强制校验 v-for 指令
    'vue/valid-v-for': 'error',
    // 强制校验 v-html 指令
    'vue/valid-v-html': 'error',
    // 强制校验 v-if 指令
    'vue/valid-v-if': 'error',
    // 强制校验 v-model 指令
    'vue/valid-v-model': 'error',
    // 强制校验 v-on 指令
    'vue/valid-v-on': 'error',
    // 强制校验 v-once 指令
    'vue/valid-v-once': 'error',
    // 强制校验 v-pre 指令
    'vue/valid-v-pre': 'error',
    // 强制校验 v-show 指令
    'vue/valid-v-show': 'error',
    // 强制校验 v-text 指令
    'vue/valid-v-text': 'error',
    'vue/comment-directive': 0,
	  },
};

酌情添加.eslintignore

经过以上步骤配置，ESlint和Prettier此时已经可以在HBuilderX里正常工作了，但很多人其实更喜欢使用VSCode来做开发工作，因为VSCode有更多好用的插件能提示开发效率。以下将介绍使ESlint和Prettier在VSCode运行的方法，其实经过以上步骤后，后续步骤已经很简单

3. VSCode中运行

在VSCode安装eslint和prettier两个插件
通过npm命令安装eslint，eslint-plugin-html，eslint-plugin-vue
```
npm i eslint@8 eslint-plugin-html eslint-plugin-vue@8 -D
```
为什么要安装@8 ？因为eslint9以上版本仅支持eslint.config.js配置文件，现暂不确定HBuilderX内置的版本是多少，所以还是安装旧版为妥。
打开一个vue文件进行编辑测试（建议先关闭保存自动格式化再测试）

4. 注意事项

如果出现配置完无效，可尝试重启HBuilderX或VSCode使其重新加载配置

经过以上步骤，无论是使用HBuilderX还是VSCode都可以使Eslint+Prettier正常工作啦！

下一期将讲讲HBuilderX创建的uniapp项目如何配置unocss，点赞收藏关注催更吧~