ESLint VSCode 插件配置，让代码风格更加规范-JavaScript中文网-JavaScript教程资源分享门户

作为前端开发人员，我们在编写代码时不仅要注重功能的实现，同时还要注重代码的可读性和可维护性。在团队协作中，一致的代码规范也十分重要。ESLint 是一款工具，它可以帮助我们在编写代码时进行静态代码分析，帮助我们发现代码中存在的潜在问题并指导我们编写出符合规范的代码。本篇文章将介绍如何在 VSCode 中配置 ESLint 插件，以及如何编写符合规范的代码。

安装与配置 ESLint 插件

首先需要全局安装 ESLint：

npm install -g eslint

在 VSCode 中安装 ESLint 插件。
在项目中安装 ESLint 库：在命令行中进入项目目录，运行以下命令

npm install eslint --save-dev

在项目目录下创建 .eslintrc.json 文件，该文件用于存储代码规范配置信息。在该文件中，可以配置想要使用的规则集以及一些插件。

-- -------------------- ---- -------
-
    ---------- ---------------------
    ---------------- -
        -------------- -
    --
    ------ -
        ---------- -----
        ------ ----
    --
    -------- -
        ------------- -------
        ------- --------- ---------
    -
-展开代码

在该配置中，使用 ESLint 推荐的规则集，设置的 parserOptions 用于指定当前项目中使用的 JavaScript 版本（ECMAScript 2017），配置了环境信息（浏览器/ES6 环境），在 rules 配置了两个规则：1. 禁止使用 console 语句（warn 级别，可以用 error 或者 off 来关掉此规则）；2. 强制使用分号（error 级别，必须使用分号来结束语句）。其它规则可根据项目要求自定义配置。

通过快捷键 Shift + Ctrl + P（Mac 上是 Shift + Command + P）打开命令面板，输入 open workspace settings，在弹出的选项中选择“Preferences: Open Workspace Settings”或者使用快捷键 Ctrl + ,（Mac 上是 Command + ,），打开 VSCode 的 “Settings” 页面。
在 “Settings” 页面的搜索框中输入 “eslint”，在搜索结果中找到 “eslint.validate” 选项，将其值设置为 “auto”，表示开启 ESLint 验证。此时打开的 JavaScript 文件就会根据配置文件中的规则进行验证，ESLint 会提示出现的问题，如下图所示：

可以根据自己的需求进一步自定义配置。例如，如果想在保存文件时自动进行代码格式化和修复，可以设置以下配置：

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

至此，ESLint 的基本使用就介绍完了。

编写符合规范的代码

在编写代码时，遵循一致的代码规范可以使得代码更加清晰易读，同时也方便代码的维护和协作。下面列举一些常见的代码规范：

1. 缩进

使用 Tab 或者 2/4 个空格进行缩进，可以根据项目内部规范选择，但是在同一个文件中请保持一致。

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

-- -------------
-------- ------ -- -
  ------ - - --
-展开代码

2. 花括号

括号的位置应该与函数或控制语句在同一行，而不是在新的一行，但在 JavaScript 中，也有一些流派将左括号放在新的一行。

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

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

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

-------------
-
    -- ---- ----
-展开代码

3. 分号

推荐使用分号来结束语句，这样可以避免在自动拼接时出错。但是在 JavaScript 中，自动添加分号的规则比较复杂，所以有一些流行的库和框架中不使用分号。

// 正确示例
var a = 1;

// 错误示例：省略分号
var a = 1

4. 引号

使用单引号或双引号来表示字符串，建议在整个项目中统一使用一种引号。

// 正确示例
var str1 = 'Hello';
var str2 = "World";

// 错误示例：不一致的引号使用
var str1 = 'Hello";
var str2 = "World';

5. 变量命名

变量名应该使用驼峰命名法，即所有单词的首字母都大写，而且在需要表示常量的时候，全大写。

// 正确示例
var userName = 'Jack';
var MAX_COUNT = 100;

// 错误示例：变量名不规范
var user_name = 'Jack';
var maxCount = 100;

6. 函数命名

函数命名应该基于动词或动词短语，并且就像变量命名一样，使用驼峰命名法。

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

-- -----------
-------- ------------------- -
    -- ---- ----
-展开代码

7. 注释

注释是用来解释代码或提供其他相关信息的。在编写注释时，请遵循以下规则：

在代码前面或后面增加注释；
使用单行注释或多行注释；
// 后面跟随注释，多行注释以/* 开始，以 */ 结尾。

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

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

-- ----------
-------- --------- -
    -- ---- ----
    -- -----------
-展开代码

结语

ESLint 是一个十分实用的静态代码分析工具，我们可以通过 VSCode 的插件来进行使用和配置。代码规范也是十分重要的一个方面，在团队协作中，遵守一致的代码规范可以大大提高代码的可读性和可维护性。

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

ESLint VSCode 插件配置，让代码风格更加规范