使用 VSCode + ESLint 实践前端编码规范

在团队的项目开发过程当中，代码维护所占的时间比重每每大于新功能的开发。所以编写符合团队编码规范的代码是相当重要的，这样作不只能够很大程度地避免基本语法错误，也保证了代码的可读性，毕竟：

程序是写给人读的，只是偶尔让计算机执行一下。—— Donald Knuth

本文将讲解如何在 VSCode 中配合 ESLint 扩展来实践团队内部的前端编码规范。

• 前端编码规范

• ESLint 完整配置文件

什么是 ESLint

ESLint（中文站点）是一个开源的 JavaScript 代码检查工具，使用 Node.js 编写，由 Nicholas C. Zakas 于 2013 年 6 月建立。ESLint 的初衷是为了让程序员能够建立本身的检测规则，使其能够在编码的过程当中发现问题而不是在执行的过程当中。ESLint 的全部规则都被设计成可插入的，为了方便使用，ESLint 内置了一些规则，在这基础上也能够增长自定义规则。

安装 ESLint 扩展

安装环境

• VSCode V1.11.1

• Windows 10

安装 ESLint 扩展

首先，打开 VSCode 扩展面板并搜索 ESLint 扩展，而后点击安装

安装完毕以后点击 从新加载 以激活扩展，但想要让扩展进行工做，咱们还须要先进行 ESLint 的安装配置。

安装 ESLint

若是你仅仅想让 ESLint 成为你项目构建系统的一部分，咱们能够在项目根目录进行本地安装：

$ npm install eslint --save-dev

若是想使 ESLint 适用于你全部的项目，咱们建议使用全局安装，使用全局安装 ESLint 后，你使用的任何 ESLint 插件或可分享的配置也都必须在全局安装。

这里咱们使用全局安装：

$ npm install -g eslint

安装完毕后，咱们使用 eslint --init 命令在用户目录中生成一个配置文件（也能够在任何你喜欢的位置进行生成）

咱们在第一个选项中选择自定义代码风格，以后根据须要自行选择。

设置完成后咱们会获得一份文件名为 .eslintrc.js 的配置文件：

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
};

配置 ESLint

配置文件生成以后，咱们接着能够进行自定义修改，这里咱们只粗略讲解经常使用的配置项，完整的可配置项可访问官方文档

配置环境

在上文生成的配置文件中可使用 env 属性来指定要启用的环境，将其设置为 true，以保证在进行代码检测时不会把这些环境预约义的全局变量识别成未定义的变量而报错：

"env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "jquery": true
}

设置语言选项

默认状况下，ESLint 支持 ECMAScript 5 语法，若是你想启用对 ECMAScript 其它版本和 JSX 等的支持，ESLint 容许你使用 parserOptions 属性进行指定想要支持的 JavaScript 语言选项，不过你可能须要自行安装 eslint-plugin-react 等插件。

"parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
}

配置规则

在上文的配置文件中， "extends": "eslint:recommended" 选项表示启用推荐规则，在推荐规则的基础上咱们还能够根据须要使用 rules 新增自定义规则，每一个规则的第一个值都是表明该规则检测后显示的错误级别：

• "off" 或 0 - 关闭规则

• "warn" 或 1 - 将规则视为一个警告

• "error" 或 2 - 将规则视为一个错误

"rules": {
    "indent": [
        "error",
        4
    ],
    "linebreak-style": [
        "error",
        "windows"
    ],
    "quotes": [
        "error",
        "single"
    ],
    "semi": [
        "error",
        "never"
    ]
}

完整的可配置规则列表可访问：http://eslint.cn/docs/rules/

其中带 √ 标记的表示该规则为推荐规则。

设置 ESLint 扩展

安装并配置完成 ESLint 后，咱们继续回到 VSCode 进行扩展设置，依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件

从左侧系统设置中能够看到，ESLint 扩展默认已经启用，咱们如今只需在右侧用户设置中添加配置来指定咱们建立的 .eslintrc.js 配置文件路径便可启用自定义规则检测，ESLint 会查找并自动读取它们：

"eslint.options": {
    "configFile": "E:/git/github/styleguide/eslint/.eslintrc.js"
},

至此，咱们已经可使用 ESLint 扩展来检测咱们的 js 文件了。

让 ESLint 支持 Vue 单文件组件

因为 ESLint 默认只支持 js 文件的脚本检测，若是咱们须要支持类 html 文件（如 vue）的内联脚本检测，还须要安装 eslint-plugin-html 插件。

由于咱们使用全局安装了 ESLint，因此 eslint-plugin-html 插件也必须进行全局安装：

$ npm install -g eslint-plugin-html

安装完成后，咱们再次打开 文件 > 首选项 > 设置，在右侧用户设置中修改 ESLint 的相关配置并保存：

"eslint.options": {
    "configFile": "E:/git/github/styleguide/eslint/.eslintrc.js",
    "plugins": ["html"]
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
]

最后，咱们打开一个 vue 文件，能够发现 ESLint 扩展已经正常工做了，嗯，enjoy yourself (●ˇ∀ˇ●)