详解 ESLint 和 Prettier 的配置及其经验分享

前言

在前端开发中，代码的规范化和格式化是非常重要的，可以提高代码的可读性、可维护性和可扩展性。ESLint 和 Prettier 是两个常用的工具，可以帮助我们实现代码规范化和格式化。本文将详细介绍 ESLint 和 Prettier 的配置方法，并分享一些经验和实践。

ESLint

什么是 ESLint？

ESLint 是一个插件化的 JavaScript 代码检查工具，可以帮助我们发现代码中的问题，如语法错误、未声明变量、未使用的变量等。ESLint 有很多插件可以帮助我们检查代码的规范性，如 airbnb、standard 等。ESLint 的配置非常灵活，可以根据项目的需求进行配置。

如何配置 ESLint？

1. 安装 ESLint

npm install eslint --save-dev

1. 初始化 ESLint 配置文件

npx eslint --init

在初始化过程中，我们可以选择使用哪种配置，也可以自定义配置，如下所示：

? How would you like to configure ESLint? 
  Use a popular style guide 
❯ Use a popular style guide 
  Answer questions about your style 
  Inspect your JavaScript file(s) 

我们选择使用 popular style guide，然后选择 airbnb 风格，最后选择使用 npm 安装依赖。

1. 配置 .eslintrc.js 文件

在初始化过程中，ESLint 会生成一个 .eslintrc.js 文件，我们可以在其中添加自定义配置，如下所示：

// javascriptcn.com 代码示例
module.exports = {
  extends: ['airbnb', 'prettier'],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
    'import/extensions': 'off',
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.json'],
      },
    },
  },
};

在配置文件中，我们可以添加 extends、plugins、rules、env、parserOptions 和 settings 等属性，用于配置 ESLint 的规则、环境、解析器等。

ESLint 经验分享

1. 配置文件中的 extends 属性可以继承其他配置，如 airbnb、standard 等，可以避免重复配置。
2. plugins 属性可以用于加载其他插件，如 prettier，可以帮助我们与 Prettier 集成。
3. rules 属性可以用于配置规则，如 prettier/prettier 规则可以帮助我们检查代码格式是否符合 Prettier 的要求。
4. env 属性可以用于配置环境，如 browser、node、es6 等。
5. parserOptions 属性可以用于配置解析器，如 ecmaVersion、sourceType、ecmaFeatures 等。

Prettier

什么是 Prettier？

Prettier 是一个代码格式化工具，可以帮助我们自动格式化代码，使代码风格统一。Prettier 支持多种语言，如 JavaScript、TypeScript、CSS、HTML 等。

如何配置 Prettier？

1. 安装 Prettier

npm install prettier --save-dev

1. 创建 .prettierrc.js 文件

module.exports = {
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 80,
  tabWidth: 2,
};

在 .prettierrc.js 文件中，我们可以配置各种格式化选项，如 semi、trailingComma、singleQuote 等。

1. 配置 VS Code

在 VS Code 中，我们可以安装 Prettier 插件，并在设置中配置自动格式化选项，如下所示：

"editor.formatOnSave": true,
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},

Prettier 经验分享

1. 在 .prettierrc.js 文件中，我们可以配置各种格式化选项，如 semi、trailingComma、singleQuote 等，可以根据项目的需求进行配置。
2. Prettier 支持多种语言，如 JavaScript、TypeScript、CSS、HTML 等。
3. 在 VS Code 中，我们可以安装 Prettier 插件，并在设置中配置自动格式化选项，可以方便地实现自动格式化。

总结

ESLint 和 Prettier 是两个常用的工具，可以帮助我们实现代码规范化和格式化。ESLint 可以帮助我们发现代码中的问题，Prettier 可以帮助我们自动格式化代码。在使用 ESLint 和 Prettier 时，我们需要了解它们的配置方法，并根据项目的需求进行配置。通过规范化和格式化代码，我们可以提高代码的可读性、可维护性和可扩展性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6575585bd2f5e1655de83ba6