使用 ESLint 和 VS Code 编写干净的 JavaScript 代码-JavaScript中文网-JavaScript教程资源分享门户

引言

JavaScript 是一门动态的、解释性的、弱类型的语言，它的灵活性和开发效率使得它成为了前端开发的主流语言。但是，这种灵活性也带来了一些问题——JavaScript 编写出了很多不规范的、难以维护的代码，也导致了很多不同的开发风格。为了提高代码的质量，我们可以使用 ESLint 和 VS Code 来规范我们的 JavaScript 代码。

ESLint 是什么？

ESLint 是一个开源的静态代码分析工具，它可以用来检查代码规范和找出代码中的一些问题。ESLint 可以检查 JavaScript 代码是否符合一些编码规范，例如：

缩进
引号
变量声明
函数声明以及函数调用
等等

ESLint 支持多种规范，例如 Google、Airbnb 以及官方规范等。你也可以自定义你自己的规范。

如何安装和配置 ESLint？

在 VS Code 中，你可以安装 ESLint 扩展来实现 ESLint 的功能。在没有安装这个扩展之前，你需要先安装 ESLint：

$ npm i eslint -g

接下来，在你的项目中安装 ESLint 和它所需要用到的规范：

$ npm i eslint --save-dev
$ npm i eslint-config-airbnb --save-dev
$ npm i eslint-plugin-import --save-dev
$ npm i eslint-plugin-jsx-a11y --save-dev
$ npm i eslint-plugin-react --save-dev

这里我们采用的是 Airbnb 的规范，但是你也可以使用其他的规范。接下来，我们需要配置 ESLint。在你的项目根目录下创建一个.eslintrc文件：

{
  "extends": ["airbnb"],
  "plugins": ["import"]
}

这个文件告诉 ESLint 将会使用 Airbnb 规范和 import 插件。

你可以通过在终端中输入以下命令来检查一下是否安装成功：

$ eslint --init

如何在 VS Code 中使用 ESLint？

首先，确保你已经开启了 ESLint 扩展。在 VS Code 中，你可以通过以下快捷键来打开命令面板：

Windows / Linux：Ctrl + Shift + P
macOS：Command + Shift + P

输入 "ESLint"，你会看到 ESLint 在命令面板中。点击"ESLint: Enable ESLint"，这会自动在你的项目根目录下创建一个.vscode/settings.json文件，并添加以下代码：

{
  "eslint.enable": true,
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true
}

这个配置告诉 VS Code，在保存文件时自动执行 ESLint 并格式化代码。

如何使用 ESLint？

ESLint 是自动运行的，它会在保存文件时自动执行。当 ESLint 在你的代码中找到了错误时，会在编辑器中显示一个红色的波浪线，并在底部的状态栏中显示一个警告信息。

你也可以在命令面板中手动运行 ESLint：

Windows / Linux：Ctrl + Shift + P，输入 "ESLint: Fix All Auto-Fixable Problems"，并按回车
macOS：Command + Shift + P，输入 "ESLint: Fix All Auto-Fixable Problems"，并按回车

这会自动修复可以被 ESLint 自动修复的问题。

结论

使用 ESLint 和 VS Code 可以帮助你规范你的 JavaScript 代码，提高代码的可读性和可维护性。通过调整 ESLint 的规则，你可以使你的代码更加符合你的团队的编码规范。在编码过程中不断使用 ESLint，将会帮助你养成编写干净代码的好习惯，并且还会提高你的编码速度和质量。

示例代码

在下面的代码中，我们引入了eslint-config-airbnb规范和eslint-plugin-import插件，并定义了一些规则：

-- -------------------- ---- -------
-
  ---------- -----------
  ---------- -----------
  -------- -
    ------------------------------- --- - ------------- ------- ------- ---
    ----------------------- --------
    --------------- --------
    ----------------- --------
    ------------------- -------
  --
  ----------- -
    -------------------- ------- -------
  -
-

这个配置告诉 ESLint：允许.js和.jsx文件在import声明中被引用，禁止使用未解决的引用，并要求使用解构或者as关键字 import 命名的引用保证可读性。

在编辑器中输入以下代码，你会看到 ESLint 的警告：

import { user } from "./user.js";

const message = `Hello ${user.name}`;

console.log(message);

ESLint 建议 usre.js 中的 export 语句加上一个 default export：

// user.js
export default {
  name: 'John'
};

当使用名为 user 的 import 变量时，ESLint将不再进行警告。

import user from "./user.js";

const message = `Hello ${user.name}`;

console.log(message);

现在这个示例代码已经符合了 ESLint 的规范。

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