使用 ESLint 优化 JavaScript 代码风格-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，JavaScript 是必不可少的一门语言。然而，由于 JavaScript 语言设计的缺陷和易用性，导致在编码时容易出现各种问题。比如有些团队开发者的编码风格参差不齐，导致代码可读性低下、代码维护困难；又比如有些开发者会因为个人编程习惯或纯粹的马虎导致代码错误和漏洞不断。

为了减少错误的可能性、提高代码质量及可读性，推荐引入 ESLint 工具来规范代码风格与语言习惯。ESLint 是一个 JavaScript 代码质量工具，能够自动、可配置地检查 JavaScript 代码中的问题，并对代码进行自动化的校对。

在本系列文章中，我们将会介绍 ESLint 工具的使用方法及使用 ESLint 工具的一些实用与优秀的配置方案，来优化我们的开发效率和代码质量。

如何使用 ESLint

首先需要安装 ESLint 工具。运行以下命令：

npm install -g eslint

全局安装 ESLint 工具，我们可在电脑上的任何一个文件夹下使用 ESLint 工具。

初始化配置。

使用 ESLint 需要提供 .eslintrc 配置文件，用于定义和描述要检查的规则，以***.json*** 的格式定义此文件。运行以下命令：

eslint --init

该命令将提供一个配置向导，让您选择使用哪些规则，或者您可以选择使用一个现成的配置，或者根据您的需求来创建一个完全定制的配置方案。做完这个步骤后，就准备好开始使用 ESLint 工具了！

使用 vs code 编辑器安装 ESLint 插件以方便在代码编写时捕获错误。

目前，市面上主流的代码编辑器都集成了 ESLint 软件，通过相关插件来检测 JavaScript 代码错误。本文档推荐使用 VS Code，直接在 Visual Studio Code 中进行集成和使用。

安装 ESLint 插件，顶部菜单点击「文件」-》「打开全局插件安装」，在插件安装中，获取搜索栏,输入ESLint回车，选择 Eslint(package:eslint) 安装即可。安装完成后可以在 VS Code 左边栏看到安装好的插件。

在项目中使用 ESLint 需要注意以下几点：

（1）在对 ESLint 工具进行配置时，需要明确需要特别关注一些功能点（比如注释、优先顺序、缩进等）。
（2）在项目中使用 ESLint 工具时，我们可以添加 .eslintignore 文件选择部分不需要ESLint检测的文件。
（3）将 ESLint 加入 pre-commit 钩子中，以防止提交错误的代码。

享受 ESLint 带来的优点

通过使用 ESLint 检查 JavaScript 编辑时错误，您可以：

提高代码质量和可维护性
统一减少产生的错误，节省时间
容易维护的代码库

ESLint 的常见配置方案：

全部默认规则

{
    "extends": "eslint:recommended"
}

Standard - 标准规则

{
    "extends": "standard"
}

airbnb - Airbnb 规则

{
    "extends": "airbnb"
}

Google - 谷歌规则

{
    "extends": "google"
}

ESLint 的指南

变量规范

通过 ESLint，我们可以强制规定我们要在代码中使用的变量的使用方式。以下是在 JavaScript 代码中，您应该遵循的变量规则：

变量名应该使用小驼峰式大小写

例如：var testVariable = 'this is an example variable';

变量名应该使用名词和修饰词的形式

例如：var loginButton = $('#login');

避免全局变量

全局变量是指在全局定义的变量，即不带 var 的变量。在 JavaScript 中，全局变量不是一个好的编程实践，因为它们可能会导致代码难以调试、代码复杂性增加，并可能与其他代码库冲突。

输入规范

在 JavaScript 中，不推荐使用反斜杠（\）来延续代码，因为这会让代码难以阅读并导致更多的错误。

例如：

var foo = function(){
   console.log('some text')
   console.log('some other text')
}

使用 ESLint，上述代码应改为：

var foo = function() {
  console.log('some text');
  console.log('some other text');
}

函数规范

在 JavaScript 中，函数名应该使用小驼峰式大小写，并使用动词和名词的形式。

函数名应该使用 function 关键字作为前缀，除非您使用的语言版本支持箭头函数。箭头函数使用箭头（=>）显示函数定义，并且不需要使用 function 关键字。

例如：

// Function declaration with function keyword
function doSomething() {
   // Code goes here
}

// Using the arrow function expression
const doSomething = () => {
   // Code goes here
}

注释规范

在 JavaScript 中，注释应该使用长注释来解释代码的功能，应该在两个正斜杠（//）之后开始书写。

例如：

/* This is a long comment that should span multiple lines.
   The code below does something useful. */
var foo = function() {
   console.log('some text');
   console.log('some other text');
}

在上一个示例中，如果我们使用 // 开头的注释，就会变成：

// This is a long comment that should span multiple lines.
// The code below does something useful.
var foo = function() {
   console.log('some text');
   console.log('some other text');
}

总结

在本篇文章中，我们介绍了如何使用 ESLint 工具，以及一些常见的 ESLint 配置方案，例如禁用全局变量，并为变量，输入，函数和注释等定义规范。

通过 ES Lint 提高开发人员的错误捕捉能力，将错误捕捉到最小程度，这样将会极大地提高代码的质量和可维护性。本文附有文章配套示例代码，希望能够帮助您更好的了解 ESLint 工具使用方式及优化 JavaScript 代码风格的方法。

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