小程序 ESLint Prettier

Posted 2023-03-04 aikongmeng

什么是ESLint?

ESLint 是一个用于检查 javascript 代码中潜在问题和错误的工具，它可以帮助开发人员在编写代码的过程中发现常见的错误、规范代码风格，并遵循一致的代码风格和最佳实践。ESLint 可以自定义规则集，也支持许多插件来扩展其功能，例如支持 React 和 Vue 等框架的插件。
在小程序中，我们可以使用 ESLint 来帮助我们检查代码，并提高代码的质量和可读性。

使用 ESLint 有以下几个优点：

1. 提高代码质量：ESLint 可以检查代码中的语法错误、潜在问题、代码风格等，并给出相应的提示和建议，帮助开发人员写出更加可靠、稳定、易于维护的代码。
2. 统一代码风格：ESLint 可以通过配置文件指定代码风格和规则，帮助开发人员在团队协作中保持一致的代码风格和最佳实践。
3. 提高开发效率：ESLint 可以在开发过程中实时检查代码，并及时给出反馈，帮助开发人员快速发现和解决问题，提高开发效率。

在小程序中使用 ESLint 需要先安装相应的插件，并创建配置文件。以下是一个简单的 ESLint 配置eslintrc文件示例：

  "env": 
    "browser": true,
    "es6": true
  ,
  "extends": "eslint:recommended",
  "parserOptions": 
    "sourceType": "module"
  ,
  "rules": 
    "no-console": "off",
    "no-unused-vars": "warn",
    "indent": [
      "error",
      2
    ],
    "quotes": [
      "error",
      "single"
    ],
    "semi": [
      "error",
      "always"
    ]
  

以上示例中配置了环境、继承规则、解析选项和具体的规则，其中包括禁用 console、警告未使用的变量、强制两个空格的缩进、使用单引号和强制分号等。可以根据项目需求和个人偏好进行相应的配置。

Prettier 是一个 “有主见” 的代码格式化工具

Prettier 是一个代码格式化工具，可以帮助开发者自动格式化代码，统一团队中所有人的代码风格，减少代码合并和冲突，提高代码的可读性。Prettier 支持多种编程语言，包括 JavaScript、TypeScript、CSS、html 等，并支持配置文件和集成到编辑器和 IDE 中使用.这个工具能够使输出代码保持风格一致.

搭配使用

// .eslintrc    
      
     extends: ['plugin:prettier/recommended', 'prettier'],  

ESLint 和 Prettier 可以结合使用，ESLint 负责检查代码中的问题和错误，Prettier 负责格式化代码。结合使用可以保证代码风格一致，并提高代码质量和可读性。

参考链接

ESLint: https://eslint.org/
Prettier: https://prettier.io/