ESLint 与 Prettier，打造更加优雅的代码风格-JavaScript中文网-JavaScript教程资源分享门户

ESLint 与 Prettier，打造更加优雅的代码风格

在日常的前端开发中，代码风格的一致性不仅涉及到阅读代码的易读性，还关系到代码质量的提升和团队协作的效率。ESLint 和 Prettier 是目前比较流行的前端代码检查和格式化工具，它们可以帮助我们规范代码的风格，提高代码的可读性和可维护性。

本文将介绍 ESLint 和 Prettier 的作用、安装和使用方法，并提供示例代码供读者学习和参考。

一、ESLint

作用

ESLint 是一个开源代码检查工具，用于检查和报告 JavaScript 代码中的语法和代码风格问题。它可以检查代码中的语法错误、变量作用域、空格使用、缩进、命名规范等，同时也可以集成其他插件来检查代码质量、安全性等方面的问题。

安装

全局安装：

npm install -g eslint

本地安装：

npm install eslint --save-dev

使用

使用 ESLint 可以通过以下两种方式：

(1) 通过命令行检查指定文件

eslint <file.js>

(2) 在代码编辑器中集成 ESLint 插件

推荐使用 VS Code，并安装 ESLint 插件以便实时检查代码。

配置

ESLint 的配置文件可以是 .eslintrc 或 .eslintrc.json 等不同的格式，在其中定义了不同规则和规范供 ESLint 进行检查。

在新建项目时，我们可以通过初始化命令来创建一个初始的配置文件：

eslint --init

在页面上按照提示选择要使用的规则或输入配置即可。

二、Prettier

作用

Prettier 是一个代码格式化工具，可以格式化 JavaScript 代码以符合定义的规范。它可以自动调整代码缩进、单/双引号、换行符等格式，还可以删除尾随空格等不合适的格式。

安装

全局安装：

npm install -g prettier

本地安装：

npm install prettier --save-dev

使用

使用 Prettier 可以通过以下两种方式：

(1) 通过命令行格式化指定文件

prettier --write <file.js>

(2) 在代码编辑器中集成 Prettier 插件

可以配合 ESLint 一起使用，方便实时格式化代码，并可以根据 ESLint 生成的规则进行格式化。

配置

默认情况下，Prettier 已经为我们设置好了一些默认的格式化规则，如果需要自己配置，则可以在项目根目录下新建 .prettierrc 文件，内容如下：

{
  "semi": true,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 80
}

其中 semi 表示是否需要在语句末添加分号，trailingComma 表示是否在对象和数组的最后一个元素后添加逗号，singleQuote 表示是否使用单引号代替双引号，printWidth 表示每行最大字符数。

三、使用 ESLint 和 Prettier 打造优雅的前端代码风格

安装

安装 ESLint 和 Prettier:

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

eslint-config-prettier：用于将 ESLint 的规则与 Prettier 的规则进行协同处理，确保 ESLint 的规则不和 Prettier 的规则冲突。
eslint-plugin-prettier：用于在 ESLint 中集成 Prettier，使 ESLint 可以根据 Prettier 格式化代码。

配置 ESLint

在项目目录下创建 .eslintrc.json 文件，并添加以下内容：

{
  "extends": ["plugin:prettier/recommended"]
}

其中 plugin:prettier/recommended 是用于集成 Prettier 的规则。我们还可以通过 "rules" 字段来定义自己的 ESLint 规则。

配置 Prettier

在项目目录下创建 .prettierrc 文件，并添加以下内容：

{
  "semi": true,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 80
}

集成 ESLint 和 Prettier

在 VS Code 的设置中添加以下配置：

// www.javascriptcn.com code example
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.alwaysShowStatus": true,
  "eslint.validate": ["javascript", "javascriptreact"],
  "eslint.options": {
    "configFile": ".eslintrc.json"
  },
  "prettier.eslintIntegration": true,
  "prettier.printWidth": 80,
  "prettier.trailingComma": "none",
  "prettier.singleQuote": true,
  "prettier.semi": true
}

其中 editor.formatOnSave 表示保存时是否格式化代码，editor.defaultFormatter 表示默认使用哪个格式化工具，我们可以设置为 prettier 或别的格式化工具，最后，我们需要开启 ESLint 和 Prettier 的集成，以实现自动格式化代码和实时检查代码。

接下来，我们就可以愉快的开发啦！

示例代码

// www.javascriptcn.com code example
/**
 * 使用 ESLint 和 Prettier 规范代码风格
 */

// 推荐使用 const 声明常量
const name = 'JavaScript';
console.log(`Hello, ${name}!`);

// 不推荐使用 var 声明变量
var age = 18;

// 使用箭头函数
const double = num => num * 2;

// 使用解构赋值
const { x, y } = { x: 1, y: 2 };

// 使用延展运算符
const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];

// 对象属性简写
const obj = { x, y };

// 对象方法简写
const obj2 = {
  method() {
    console.log(this);
  }
};

// 在函数中使用默认值
function add(x = 0, y = 0) {
  return x + y;
}

// 不要在 if 语句中使用 var 声明变量，用 let 或 const 代替
if (true) {
  let flag = false;
  const data = [1, 2, 3, 4, 5];
}

// 使用 String.includes() 代替 indexOf()
const str = 'hello world';
console.log(str.includes('o'));

// 使用 Array.includes() 代替 Array.indexOf()
console.log(arr.includes(3));

以上就是本次分享的内容，希望对大家有所帮助。通过使用 ESLint 和 Prettier，可以让我们遵循更好的代码风格，提高代码质量和开发效率，建议在工作中使用它们。

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

ESLint 与 Prettier，打造更加优雅的代码风格

接着读