使用 ESLint+Prettier+VS Code 保证 JS 代码规范

前言

在前端开发中，代码规范是非常重要的一环。代码规范的好坏直接影响代码的可读性、可维护性以及团队合作的效率。为了保证代码规范，我们可以使用 ESLint 和 Prettier 这两个工具。本文将介绍如何在 VS Code 中配置 ESLint 和 Prettier，并使用它们来保证 JS 代码规范。

ESLint

ESLint 是一个用于检查 JavaScript 代码是否符合规范的工具。它可以帮助我们发现代码中的潜在错误、不一致的风格以及不必要的复杂性。在使用 ESLint 之前，我们需要先安装它。在终端中输入以下命令：

npm install eslint --save-dev

安装完成后，我们需要创建一个 .eslintrc 文件来配置 ESLint。以下是一个简单的 .eslintrc 配置文件：

// www.javascriptcn.com code example
{
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "env": {
    "es6": true,
    "browser": true
  },
  "rules": {
    "no-console": "off",
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

• extends：指定了我们要使用的 ESLint 规则集，这里使用了 eslint:recommended，它包含了一些常见的规则。
• parserOptions：指定了使用的 ECMAScript 版本。
• env：指定了代码运行的环境，这里指定了浏览器和 ES6。
• rules：指定了我们要使用的规则，这里禁用了 no-console 规则，使得我们可以在代码中使用 console，并且指定了缩进、引号和分号的规则。

在 VS Code 中，我们可以安装 ESLint 插件来检查代码是否符合规范。在 VS Code 中按下 Ctrl + Shift + X 打开扩展面板，搜索 ESLint 并安装。安装完成后，我们需要在 VS Code 的设置中启用 ESLint：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true
}

以上配置将在保存文件时自动修复代码中的错误，并在状态栏中显示 ESLint 的检查结果。

Prettier

Prettier 是一个代码格式化工具，它可以将代码格式化成一致的风格，从而提高代码的可读性和可维护性。在使用 Prettier 之前，我们需要先安装它。在终端中输入以下命令：

npm install prettier --save-dev

安装完成后，我们需要创建一个 .prettierrc 文件来配置 Prettier。以下是一个简单的 .prettierrc 配置文件：

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

• singleQuote：使用单引号而非双引号。
• semi：使用分号。
• tabWidth：缩进宽度为 2。
• trailingComma：在对象或数组最后一个元素后面加上逗号。

在 VS Code 中，我们可以安装 Prettier 插件来格式化代码。在 VS Code 中按下 Ctrl + Shift + X 打开扩展面板，搜索 Prettier 并安装。安装完成后，我们需要在 VS Code 的设置中启用 Prettier：

{
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "prettier.semi": true,
  "prettier.tabWidth": 2,
  "prettier.trailingComma": "es5"
}

以上配置将在保存文件时自动格式化代码，并使用我们指定的 Prettier 规则。

ESLint + Prettier

ESLint 和 Prettier 都可以帮助我们保证代码规范，但它们的规则集有些重叠，有时候会产生冲突。为了解决这个问题，我们可以使用 eslint-config-prettier 插件来禁用 ESLint 中与 Prettier 冲突的规则。在终端中输入以下命令：

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

安装完成后，我们需要修改 .eslintrc 文件：

// www.javascriptcn.com code example
{
  "extends": ["eslint:recommended", "prettier"],
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "env": {
    "es6": true,
    "browser": true
  },
  "rules": {
    "no-console": "off",
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

以上配置中，我们将 extends 属性修改为 ["eslint:recommended", "prettier"]，这样 ESLint 将会使用 eslint:recommended 规则集和 Prettier 的规则。这样就可以避免 ESLint 和 Prettier 的规则冲突了。

示例代码

以下是一个使用了 ESLint 和 Prettier 的示例代码：

// www.javascriptcn.com code example
const a = 1
const obj = {
  name: 'Alice',
  age: 18,
}
console.log(obj)

function sum(a, b) {
  return a + b
}
console.log(sum(1, 2))

在保存文件时，ESLint 和 Prettier 将会自动修复代码中的错误和格式化代码：

// www.javascriptcn.com code example
const a = 1
const obj = {
  name: 'Alice',
  age: 18,
}
console.log(obj)

function sum(a, b) {
  return a + b
}
console.log(sum(1, 2))

结语

通过使用 ESLint 和 Prettier，我们可以保证代码规范，提高代码的可读性和可维护性。在实际开发中，我们应该根据团队的需求和项目的特点来配置 ESLint 和 Prettier。

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