ESLint 操作指南：与 Prettier 一起使用 ESLint-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要使用Lint工具来检查代码的质量和规范性。ESLint是一个常用的JavaScript代码检查工具，它可以帮助我们发现代码中的潜在问题并提供修复建议。同时，Prettier是一个代码格式化工具，它可以帮助我们自动格式化代码，使其符合一定的规范。本文将介绍如何使用ESLint和Prettier来提高代码质量和规范性。

安装ESLint和Prettier

首先，我们需要安装ESLint和Prettier。可以使用npm或者yarn来进行安装。

npm install eslint prettier --save-dev
# 或者
yarn add eslint prettier --dev

初始化ESLint配置文件

在项目根目录下执行以下命令，可以生成一个默认的ESLint配置文件。

npx eslint --init

根据提示选择合适的配置选项即可，也可以手动修改生成的.eslintrc.js文件来自定义配置。

安装ESLint和Prettier的插件

为了让ESLint和Prettier协同工作，我们需要安装一些插件。

npm install eslint-config-prettier eslint-plugin-prettier --save-dev
# 或者
yarn add eslint-config-prettier eslint-plugin-prettier --dev

配置ESLint和Prettier

在.eslintrc.js文件中添加以下配置即可。

module.exports = {
  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
};

这里的extends选项表示继承的配置文件，其中eslint:recommended是ESLint的推荐配置，plugin:prettier/recommended是Prettier的推荐配置。plugins选项表示使用的插件，这里只有prettier一个插件。rules选项表示规则配置，其中prettier/prettier表示应用Prettier的规则，如果代码不符合Prettier的规则，ESLint会报错。

集成ESLint和Prettier到开发工具中

为了让ESLint和Prettier在开发过程中自动检查和格式化代码，我们需要将它们集成到开发工具中。

Visual Studio Code

在VS Code中，可以安装ESLint和Prettier的插件，然后在settings.json文件中添加以下配置。

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "eslint.alwaysShowStatus": true
}

其中editor.formatOnSave表示保存时自动格式化代码，editor.codeActionsOnSave表示保存时自动修复ESLint报错，eslint.validate表示需要检查的文件类型，eslint.alwaysShowStatus表示始终显示ESLint的检查状态。

WebStorm

在WebStorm中，可以在Preferences中的Languages & Frameworks->JavaScript->Code Quality Tools中配置ESLint和Prettier。

示例代码

const foo = (a, b) => {
  console.log(a + b)
}

foo(1, 2)

上述代码不符合Prettier的规则，会报错。如果在VS Code中保存该文件，会自动格式化为以下代码。

const foo = (a, b) => {
  console.log(a + b);
};

foo(1, 2);

同时，如果修改为以下代码，ESLint也会报错。

const foo = (a, b) => {
  console.log(a + b)
}

foo(1, 2)

错误信息为Unexpected console statement.，表示不应该在生产代码中使用console语句。

总结

通过本文的介绍，我们学习了如何使用ESLint和Prettier来提高代码质量和规范性。ESLint可以帮助我们发现代码中的潜在问题并提供修复建议，Prettier可以帮助我们自动格式化代码，使其符合一定的规范。同时，我们也学习了如何将ESLint和Prettier集成到开发工具中，以便在开发过程中自动检查和格式化代码。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/662b4332d3423812e48bcc88