推荐两款好用的js格式化工具

作为网站作者，我可以在这里分享两款我个人推荐的 JS 格式化工具，它们分别是 Prettier 和 ESLint。下面我将对它们进行详细的讲解和使用攻略。

Prettier

简介

Prettier 是一款非常受欢迎的格式化工具，支持多种编程语言，其中包括 JavaScript。使用 Prettier 可以让你的代码更加整洁、易读，并且具有可维护性。Prettier 支持自定义配置，包括缩进大小、换行符等，非常灵活。

安装

在命令行中输入以下命令即可安装 Prettier：

npm install -D prettier

使用

Prettier 可以通过命令行、编辑器插件、JS API 等方式使用，下面以命令行和编辑器插件为例子说明。

1. 命令行

在命令行中输入以下命令可以对指定文件进行格式化：

prettier --write file.js

也可以指定一个目录，对该目录下所有文件进行格式化：

prettier --write .

2. 编辑器插件

Prettier 集成到了很多编辑器中，例如 VSCode、Sublime Text 等。在 VSCode 中，你可以通过以下步骤快速集成 Prettier：

1. 安装插件 Prettier - Code formatter。
2. 在 VSCode 设置中添加以下配置：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

这样，每次你保存代码的时候，Prettier 就会自动对其进行格式化了。

示例

下面是一段没有使用 Prettier 格式化的 JavaScript 代码：

function foo(){return {bar: 1};}

使用 Prettier 进行格式化之后，代码将变成：

function foo() {
  return { bar: 1 };
}

可以看到，使用 Prettier 可以让代码更加清晰易读。

ESLint

简介

ESLint 是一款便于集成到项目中的 JavaScript 语法检查工具，它支持一些规则配置及插件，可以根据个人需求调整，同时还支持自定义规则。ESLint 可以帮助开发者发现潜在问题及代码缺陷，提高代码的可读性、可维护性和一致性。

安装

在命令行中输入以下命令即可安装 ESLint：

npm install eslint --save-dev

配置

创建一个新的配置文件（.eslintrc.js）并将以下代码添加到文件中：

module.exports = {
  extends: ["eslint:recommended"],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  rules: {},
};

这里使用了 eslint:recommended 规则，也可以使用其它规则或自定义规则。

使用

使用 ESLint 可以通过命令行、编辑器插件、JS API 等方式，下面以命令行和编辑器插件为例进行说明。

1. 命令行

在命令行中输入以下命令对指定文件进行检查：

eslint file.js

2. 编辑器插件

ESLint 集成到了很多编辑器中，例如 VSCode、Sublime Text 等。在 VSCode 中，你可以通过以下步骤快速集成 ESLint：

1. 安装插件 ESLint。
2. 在 VSCode 设置中添加以下配置：

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

这样，每次你保存代码的时候，ESLint 就会自动对代码进行检查，并且在编辑器右下角显示检查结果。

示例

下面是一段违反 ESLint 规则的 JavaScript 代码：

let a = 1;
if(a==1){
    console.log('a is 1');
}

使用 ESLint 进行检查之后，会提示以下错误：

6:5  error  Expected indentation of 2 spaces but found 4  indent

这是因为缩进没有按照规范进行，在编辑器中编辑后，ESLint 可以自动修复错误。

总之，无论是 Prettier 还是 ESLint，都是非常优秀的工具，可以帮助我们更好地进行代码规范化、风格统一等。具体使用哪一款，取决于你的项目需求和个人偏好。