返回

Chrome代码编辑器插件安装小妙招，几分钟轻松实现代码格式化！

前端

从前端开发的现状来说，代码格式化已经成为一种常规操作。合理、统一的代码格式可以大大提高代码的可读性和维护性，尤其是在多人协作开发项目时更是如此。市面上也有很多代码格式化工具可供选择，最常用的莫过于Prettier和ESLint。

本文将以Prettier为例，向你介绍如何轻松安装一个代码编辑器插件，实现代码的自动格式化。此外，还将提供关于如何结合ESLint使用以及在提交代码时自动格式化的相关知识，希望对你有帮助。

Prettier的安装

1. 安装插件

打开Chrome浏览器，前往Chrome网上应用店，搜索Prettier，找到并安装对应的插件。

2. 配置插件

安装完成后，在Chrome浏览器的右上角找到Prettier插件的图标，点击并打开设置页面。
在设置页面中，你可以选择代码格式化的相关选项，例如缩进方式、行宽、括号的使用等。

使用Prettier格式化代码

1. 手动格式化

在Chrome浏览器中打开需要格式化的代码文件，将代码粘贴到编辑器中，然后点击Prettier插件的图标即可格式化代码。

2. 自动格式化

Prettier插件还支持自动格式化功能。在设置页面中启用自动格式化选项，然后当你保存代码文件时，Prettier插件会自动格式化你的代码。

结合ESLint使用

1. 安装ESLint

打开你的终端，使用npm命令安装ESLint：

npm install eslint --save-dev

2. 创建配置文件

在项目根目录下创建一个名为.eslintrc.json的文件，并输入以下内容：

{
  "extends": ["eslint:recommended"],
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "double"],
    "semi": ["error", "always"]
  }
}

3. 使用ESLint检查代码

在终端中运行以下命令来检查代码：

npx eslint src/main.js

ESLint会报告代码中存在的问题。

在提交代码时自动格式化

1. 安装husky

打开你的终端，使用npm命令安装husky：

npm install husky --save-dev

2. 创建配置文件

在项目根目录下创建一个名为.huskyrc.js的文件，并输入以下内容：

module.exports = {
  hooks: {
    "pre-commit": "npm run lint-and-fix"
  }
};

3. 创建脚本

在项目根目录下创建一个名为lint-and-fix.js的文件，并输入以下内容：

#!/usr/bin/env node

const execa = require('execa');

(async () => {
  await execa('npx eslint --fix src/**/*.js');
})();

现在，当你提交代码时，husky会自动运行lint-and-fix脚本，格式化你的代码。