eslint

ESLint是一个JavaScript代码检查工具，用于在开发过程中检测代码中的潜在问题和风格违规。它可以帮助团队维持一致的代码风格，提高代码质量和可读性。

初始化

在项目中初始化eslint，官方提供了一个cli工具

npm init @eslint/config -- --config semistandard

根据步骤选择风格、框架、语言等，等待安装之后就会在项目根目录自动生成.eslintrc.js配置文件

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}

配置参数

下面是一些常用的eslint配置项

• extends：指定要继承的规则集。可以是ESLint内置的规则集，如eslint:recommended，也可以是其他扩展规则集或自定义的规则文件。

• rules：用于配置具体的规则。可以通过该参数来启用、禁用或修改规则的严重程度。例如，"semi": "error"表示要求使用分号，并将其视为错误。

• env：指定代码运行的环境。可以根据项目的需求设置不同的环境，如"node": true表示代码运行在Node.js环境中。

• globals：定义全局变量，以避免被ESLint标记为未定义的变量。

• parserOptions：用于配置解析器的选项，例如指定ECMAScript版本、启用特定的语言特性或语法支持。

• plugins：用于加载并使用ESLint插件。插件提供了额外的规则和功能，如React项目的eslint-plugin-react。

• ignorePatterns：指定要忽略的文件或文件夹的模式。这可以用来排除第三方库、生成的文件或其他不需要进行ESLint检查的内容。

• overrides：允许针对特定的文件、文件夹或Glob模式设置独立的ESLint配置。这可以用于根据特定的情况应用不同的规则或配置选项。

一个常见的问题是：extends和plugins有什么区别?

• extends是继承从某个规则模版，然后扩展自己的定制规则
• plugins插件提供了额外的规则和功能，可以扩展ESLint的检查能力，以适应特定的开发环境或框架。每个插件通常会提供一组规则，你可以根据需要启用或禁用这些规则。插件需要先通过npm或yarn进行安装，然后在配置文件中添加相应的插件配置项。插件名称通常以eslint-plugin-作为前缀

通过extends和plugins，可以定制和扩展ESLint的规则和功能，以满足特定项目和开发环境的需求。

一些注意事项

定义明确的规则集：选择合适的规则集是非常重要的，它应该符合你团队的编码规范和项目的需求。可以使用ESLint的默认规则集，如"eslint:recommended"，也可以使用其他扩展规则集或自定义规则。

配置文件位置和命名：配置文件.eslintrc应该放置在项目的根目录下，这样ESLint可以在整个项目中应用相同的规则。如果你希望为不同的文件夹或文件使用不同的规则，可以在相关文件夹中创建独立的.eslintrc文件或使用ESLint的配置注释。

集成到开发工具：ESLint可以与各种开发工具集成，如代码编辑器和构建工具。配置你的编辑器以在保存文件时自动运行ESLint，或者将ESLint集成到你的构建流程中，以确保在提交代码之前进行静态代码检查。

忽略文件和规则：有些文件可能不需要进行ESLint检查，例如第三方库或生成的文件。你可以在配置文件中使用ignorePatterns来指定要忽略的文件或文件夹。另外，有时候某些规则可能不适用于特定的情况，你可以使用eslint-disable注释来临时禁用某个规则。

持续维护和更新：ESLint的规则和插件经常更新，以修复问题、添加新功能或跟进最佳实践。定期更新ESLint和相关插件，以获取最新的功能和改进。

配置共享和团队协作：为了保持团队的一致性，推荐在项目中使用统一的ESLint配置，并将其纳入代码仓库中。这样可以确保团队成员在不同的开发环境中使用相同的规则。

了解规则和错误：理解ESLint的规则和错误是很重要的，这样你可以更好地理解ESLint的检查结果和警告信息，并根据需要进行调整和修复代码。

prettier

Prettier是一个代码格式化工具，用于自动格式化代码以符合一致的风格和约定。与ESLint不同，ESLint主要关注代码质量、潜在问题和代码风格规范的检查，而Prettier专注于代码的排版和格式。

首先在项目内安装

npm install --save-dev --save-exact prettier

然后再创建配置文件.prettierrc.js

module.exports = {
  semi: false,
  singleQuote: true,
  printWidth: 100
}

配置完成后，就可以使用命令prettier或者通过编辑器格式文件了

prettier可以帮助团队统一代码风格，提高代码的可读性和一致性。与ESLint结合使用可以更全面地维护代码的质量和风格。