代码风格

前端代码风格是指在编写前端代码时，遵循的一些规范和约定，旨在提高代码的可读性、维护性和可共享性。我们采用以 Airbnb 代码风格为主， Eslint 代码检测 + Prettier 格式化工具 为辅

Airbnb

Airbnb 是一个广泛采用的 JavaScript/React 编码规范，它提供了一套具体的代码规则和最佳实践，旨在提高代码质量、可读性和可维护性。Airbnb 的规范涵盖了代码布局、命名约定、语法选择等多个方面，以帮助开发者在团队协作或个人项目中保持一致的代码风格，具体我们在 css 以及 js 模块可以查看

Eslint

广泛的代码检测工具，在 JavaScript 代码中检测和报告问题的静态代码分析工具。它可以帮助开发者提高代码质量、确保代码风格一致性，并发现潜在的错误和问题。

主要作用：

1. 代码质量和一致性：ESLint 可以根据预定义的规则或自定义规则对代码进行静态分析，检查代码中可能存在的问题、不规范的写法、错误的语法等，并给出相应的警告或错误提示。通过使用 ESLint，开发者可以统一团队的代码风格，遵循最佳实践，提高代码质量和可读性。

2. 错误检测：ESLint 能够识别出代码中的潜在错误，如未声明的变量、重复的函数参数名、未使用的变量、使用了已废弃的 API 等，帮助开发者及时发现并修复这些问题，减少程序在运行时产生错误的可能性。

3. 提供建议和改进：除了检测错误和不规范的代码，ESLint 还可以给出代码改进的建议，如优化性能、简化逻辑、提升可维护性等方面的意见。这有助于开发者写出更高效、更健壮、更易维护的代码。

4. 可扩展性：ESLint 提供了丰富的插件和配置选项，可以灵活地扩展和定制规则。开发者可以根据项目需求或个人偏好，选择合适的插件、配置规则，以满足特定的代码检查需求。

什么是 Prettier

Prettier 是一个代码格式化工具，可以格式化代码，但不具备代码检查功能，它可以通过解析代码并使用自己的规则重新打印它，并考虑最大行长来强制一致的样式，并在必要时包装代码，如今，它已成为解决所有代码格式问题的优选方案，支持多种语言，可以将 ESLint 和 Prettier 结合使用，提高代码质量。

为什么要用 Prettier

上面 Prettier 的定义一看，是不是觉得和 ESLint 差不了多少？那么，有了 ESLint，为什么还要用 Prettier 呢？ 其实呀，ESLint 虽然是一个代码检测工具，可以检测代码质量问题并给出提示，但是提供的格式化功能有限，在代码风格上面做的不是很好，并且也只能格式化 JS，不支持 CSS,HTML 等语言。而在代码风格上面，Prettier 具有更加强大的功能，并且能够支持包括 JavaScript、TypeScript、各种 CSS、Vue 和 Markdown 等前端绝大部分的语言和文件格式。 因此，我们一般会将 ESLint 和 Prettier 一起结合起来使用，用 ESLint 进行代码校验，用 Prettier 统一代码风格。

Prettier 的特点

1. 无需手动配置：Prettier 在设计上追求零配置，即工具本身已经有了一套默认的代码格式化规则，无需手动配置。

2. 自动检测和格式化：Prettier 可以自动检测项目中的代码，并按照预定的规则进行格式化。只需在终端或编辑器中对文件执行 prettier 命令，或者配合相关插件实现自动格式化。

3. 语言支持广泛：Prettier 支持多种编程语言，包括 JavaScript、TypeScript、CSS、HTML、JSON、Markdown 等。可以在不同类型的文件中应用 Prettier 的格式化规则。

4. 代码压缩和格式化：Prettier 会根据一套预定义的规则对代码进行自动压缩和格式化，包括缩进、换行、空格、引号等。确保在整个项目中的代码风格一致，无论是个人编写的代码还是团队合作开发的代码。

5. 与编辑器插件配合使用：Prettier 提供了与主流编辑器（如 VS Code、Sublime Text、Atom 等）集成的插件，使得在编辑器中保存文件时可以自动触发 Prettier 进行格式化。具体可参考编辑器篇章

Eslint + Prettier 在项目中安装、配置与使用

