手把手教你如何在 VS Code 中使用 ESLint 和 Prettier-JavaScript中文网-JavaScript教程资源分享门户

在我们的日常前端开发工作中，保持良好的代码风格和规范是非常重要的，它不仅可以提高代码的可读性和维护性，还可以减少人为出错的几率，为我们的团队协作提供便利。而 ESLint 和 Prettier 就是两款热门的 JavaScript 代码规范工具，能够帮助我们约束代码规范。

在本文中，我将手把手教你如何在 VS Code 中使用 ESLint 和 Prettier，内容详细，希望能为你提供深度的学习和指导意义。

什么是 ESLint 和 Prettier

ESLint 和 Prettier 是两款独立的 JavaScript 代码规范工具，它们各自有着不同的工作方式和设计目标。

ESLint

ESLint 是一款插件化的 JavaScript 代码检查工具，它从语法、风格、最佳实践等多个维度对代码进行检查，可以帮助我们在开发过程中捕捉潜在的问题，保证代码的质量。

ESLint 通过读取 .eslintrc 文件并应用一系列的规则来检测代码中的问题。它的核心是由一系列的规则集组成，能够配置的规则数量非常多。

Prettier

Prettier 是一款代码格式化工具，它能够自动调整代码的格式，使其符合预设的规则，从而减少代码格式方面的争议。

Prettier 不关心代码的语义和规则，它只负责代码的格式化。通常情况下，Prettier 表现出色，能够帮助我们专注于代码本身，而不是代码的排版格式。

如何在 VS Code 中配置 ESLint 和 Prettier

安装 ESLint 和 Prettier

在开始配置之前，我们需要先在本地安装 ESLint 和 Prettier：

npm install --save-dev eslint eslint-config-prettier prettier eslint-plugin-prettier

配置 ESLint

在项目根目录下新建 .eslintrc.js 并填入以下内容：

// javascriptcn.com 代码示例
module.exports = {
  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
  plugins: ['prettier'],
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    // 在这里添加自定义的规则
  },
};

配置说明：

extends 增加了 eslint:recommended 和 plugin:prettier/recommended，前者是 ESLint 官方推荐的规则集，后者是为了解决 Prettier 和 ESLint 的规则冲突。
plugins 增加了 prettier 插件。
env 中增加了 browser、es6 和 node 环境。其中 browser 表示运行在浏览器环境中，es6 表示使用 ES6 语法，node 表示运行在 Node.js 环境中。
parserOptions 中指定了 ECMAScript 版本、模块化方案以及特性，其中 jsx 表示支持 React 中的 JSX 语法。
rules 中可以根据实际情况添加自定义规则。

配置 Prettier

在项目根目录下新建 .prettierrc 并填入以下内容：

{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2
}

配置说明：

singleQuote 表示使用单引号。
semi 表示在语句结尾添加分号。
tabWidth 表示 Tab 缩进的大小。

配置 VS Code

为了让 ESLint 和 Prettier 在 VS Code 中生效，我们还需要对 VS Code 进行额外的配置。

在 VS Code 中安装 ESLint 和 Prettier - Code formatter 插件，可以通过快捷键 Ctrl + Shift + X 或者在菜单栏中选择 View -> Extensions 来搜索和安装这两个插件。

安装完成后，打开 VS Code 的配置文件 settings.json，并增加以下内容（可以使用快捷键 Ctrl + , 打开配置文件）：

// javascriptcn.com 代码示例
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "javascript.format.enable": false,
  "prettier.semi": true,
  "prettier.singleQuote": true
}

配置说明：

"editor.codeActionsOnSave" 中的 source.fixAll.eslint 表示在文件保存时自动根据 ESLint 的规则修复代码格式，从而保证代码的规范。
"editor.formatOnSave" 表示在文件保存时自动格式化代码。
"javascript.format.enable": false 表示禁用 VS Code 的默认格式化方式。
"prettier.*" 表示配置 Prettier 的相关格式化规则。

示例代码

让我们来看一个简单的示例代码，并观察 ESLint 和 Prettier 对其进行的规范化处理。

// javascriptcn.com 代码示例
import React, { Component } from 'react'

class HelloWorld extends Component {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
      </div>
    )
  }
}

export default HelloWorld

通过上面的配置，我们可以将这段代码自动规范化为：

// javascriptcn.com 代码示例
import React, { Component } from 'react';

class HelloWorld extends Component {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

export default HelloWorld;

可以看到，代码文件中的缩进方式、单引号、分号等都已经被规范化了，出现的不规范代码会提示错误或者警告，可以通过修复代码来达到规范化的目的。

总结

通过本文的介绍，你已经学会了如何在 VS Code 中配置 ESLint 和 Prettier，以及如何使用它们来规范化代码。这对于前端开发工作来说是非常重要的，不仅可以提高代码的可维护性和易读性，还可以在团队协作中提供更好的体验。希望这篇文章能够帮助到你，让你更好地了解前端开发工作。

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