1. 在不同项目中搭建所需依赖如下：
   ::: code-group

   {
     "devDependencies": {
       "@babel/eslint-parser": "^7.12.16",
       "@vue/cli-plugin-eslint": "~5.0.0",
       "eslint": "^7.32.0",
       "eslint-config-prettier": "^8.3.0",
       "eslint-plugin-prettier": "^4.0.0",
       "eslint-plugin-vue": "^8.0.3",
       "prettier": "^2.4.1",
     }
   }
   

   {
     "devDependencies": {
       "eslint": "^8.37.0",
       "eslint-config-prettier": "^8.8.0",
       "eslint-plugin-prettier": "^4.2.1",
       "eslint-plugin-vue": "^9.10.0",
       "prettier": "^2.8.7",
   
       // vite插件
       "vite-plugin-eslint": "^1.8.1"
     }
   }
   

   :::

2. 配置
   在项目根目录文件下添加四个文件，.eslint.js , .eslintignore , prettier.config.js , .prettierignore

   • eslint.js 文件主要是 eslint 的配置

     module.exports = {
       env: {
         browser: true,
         es2021: true,
         node: true,
       },
       extends: [
         "eslint:recommended",
         "plugin:vue/vue3-essential",
         "plugin:prettier/recommended",
       ],
       overrides: [],
       parserOptions: {
         ecmaVersion: "latest",
         sourceType: "module",
       },
       plugins: ["vue"],
       rules: {
         indent: ["error", 2],
         "linebreak-style": ["error", "unix"],
         quotes: ["error", "double"],
         semi: ["error", "always"],
       },
     };
     
   • eslintignore 文件配置让 eslint 忽略检查的文件夹或文件

     /build/
     /config/
     /js_sdk/*
     /dist/
     /*.js
     /test/unit/coverage/
     /node_modules/*
     /dist*
     /src/main.ts
     public
     *.md
     *.yaml
     .husky
     .eslintrc.js
     
   • prettier.config.js 文件主要是 prettier 的配置

     module.exports = {
       printWidth: 100,
       tabWidth: 2,
       useTabs: false,
       semi: false,
       vueIndentScriptAndStyle: false,
       singleQuote: true,
       quoteProps: "as-needed",
       bracketSpacing: true,
       trailingComma: "none",
       jsxSingleQuote: false,
       arrowParens: "always",
       insertPragma: false,
       requirePragma: false,
       proseWrap: "never",
       htmlWhitespaceSensitivity: "strict",
       endOfLine: "auto",
       rangeStart: 0,
     };
     
   • prettierignore 文件配置让 prettier 忽略格式化的文件夹或文件

     /node_modules/**
     /dist/
     /dist*
     /public/*
     /docs/*
     /vite.config.ts
     /src/types/env.d.ts
     /docs/**/*
     /plop/**/*
     CHANGELOG
     

3. 使用

   在 vscode 的使用 第一步，项目在 vscode 里打开，项目根目录有一个 .vscode 文件夹，然后在文件夹建立 settings.json 文件，没有就自己建一下，或者安装 EditorConfig for VS Code 插件。

   然后编辑 settings.json 文件内容

   {
     "editor.defaultFormatter": "esbenp.prettier-vscode", // 保存采用prettier格式化
     "editor.formatOnSave": true, // 保存
     "editor.codeActionsOnSave": {
       "source.organizeImports": true,
       "source.fixAll": true
     }
   }
   

注释

使用注释来解释代码的意图、实现细节以及其他相关信息。注释应该清晰、简明，并且放置在合适的位置

• html、js 的普通行、css 的注释主要说明简单意图以及其他相关信息
• js 的类、方法注释需要说明描述、指定所有参数和返回值的类型和值，具体参考 javascript 注释

异步编程

通过异步编程等方式处理异步操作，列如：我们在发起 http 请求,对于封装的异步请求方法,并做后续的处理

• Promise 处理回调

  Promise.then(); // 链式调用
  

  ::: tip 特别注意 在项目开发中，在使用 Promise 的链式调用时有 loading 之类的加载动画，一定要在 Promise 后添加 finally 的链式调用，并添加对应的处理结果 :::

• Async/Await，注意使用时最好要配合 try/catch 使用，尤其在一些关键的代码处，一定要加入，避免出现异常问题导致代码执行不下去，原因是 await 会阻塞进程

  // 声明
  async fn() {}
  // 使用
  await fn()
  

  ::: warning 配合 try/catch 使用：

  async fn {}
  try {
    await fn()
  } catch (error) {
    throw new Error(error)
  }
  

  :::

文件和目录结构

根据项目规模和需求，使用对应的技术栈，建立清晰的文件和目录结构，将不同类型的文件分组并进行合理命名，便于管理和查找。

具体的文件和目录结构可查看 项目规范与管理 篇章

第三方库和框架使用

遵循第三方库和框架的官方文档和最佳实践，按照约定使用它们的 API 和命名规范。